Chrome DevTools 使用总结_break on devtools-优快云博客

本文链接：https://blog.youkuaiyun.com/ciel_2/article/details/113824180

本文详细介绍了ChromeDevTools的各项功能，包括通过Elements面板检查和调试DOM，使用console访问和操作节点，设置断点进行DOM变更调试。此外，还讲解了如何在Styles面板中调试CSS，以及利用console面板进行JavaScript日志调试和性能分析。同时，文章还涵盖了网络请求监控、安全性检查以及性能优化等方面，为前端开发者提供了全面的调试工具指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chrome DevTools 功能简介

Elements元素面板
检查和调整页面，调试DOM，调试CSS
Network网络面板
调试请求，了解页面静态资源分布，网页性能检测
Console控制台面板
调试JavaScript，查看console log 日志，交互式代码调试
Sources源代码资源面板
调试JavaScript页面源代码，进行断电调试代码
Application应用面板
查看&调试客户端存储，如cookie、LocalStorage、SessionStorage
Performance性能面板
查看页面性能细节，细粒度对网页载入进行性能优化（高阶）
Memory内存面板
JavaScript CPU分析器，内存堆分析器（高阶）
Security安全面板
查看页面安全及证书问题
Audits面板
使用Google Lighthouse辅助性能分析，给出优化建议（高阶）

打开Chrome DevTools

在Chrome菜单中选择：更多工具 --> 开发者工具
在页面元素上右键点击，选择”检查“
快捷键：
- 打开最近关闭的状态：
  - Mac：cmd + option + i
  - Windows：Ctrl + Shift + i
- 快速查看DOM或样式：
  - Mac：cmd + option + c
  - Windows：Ctrl + Shift + c
- 快速进入console查看log运行JavaScript：
  - Mac：cmd + option + j
  - Windows：Ctrl + Shift + j
- F12
  - Mac：fn + F12
  - Windows： F12

访问及调试dom

使用elements访问节点

在console中访问节点

使用document.querySelectAll访问
在console中直接输入document.querySelectAll('h1')，返回一个数组，数组中包含所有h1标签元素
使用$0快速访问选中的元素
在elements中选中元素，然后在console中输入$0,返回被选中的元素，可对元素进行编辑
拷贝 --> JS Path
在elements中选中元素，右键 --> Copy --> Copy JS path，然后在console中粘贴，回车后返回该元素

给dom进行断点调试

elements中选中要调试的元素，右键 --> break on，选择调试方式

属性修改时打断点：break on --> attribute modifications
节点删除时打断点：break on --> node removal
子树修改时打断点：break on --> subtree modifications

调试样式及CSS

styles面板中可查看，越往下样式优先级越低

在元素中增加类与伪类

路径：styles面板 --> :hov

快速调试css数值及颜色、图形、动画等

console面板

功能

运行JavaScript代码，交互式编程
查看log
断点调试代码

在console中调试log日志

console.log 打印信息
console.warn 告警信息
console.error 错误信息
console.table 展示JSON格式的复杂信息
console.group 信息组展示
用法如下：

const label = '使用console打印一组信息'
console.group(label)
console.info('log')
console.info('warn')
console.info('error')
console.groupEnd(label)

console custom 定制样式
用法如下：

const style = `background-color: red`
console.log('%c这里展示定制的样式', style)

network 网络请求错误展示
console.time 监控代码片段执行时间
用法如下：

console.time()
fn()
console.timeEnd() // 显示出fn函数的执行时间

9.console.clear() 清除日志

调试JavaScript的基本流程 && 断点调试

打断点3种方式（F9进行下一步）：

debugger
Chrome Devtools 中的 Sources面板，直接点击对应代码行数打断点
Chrome Devtools 中的事件的断点