Chrome DevTools 概览

Chrome开发者工具(简称DevTools)是一组网页制作和调试的工具,内嵌于Google Chrome浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用DevTools,可以更加高效的定位页面布局问题,设置JavaScript断点并且更好的理解代码优化。

注意: 如果你是一个web开发者并且希望获取最新版本的DevTools,你可以使用 Google Chrome Canary.

访问 DevTools

访问DevTools,首先用Chrome打开一个web页面或web 应用,也可以通过下面的方式:

  • 在浏览器窗口的右上方选择Chrome菜单, 然后选择工具 > 开发者工具。
  • 在页面上任意元素上右键,然后选择审查元素。

DevTools窗口会在Chrome浏览器的底部打开。

下面是一些有用的快捷键来快速的打开DevTools:

  • 使用 Ctrl + Shift + I (Mac上为 Cmd+Opt+I)打开DevTools。
  • 使用 Ctrl + Shift + J (Mac上为 Cmd+Opt+J)打开DevTools中的控制台
  • 使用 Ctrl + Shift + C (Mac上为 Cmd+Shift+C)打开DevTools的审查元素模式。

为了日常工作,学习快捷键将帮助你节省更多的时间。

DevTools 窗口

DevTools 在窗口顶部的工具栏对不同的任务功能进行分组。在每个工具栏选项卡和对应的操作面板中,你可以处理某项特殊的任务,例如DOM元素,资源和源码。

概览 - 图1

DevTools现已经支持内置颜色选择器..

DevTools目前主要包括以下八个主要功能组:

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

你可以通过 Ctrl+[Ctrl+] 快捷键在不同面板之间进行切换。

审查DOM元素和样式

在Elements面板中你可以通过DOM树的形式查看所有页面元素,并且可以对其进行所见即所得的编辑。
当你需要确认页面某一个HTML片段的时候,可能经常需要使用Element面板,比如,你可能想知道一个图片元素是否拥有id属性以及id的具体值。

概览 - 图2

在DOM中查看一个head元素

Read more about inspecting the DOM and styles

使用Console

JavaScript 控制台主要为开发者在测试web页面和应用的过程中提供两方面的功能:

  • 在开发过程中,记录代码诊断信息。
  • 作为shell提示窗口用来和页面文档以及DevTools进行交互。

你可以利用Console API提供的方法来记录诊断信息,例如console.log()console.profile()

你可以利用命令行API提供的方法直接在控制台中计算表达式。例如,利用$()选择元素或者调用profile()来启动CPU性能监控。

概览 - 图3

在JS 控制台中执行一些命令

了解更过关于命令行

调试 JavaScript

随着JavaScript程序复杂度的增加,开发者需要更加强大的debug工具来快速的发现问题并高效的修复。DevTools包含了一系列有用的工具让调试javaScript变得更加轻松。

概览 - 图4

一个条件断点用于向终端输出日志

阅读更多了解如何使用DevTools调试JavaScript代码

提高网络性能

在网络面板中可以看到网络请求资源的实时信息。明确和定位那些比预期更加耗时的请求是优化web页面的关键步骤。

概览 - 图5

上下文目录用于查看网络请求

阅读更多了解如何提高网络性能»

监听

监听面板会在页面加载的时候对其进行分析,然后提供优化和建议来降低页面加载时间,并提提高响应灵敏性。进一步查看,我们推荐使用PageSpeed Insights

概览 - 图6

监听给出的建议

提高渲染性能

在Timeline面板中,你可以从整体上看到在web页面加载和被使用的过程中时间消耗在哪里了。所有的时间,从加载资源到解析JavaScript,计算样式和重绘都会被标记在时间线上。

概览 - 图7

标记着不同事件的时间线例子
阅读更多了解如何提高渲染性能»

JavaScript & CSS 性能

在分析面板中,你可以分析一个页面或app的执行时间和内存使用情况。该面板帮助你了解资源消耗在哪里,并且帮助你优化代码。目前提供的分析器包括:

  • CPU分析器显示页面JavaScript函数的执行时间。
  • Heap分析器页面JavaScript对象和相关联的DOM节点的内存分布情况。
  • JavaScript分析器显示脚本的执行时间分布。

概览 - 图8

一个Heap快照

阅读更多了解如何提高JavaScript和CSS性能»

审查存储

在资源面板中你可以查看被审查页面的资源情况。你可以对与 HTML5 Database, Local Storage, Cookies, AppCache等进行交互操作。

概览 - 图9

资源面板中显示的Web Starter Kit中的JavaScript文件

阅读更多了解审查存储资源

扩展阅读

DevTools文档中还包括一些其他部分可能对你有所帮助:

扩展资源

关注@ChromiumDev 或去论坛提问。