Google_Chrome_开发人员工具详解

《Google_Chrome_开发人员工具详解》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实用标准文档GoogleChrome浏览器开发人员工具，让网页开发变得更轻松无论是IE6/7的InternetExplorerDeveloperToolbar或者是IE8自带的DeveloperTools，还是Firefox的Firebug，以及Safari的WebInspector和Opera的Dragonfly，他们的宗旨只有一个——帮助程序员方便、更高效地进行网页开发。作为浏览器中生力军，GoogleChrome浏览器(4.0及以上版本)也自带了丰富的开发人员工具，让您可以随时随地对任何网页的CSS、HTML和JavaS

2、cript进行实时编辑、调试以及监控。GoogleChrome浏览器开发人员工具不仅仅能帮助您诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题，还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。本篇教程将从以下几部分系统地讲解如何使用GoogleChrome浏览器开发人员工具来帮助您的开发：·准备工作·如何使用元素(Elements)面板·如何使用资源(Resources)面板·如何使用脚本(Scripts)面板·如何使用时间轴(Timeline)面板·如何使用剖析(Profiles)面板·如何

3、使用存储(Storage)面板·如何使用审计(Audits)面板·如何使用JavaScript控制台(Console)准备工作要开始使用开发人员工具，请先下载GoogleChrome浏览器。（如果您想试用最新版本的的开发人员工具，可以下载开发版或测试版（英文网页）GoogleChrome浏览器。）在GoogleChrome浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：·点击位于浏览器用户界面右上角的“页面”下拉菜单，然后选择“开发人员”→“开发人员工具”。·右键点击网页上

4、的任一元素，在弹出菜单中选择“审查元素”。·在Windows或Linux操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入JavaScript控制台）。文案大全实用标准文档·在Mac上，使用Command+Option+I快捷键打开开发人员工具（或使用Command+Option+J直接进入JavaScript控制台）。现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着8个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不

5、同的信息，如DOM树、资源占用情况、页面相关的脚本等。通过Ctrl+[和Ctrl+]键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。 工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换JavaScript控制台状态，以及其它一些功能。当然您也可以使用Esc键来更快地切换JavaScript控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。 接下来的单元，让我们一起来一一分解这些图标所对应面板具有的强大功能

6、吧！元素（Elements）面板在元素（Elements）面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以Google简体中文首页为例，鼠标右键单击“Google搜索”按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠”图标将其变为内嵌模式）：文案大全实用标准文档 在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素

7、的style属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。文案大全实用标准文档 拖动工具窗口最右侧的滚动条，在展开的Styles模块下方还有Metrics、Properties、EventListeners几大模块。Metrics模块以图形方式展示出左侧面板中选中元素

8、的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。文案大全实用标准文档 向上拖动工具窗口中部的滚动条，找到“图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开EventListeners中