看这篇轻轻松松学会Chrome DevTools_chrome怎么用fps录制-CSDN博客

本文链接：https://blog.csdn.net/qq_28087959/article/details/139062760

Chrome DevTools 是一个功能强大的工具集，它可以帮助开发者调试网页、分析性能、模拟设备、审查元素样式等。以下是一些关于 Chrome DevTools 的使用攻略：

常用命令和调试[¹]:
- 快捷键 cmd + shift + p 可以呼出快捷指令面板，输入命令或 ? 查看所有可用命令。
- 性能监视器可以通过 > performance monitor 打开。
- 实时监控 FPS 可以通过 > FPS 选择第一项来实现。
- 截图单个元素可以通过 > screenshot 选择 Capture node screenshot 完成。
黑盒脚本[¹]:
- 使用 Blackbox Script 功能可以剔除不需要关注的脚本，比如第三方 JavaScript 框架和库。
事件监听器断点[¹]:
- 在 Sources 面板中，可以设置事件监听器断点，以便在特定事件发生时触发调试。
本地覆盖[¹]:
- 使用 local overrides 功能可以覆盖网页资源，通过 Sources > Overrides > Enable local Overrides 来设置本地文件夹。
控制台内置指令[¹]:
- 控制台提供了多种内置指令，如 $(selector, [startNode]) 用于选择元素，$$ 用于选择多个元素，$x(path, [startNode]) 用于 XPath 选择器。
打开 DevTools[²]:
- 可以通过菜单栏的 “更多工具 > 开发者工具” 打开，或使用快捷键 F12、option + command + i（Mac）。
Elements Tab 栏[²]:
- 在 Elements 面板中，可以查看和修改 DOM 元素。
Console 面板[³]:
- 打开 Console 面板的快捷键是 Control + Shift + J（Windows）或 Command + Option + J（Mac）。
DevTools 界面概览[⁴]:
- DevTools 界面包括 Elements、Console、Sources、Network、Performance、Memory、Application、Security 和 Lighthouse 等多个面板。
元素审查与样式调整[⁴]:
- 可以实时编辑 CSS 属性，查看元素的计算样式与层叠样式。
JavaScript 调试[⁴]:
- 在 Sources 面板中设置断点，使用 Event Listener Breakpoints 设置特定事件的断点。
性能优化[⁴]:
- 使用 Performance 面板记录和分析页面性能，了解关键性能指标。
内存泄露检测[⁴]:
- 在 Memory 面板中使用 Heap Snapshots 和 Allocation Profiler 来检测内存泄漏。
辅助功能与无障碍性[⁴]:
- 使用 Lighthouse 审计和 ARIA 属性检查来提升网站的可访问性。
高级技巧与插件扩展[⁴]:
- 利用快捷键和 Workspaces 功能定制工作流，安装特定框架的插件来扩展 DevTools 的功能。

示例：

以下是一些具体的使用 Chrome DevTools 的例子：

调试 JavaScript:
- 打开 DevTools 并点击 Sources 面板。
- 在你想要调试的 JavaScript 文件中，点击代码行号左侧的区域来设置一个断点。
- 刷新页面或触发某个事件，执行将停在断点处。
- 使用 DevTools 提供的调试工具来单步执行代码、查看调用堆栈、检查变量值等。
审查和修改 DOM:
- 打开 DevTools 并点击 Elements 面板。
- 使用鼠标右键点击页面中的元素，选择“检查”来直接跳转到该元素的 DOM 节点。
- 在 Elements 面板中，右键点击 DOM 节点并选择“Edit as HTML”来修改 HTML。
- 修改后，页面会自动更新以反映这些更改。
性能分析:
- 在 DevTools 中点击 Performance 面板。
- 点击“录制”按钮开始记录页面的性能。
- 执行一些页面操作，比如滚动、点击等。
- 停止录制，DevTools 会展示这段时间内的帧率、CPU 和内存使用情况等数据。
网络请求监控:
- 打开 DevTools 并点击 Network 面板。
- 刷新页面以捕获所有网络请求。
- 点击任何一个请求，查看其详细信息，如请求头、响应头、请求体和响应体等。
- 使用过滤器来查找特定类型的请求，比如 XHR、JS、CSS 等。
模拟移动设备:
- 打开 DevTools 并点击 Toggle device toolbar 按钮（或使用快捷键 Ctrl + Shift + M）。
- 选择一个预设的设备或自定义设备尺寸来模拟移动设备。
- 使用设备工具栏中的各种工具来模拟网络条件、地理位置等。
使用 Overrides 功能:
- 在 Sources 面板中，点击 Overrides 按钮。
- 启用 Local Overrides 功能。
- 在本地文件系统中创建一个文件夹，并在 DevTools 中指定这个文件夹。
- 当你在 DevTools 中修改 CSS 或 JavaScript 文件时，更改将被保存到本地文件夹中，从而覆盖远程资源。
使用控制台执行代码:
- 打开 DevTools 并点击 Console 面板。
- 输入 JavaScript 代码并按 Enter 执行。
- 使用 console.log() 来打印信息，console.warn() 或 console.error() 来显示警告或错误。
使用 $ 和 $$ 选择器:
- 在 Console 面板中，使用 $('selector') 来获取页面上匹配该选择器的第一个元素。
- 使用 $$('selector') 来获取所有匹配该选择器的元素的数组。
- 例如，$('body') 将返回页面的 <body> 元素，而 $$('img') 将返回页面上所有 <img> 元素的数组。