1. 打开方式：按“F12”键；或按“Ctrl + Shift + I”（Windows/Linux系统）或“Cmd + Option + I”（Mac系统）；也可右击页面的任意位置，选择快捷菜单中的“检查”命令；还能单击Chrome浏览器右上角的自定义图标，展开菜单，选择“更多工具”→“开发者工具”命令。
2. 界面介绍：打开后，会看到多个标签的面板，常用的有Elements（元素）、Console（控制台）、Sources（源代码）和Network（网络）等。
3. Elements面板使用：在Elements面板中，左侧栏会显示页面的DOM结构，右侧栏显示对应的选中节点样式以及标准盒模型。可查看元素属性、修改元素属性、修改样式等，修改后的效果会实时同步到页面中。比如，修改当前选中的标签的width属性为500px，页面中的div宽度就会发生变化，同时右侧栏中该元素的盒模型值也会更新。
4. Console面板使用：可在Console面板直接编写代码，作为与JavaScript进行交互的Shell命令行，还能输出开发过程中的日志信息。例如，可直接定义函数并调用，也可使用JavaScript中注入的Console对象中的常用方法，快速显示页面中元素的信息。编写代码时，按“Shift + Enter”组合键可实现代码的换行。
5. Sources面板使用：此面板显示网站的所有资源，如HTML、CSS、JavaScript文件等。若在工作区打开本地文件，可实时编辑代码，并支持断点调试。打开JavaScript文件，单击代码前面的编号可设置断点进行调试，设置的所有断点都会显示在右侧的Breakpoints断点区，重新刷新页面，即可看到设置断点位置的代码运行情况。
6. Network面板使用：用于记录页面上网络请求的详情信息，可进行网络性能优化。可查看所有请求的运行状况，还能使用顶部的过滤按钮（如XHR、JS、CSS）来缩小查看的资源类型，点击任何资源可查看详细信息，如请求头、响应头、预览等。
7. 其他功能：Device Mode可模拟不同的设备和屏幕尺寸；Audits可使用Lighthouse分析页面的性能、可访问性等Web应用程序指标。
