chrome开发人员工具说明

准备工作

要获得开发人员工具，请点击下载

Google Chrome 浏览器

要开始使用开发人员工具，请先下载Google Chrome 浏览器。（如果您想试用最新版本的的开发人员工具，可以下载开发版或测试版（英文网页）Google Chrome 浏览器。）

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

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

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

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

∙在Mac 上，使用Command+Option+I 快捷键打开开发人员工具（或使用Command+Option+J 直接进入JavaScript 控制台）。

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

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

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

元素(Elements) 面板

在元素（Elements）面板中，可以看到整个页面的DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。

我们这里以Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，

可通过点击窗口左下方的“停靠” 图标将其变为内嵌模式）：

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

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

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

点击工具窗口左下角的放大镜图标可进入“审查模式”，选中后，放大镜变为蓝色，这时随鼠

标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的DOM 节点信息。

另外值得注意的一点是，在Google Chrome 浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。

资源(Resources) 面板

在资源面板中，你可以看到从网络上下载的所有资源。打开资源面板的时候，您通常会看到如下的界面：

由于资源跟踪会对性能产生一定影响，可以选择只对本次会话进行追踪还是对所有会话都进行资源跟踪。

选择好后点击启用资源追踪（“Enable resource tracking”）按钮，你会看到如下的状态：

这是加载此网页使用网络资源的时间表。每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间（Latency），即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每个部分所花销的精确时间。

图中蓝色和红色的两条垂直线分别代表DOMContent 加载完成和Load 事件被触发的时间点。在了解了网页各部分加载所花费的的时间后，您可以进行有效改进从而提高网站的效率。

位于时间表上方的轴，列出了可供选择的不同类型的资源，您可以选择查看所有资源，或仅查看某一类的资源。

通过时间表下方的下拉菜单，你可以指定排序方式。同时您还可以通过下拉菜单左侧的“列表”选择使用宽行或窄行的方式来查看所有资源的信息。

点击左侧工具栏的Size 图标，可以看到下载的各项资源的大小。

点击左侧各项资源，则可以看到它的详细信息，例如点击logo_cn.png 这项，我们将会看到：

打开“ Headers ”标签页可以查看完整的头信息。您甚至可以直接将资源图标拖入浏览器窗口，在浏览器中直接直接访问该项资源。

脚本(Scripts) 面板

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