文档章节

Google Chrome浏览器开发人员工具

张悟空
 张悟空
发布于 2014/08/20 13:56
字数 1976
阅读 91
收藏 0

准备工作

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

l  点击位于浏览器用户界面右上角的页面下拉菜单

l  右键点击网页上的任一元素,在弹出菜单中选择审查元素

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

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

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

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

1.   元素(Elements)面板

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

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

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

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

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

2.   资源(Resources)面板

在资源面板中,可以查看到请求的资源情况,包括CSSJS图片内容,同时还可以查看到存储相关的如CookiesHTML5DatabaseLocalStore等,你可以对存储的内容编辑和删除。

3.   网络(NetWork)面板

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

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

4.   脚本(Scripts)面板

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

①     单步调试,不进入函数体内部
② 单步调试,进入函数体内部
③ 跳出当前函数

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

5.   时间轴(Timeline)面板

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

6.   剖析(Profiles)面板

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

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

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

7.   审计(Audits)面板

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

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

8.   JavaScript 控制台(Console

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

© 著作权归作者所有

张悟空

张悟空

粉丝 8
博文 71
码字总数 20588
作品 0
郑州
程序员
私信 提问
chrome开发人员工具使用链接整理

GoogleChrome 开发人员工具详解:http://wenku.baidu.com/link?url=v-bAUCddu3t9I14LQVQtRhNDoohge2lsTLl3QDjiMoLQl4CJ629xfqnLwoYyDsWLWDkUyEmllRwY-oUEtwDN-ZlTTSjOdvpKaxwUoJmp6y Google......

智能小松鼠
2015/03/19
132
0
7 月出炉的 Chrome 68 将把所有 HTTP 网站列为不安全

为了使网络更加安全,让更多的互联网用户使用其 Chrome 浏览器,Google 宣布,未来的 Chrome 版本将把所有的 HTTP 网站标记为“不安全(non-secure)”。 该搜索巨头在 Chromium 博客上发表声...

周其
2018/02/10
3.3K
9
Google Chrome即将获得默认的密码检查功能

谷歌今年早些时候发布了针对Chrome桌面的密码检查扩展程序。此扩展程序允许用户检查他们的密码是否已在在线泄露中受到损害。这是一个非常实用的小工具,以至于连开发人员都觉得这是必备功能。...

稿源:
08/19
0
0
对Web设计和开发人员有用的15个Chrome插件

最近我才把谷歌浏览器设为默认浏览器,而与此同时我开始将它用 于我的兼职Web设计和开发项目中。由于我所依赖Firebug的插件,在Chrome浏览器并没有完全的对应插件,所以我还是时不时要用Fir...

jobBole
2011/02/18
1K
2
页面审核工具 Chrome Lighthouse 简介

作者:Bolaji Ayodeji 翻译:疯狂的技术宅 原文:www.freecodecamp.org/news/introd… 未经允许严禁转载 Chrome Lighthouse 已经存在了一段时间了,但如果我要求你解释一下它能做什么,你能解...

前端先锋
06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

The server time zone value 'EDT' is unrecognized or represents more than one time zone.

2019-10-14 18:07:43.714 ERROR 74363 --- [Druid-ConnectionPool-Create-1855026648] com.alibaba.druid.pool.DruidDataSource : create connection SQLException, url: jdbc:mysql://10.30......

yizhichao
29分钟前
8
0
html加载顺序以及影响页面二次渲染额的因素

本文转载于:专业的前端网站➱html加载顺序以及影响页面二次渲染额的因素 浏览器请求发往服务器以后,返回HTML页面,页面内容开始渲染,具体的执行顺序为: 1. 浏览器开始载入html代码,发现<...

前端老手
32分钟前
7
0
BeginnersBook JSP、JSTL、Servlet 教程

来源:ApacheCN BeginnersBook 翻译项目 译者:飞龙 协议:CC BY-NC-SA 4.0 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 请您勇敢地去翻译和改进翻译。虽然我们追求卓越,但我们并...

ApacheCN_飞龙
44分钟前
5
0
Handler和内部类的正确用法

PS:本文摘抄自《Android高级进阶》,仅供学习使用   Android代码中涉及线程间通信的地方经常会使用Handler,典型的代码结构如下。 1 2 3 4 5 6 7 8 9 public class HandlerActivity exten...

shzwork
44分钟前
7
0
centos 7 安装mysql5.6rpm格式

centos 7 安装mysql5.6rpm格式 1查看是否安装了mysql rpm -qa|grep -i mysql 如果安装了请卸载:rpm -e --nodeps MySQL... 2、没有安装则进行如下操作 下载mysql rpm tar包 https://dev.mysq...

Archer99
45分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部