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 解析错误等。
相关推荐
Google Chrome 浏览器开发人员工具不仅仅能帮助您诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题,还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。
谷歌Chrome浏览器是由Google开发的一款网页浏览器,它于2008年9月发布第一个公开测试版,2010年12月正式发布。以下是Chrome浏览器的一些特点和功能: 特点 快速:Chrome浏览器采用了V8引擎,能够快速执行JavaScript...
Chrome浏览器是Google官方发布了Chrome Beta的Android版浏览器,适用于4.0及以上的rom。 Chrome浏览器特点: * 加快页面载入,滚动和缩放速度 * 具备强大的Omnibox即时搜寻引擎 * 支援桌面版浏览器书签同时功能 ...
Google Chrome49.0开发工具浏览器,分享给大家,开发交流
很是好用的Google浏览器Chrome,工作人员开发工具,可以测试页面元素,页面响应速度,页面错误,相比于Firebug也不逊色,支持使用。
Google chrome 自带着非常好的网页代码的查看工具,可以看html,css,和js. 这个文档详细介绍了这个工具的用法,网页开发人员的号助手!!
Chrome浏览器插件Json浏览与编辑神器---JSON-handler...
下载离线安装包,再点击Chrome浏览器地址栏右侧的设置主菜单->接着选择关于Google Chrome选项->然后浏览器会自动升级到最新版。 由Google开发的一款可让您更快速、轻松且安全地使用网络的浏览器,它的设计超级简洁,...
内容概述:ChromeDriver.exe是一款实用的chrome浏览器驱动工具,能够用于自动化测试、网络爬虫和操作浏览器,其主要作用是模拟浏览器操作,在使用时需要与对应的chrome浏览器版本匹配,否则无法驱动。 应用场景:...
·Chrome浏览器基于开源的Webkit,其中包含谷歌Gears。 ·Chrome提供了浏览器扩展框架,可以制作与Adobe-AIR类似的混合应用。 ·包含V8 Javascript虚拟机,这个多线程的虚拟机可以加速Javascript的执行。 ·...
探索 Google 工具 显示“Google 隐私”图标的 Chrome 浏览器窗口。安全至上掌控您的网上安全Chrome 一直致力于保护您的在线数据和隐私。凭借易用的隐私控制设置,Chrome 可让您按照自己的喜好自定义相关设置和浏览...
chrome 浏览器 网页SIP WEBRTC 开发 呼叫中心需要的工具 开发网页软电话 必备
ChromeDriver 是一个用于自动化控制和操作 Google Chrome 浏览器的工具。它是 WebDriver 协议的实现之一,提供了与 Chrome 浏览器进行交互的接口,使得开发人员可以通过编程方式控制浏览器的行为。 基本介绍: 1、...
探索 Google 工具 显示“Google 隐私”图标的 Chrome 浏览器窗口。安全至上掌控您的网上安全Chrome 一直致力于保护您的在线数据和隐私。凭借易用的隐私控制设置,Chrome 可让您按照自己的喜好自定义相关设置和浏览...
文章中演示的完整工具(带源码,可二次开发。) 地址:https://blog.csdn.net/qq_39190622/article/details/129474795 该工具主要利用 UIAutomation 【本地辅助(自动化)功能】,监控机器中当前浏览器的域名并跳转...
Free Download Manager 插件是一款免费好用的非常好用的多功能下载管理工具,适用于 Chrome 浏览器,该插件支持使网页和软件联动,当用户在网页上进行下载时将直接转到 Free Download Manager 之中。下载 Free ...
使用该插件后,用户的 IE 将获得和Chrome浏览器一样的高性能和丰富的功能,例如高速的Javascript引擎、支持HTML5、CSS3等新特性…… 用 IE 的壳,装上 Chrome 的芯 Chrome Frame 插件实际上就是可以让用户的浏览器...
目前谷歌Chrome浏览器Windows 版的最新版本是:6.0.447.0 dev 目前发现过往版本5.0.371.0 Dev与微点主动防御发生冲突 [编辑本段]宣布 官方的正式宣布预定在2008年9月3日举行,并将寄给记者和部落客一则解说新...
Google Inc Google Chrome是由Google开发的一款设计简单 高效的Web浏览工具 原版 正式版 右键 属性 验证 数字签名完整 下载Chrome企业和教育版 MSI封装 Download Chrome Deploy the browser across your ...
Chrome浏览器插件-FeHelper(前端助手),程序员web开发助手,包含多种方便快捷的小工具,非常好用。