浏览器开发者工具的使用技巧

打开开发者工具的方法：

模块

使用过程中，最常用的三个模块为：

用于定位页面元素、修改元素代码及属性；新增/移除监听事件；添加/删除DOM断点等；

查看元素的代码

点击工具栏左上角箭头图标（Ctrl+Shift+C/Command+Shift+C)，进入元素选择模式，鼠标单击页面上需要定位的元素，开发者工具会跳转到元素所在的代码区域，右键单击元素会弹出可操作的所有选项，可以对元素的属性进行增删查改，效果会立即作用在当前标签页，常用于调试开发中的页面样式

此处做的修改刷新页面后会复原为初始状态，调试好样式记得先把所做修改保存起来

几个比较常用的技巧

切换设备显示模式：可以自由切换为手机/PC端页面，常用于验证不同尺寸下页面的显示

切换设备仿真

颜色取样器：在元素选择模式下，选择某个元素，点击右侧点样式栏，点击color属性，会弹出颜色选择器，此时鼠标会变成画笔，可以选择页面上的颜色，选择器会显示对应颜色代码

颜色选择器

限制复制文本的页面复制文本：在元素选择模式下，选中要复制的文本，定位到文本所在元素，双击元素，使用 Ctrl+C 即可复制选中的文本，图片同理

限制文本复制

显示元素的坐标：打开开发者工具，键入 Ctrl+Shift+P 呼出命令菜单，选择 悬停时显示标尺 选项，此时，鼠标移动到开发工具中的元素代码上，会显示元素在页面上的坐标信息，这对于UI的布局设计很有作用

悬停显示标尺

捕获网页全部（选中）内容：打开开发者工具，键入 Ctrl+Shift+P 呼出命令菜单，选择 捕获全尺寸屏幕截图 选项，此时会生成一个当前页面所有内容的图片，点击下载即可，用于截取滚动页面特别好用

捕获网页

复制元素路径：Class Selector 或 XPath，常用于UI自动化测试

元素路径

在这里可以看到当前页面所有的请求，同时可以针对不同的请求类型进行筛选，用于分析和监视网页加载过程中的网络请求和响应

通常包括以下功能：

请求列表：显示页面加载期间发出的所有网络请求，包括HTML、CSS、JavaScript文件、图像、API请求等。每个请求都有详细信息，如请求方法、状态码、请求时间和大小等。
请求详细信息：单击特定请求以查看更多详细信息，如请求标头、响应标头、cookie、参数等。这对于调试和分析请求非常有用。
过滤和搜索：根据不同的条件对请求进行过滤和搜索，以找到特定类型的请求或特定时间段内的请求。对于接口请求来说，最常用的筛选类型为 Fetch/XHR
性能分析：网络模块还可以显示页面加载时间线，以了解每个请求的时间轴，从而识别潜在的性能问题。
缓存管理：查看并清除浏览器缓存，常用在开发时强制重新加载资源
请求修改：手动修改请求的标头或参数，以模拟不同的请求条件，这对于测试和调试非常有用。