Google Chrome浏览器开发人员工具

 

Google Chrome浏览器开发人员工具

准备工作

要开始使用开发人员工具，请先下载Google Chrome 浏览器。在浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：

点击位于浏览器用户界面右上角的“页面”下拉菜单，然后选择“开发人员”→“开发人员工具”。

右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。

在 Windows操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入 JavaScript 控制台）。

现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着 8 个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况、页面相关的脚本等。通过 Ctrl+[ 和 Ctrl+] 键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。

       工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换 JavaScript 控制台状态，以及其它一些功能。当然您也可以使用 Esc 键来更快地切换 JavaScript 控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。

 

       接下来的单元，让我们一起来一起分解这些图标所对应面板具有的强大功能吧！

1.    元素（Elements）面板

在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠” 图标将其变为内嵌模式）：<!--[endif]-->

 

在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。

 

       拖动工具窗口最右侧的滚动条，在展开的 Styles 模块下方还有 Metrics、Properties、Event Listeners 几大模块。Metrics 模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。

 

       向上拖动工具窗口中部的滚动条，找到“图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开 Event Listeners 中个各项，可看到这个链接（元素）的相关事件监听函数。通过 Event Listeners 项右侧的“齿轮”图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所有注册的事件。

 

点击工具窗口左下角的放大镜图标可进入“审查模式”，选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的 DOM 节点信息。另外值得注意的一点是，在 Google Chrome 浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。

2.   资源（Resources）面板

在资源面板中，可以查看到请求的资源情况，包括CSS、JS、图片等内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

 

3.  网络（NetWork）面板

网络标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。

 

 

每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间（Latency），即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每个部分所花销的精确时间。图中蓝色和红色的两条垂直线分别代表DOMContent加载完成和 Load 事件被触发的时间点。

 

4.    脚本（Scripts）面板

在脚本面板里，您可以方便的调试 JavaScript 代码。下面的图中标注了在脚本面板里的几个主要功能：

<!--[if !supportLists]-->①     <!--[endif]-->单步调试，不进入函数体内部
②单步调试，进入函数体内部
③跳出当前函数

设置断点后按 F5 刷新，页面会在执行到断点语句处停下，您可以在右侧添加所需观察的变量，来进行跟踪变量值的变化，也可查看堆栈调用情况及全局变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的值。

 

 

5.   时间轴（Timeline）面板

时间轴面板为您的网页及网络应用程序做了一个详细的性能分析，告诉您载入页面的时间究竟花在哪些地方。从加载资源到解析 JavaScript 脚本、计算样式表及页面渲染的所有步骤，您都可以在这里看到它们消耗的时间和内存。打开时间轴面板，您会看到这样的界面：

 

6.   剖析（Profiles）面板

剖析面板由CPU 分析器和堆分析器组成，它能够帮助您了解网页和网络应用程序的执行时间和内存使用情况。

CPU 分析器显示的是 JavaScript 脚本里的每个函数分别占用了多少执行时间

堆分析器显示每个 JavaScript 对象所使用的内存大小

 

7.   审计（Audits）面板

审计面板是在 Google Chrome 浏览器 5.0 中新引入的模块。它可以帮助您检查网页性能和网络利用率。打开审计面板，您将看到这样的界面：

 

 

您可选择所需检测的项目或选择“检查全部”（“ Select All ”），然后点击“运行”（“ Run ”）按钮，开发人员工具将为您的网页生成一份详细的审计报告并给出关于网络利用及性能优化方面的建议

8.    JavaScript 控制台（Console）

JavaScript 控制台可与其它面板联合使用，您可以借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。

 

评论

2 楼 kroseing 2014-10-27  

辛苦了

1 楼 javalinjx 2013-09-27