chrome devtools简介

最新推荐文章于 2025-05-24 08:39:57 发布

转载最新推荐文章于 2025-05-24 08:39:57 发布 · 820 阅读

文章标签：

#chrome #浏览器 #调试 #文档

测试技术专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何通过多种方式打开Chrome DevTools，包括浏览器内的操作和快捷键，并深入解读了其主要界面元素的功能，如Elements、Network、Sources、Timeline、Profiles等面板，以及界面上的审查按钮、右上角的按钮功能，如drawer、settings、dock和close，为开发者提供了全面的工具使用指南。

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

来源：http://www.html-js.com/article/2009

打开chrome dectools

打开chrome devtools可以通过几种方式：
1.在浏览器内：右键 > 审查元素
   对应快捷键是：ctrl+shift+c
2.点击浏览器右上角设置 > 工具 > 开发者工具
  对应快捷键是：ctrl+shift+i或F12
3.还可以直接用快捷键：ctrl+shift+j 打开chrome devtools中的控制台(console面板)

界面介绍

chrome devtools打开后一定会选中一个面板，但今天我们不关心面板里的内容，只介绍除面板（黑色线框内）之外的界面元素。

审查按钮：与右键 > 审查元素是同一个功能，可以选中页面中的一个元素，然后chrome devtools会直接打开Elements，显示元素在dom树中的位置（后续介绍Elements面板时，会详细介绍）。

接下来是每个面板对应的tab：
1.Elements：面板里显示当前的文档树，当前选中元素的样式、绑定的事件、断点、父类。
2.Network：显示网络请求。
3.Sources：显示资源，包括请求的资源，工作空间的资源，chrome扩展的Content scripts，还有自己写的代码片段。
4.Timeline：可以记录客户端用户交互时触发的事件，页面的重绘和重排版，使用的内存，页面渲染的帧。
5.Profiles：用于调试性能，可以记录javascript的cpu使用，堆快照等。
6.Resources：主要是一些本地存储，例如：cookies，localStorage。
7.Audits：提高页面性能的一些建议。
8.console：控制台，类似命令行。

然后是chrome devtools右上角的一些按钮，依次是：
1.drawer：从chrome devtools底部打开一个面板，里边包括几个tab。（对应快捷键是Esc）
2.settings：主要是开发工具的一些设置，还包括部分快捷键。（对应快捷键是F1）
3.dock：设置开发工具的位置，点击可以切换到上次的位置。点按可以出现所有可选的位置：居左，居右，居下，与当前窗口分离。
4.close：关闭chrome devtools。

刚说到drawer打开后，里边包括4个tab，依次是：
1.Console：同上。
2.Search：对source里边的资源全局搜索。（对应快捷键是ctrl+shift+f）
3.Emulation：模拟器，可以模拟不同的移动设备，不同分别率的屏幕，不同的用户代理，感应器（完全没有接触过。。。）。
4.Rendering：可以选择显示一些浏览器渲染的数据。