Skip to main content

Chrome 调试工具

Chrome 开发者工具 (Chrome Devtools，又称为 Chrome 调试工具) 是一款强大的前端调试工具，可以帮助我们快速定位页面问题，提高开发效率。

打开调试工具​

  • 快捷键：F12
    • ctrl + shift + i：打开调试工具 ⌈内存⌋ 选项卡
    • ctrl + shift + c：打开调试工具 ⌈元素⌋ 选项卡
    • ctrl + shift + j：打开调试工具 ⌈控制台⌋ 选项卡
    • ctrl + shift + m：打开调试工具 ⌈设备⌋ 选项卡
  • 右键菜单：鼠标右键点击页面，-> 检查 或 检查元素
  • 菜单栏：菜单栏 -> 更多工具 -> 开发者工具
  • 地址栏：地址栏输入 Chrome://inspect，点击 Open dedicated DevTools for Node

调试工具界面​

  • 元素 Elements：可以查看页面元素，可以对元素进行编辑，查看样式，查看事件等。
  • 控制台 Console：可以查看页面报错信息，可以查看页面的 console.log() 打印信息。
  • 网络 Network：可以查看页面请求的资源，可以查看请求的响应时间，响应状态，响应头等。
  • 源代码 Sources：可以查看页面源代码，可以对源代码进行编辑，查看样式，查看事件等。
  • 性能 Performance：可以查看页面渲染性能，可以查看页面渲染的各个阶段所占用的时间，可以查看页面渲染的各个阶段所占用的时间，可以查看页面渲染的各个阶段所占用的时间。
  • 内存 Memory：可以查看页面内存占用情况，可以查看页面内存占用情况。
  • 应用 Application：可以查看页面的缓存，可以查看页面的缓存。
  • 安全 Security：可以查看页面的安全问题。
  • Lighthouse：可以查看页面的性能问题。

参考​