1.Google开发者工具正确打开方式
(1)自定义控制工具按钮 | 更多工具 | 开发者工具
(2)页面右击菜单,点击“审查元素”
(3)Ctrl + Shift + I
(4)F12
2.Google Chrome提供了8大组工具:
(1)Elements
允许我们从浏览器的角度看页面,也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外,还可以编辑这些内容更改页面显示效果
(2)Network
可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间,当然也能看到哪些资源不能成功加载。此外,还可以查看HTTP的请求头,返回内容等
(3)Sources
用于查看和调试当前页面所加载的脚本的源文件,例如,调试js
(4)Timeline
提供了加载页面时花费时间的完整分析,所有事件,从下载资源到处理Javascript,计算CSS样式等花费的时间都展示在Timeline中
(5)Profiles
分析web应用或者页面的执行时间以及内存使用情况
(6)Resources:
对本地缓存(IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage)中的数据进行确认及编辑
(7)Audits
分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案
(8)Console
显示各种警告与错误信息,并且提供了shell用来和文档、开发者工具交互
强大的Chrome开发者工具提供了很棒的提示功能,当我们把鼠标悬停在某些项时,会显示一些很有用的提示信息,有时候我们可以得到意想不到的收获。此外,开发者工具还提供了Emulation功能,做移动开发时特别有用。下面先详细研究一下8大工具的使用方法。
3.Elements工具使用
Elemments的界面如下:
区域1是整个页面的DOM结构,我们可以在该区域中用鼠标任选一个DOM节点
区域2是右面的右键菜单,可以正对每一个DOM节点进行一些操作
区域3是当前鼠标选中的DOM节点在整个页面DOM的位置,如上图html->body->div.box->p->a
区域4是当前鼠标选中的DOM节点的一些CSS属性、排版以及其他属性等等
4.Network工具的使用
NetWork的界面如下:
区域1是一些启停、过滤等控制按钮
区域2是页面整体加载时间的概要展示,横坐标为时间轴(与区域2中的Timeline是呼应的),纵坐标为对应区域3中的各种资源。
区域3是页面展示过程中,所有资源的请求请求情况(包括HTTP method、资源的MIME类型、资源的大小以及浏览器器获取资源的花费的时间等等),每一行都对应一个HTTP请求的过程。我们可以通过区域1中的过滤按钮来过滤某些类型的资源,同时,当点击任一一行时,右面板会展示该次HTTP请求和相应的详细信息。一个小tip,当点击Timeline中花花绿绿的时间横柱,可以显示出本资源各个阶段消耗的时间(包括DNS查询时间、request请求时间以及资源内容下载消耗的时间等等)
5.Sources工具的使用
>>to be continued
6.Timeline工具的使用
学习资料参见:http://www.cnblogs.com/constantince/p/4585983.html
7.Profiles工具的使用
>>to be continued
8.Resources工具的使用
>>to be continued
8.Audits工具的使用
>>to be continued
9.Console工具的使用
>>to be continued
10.关于Google Chrome浏览器小tips
(1)当打开开发者模式后,长按浏览器地址栏的“刷新”按钮,即可出来三个比较常用的操作:
(3)开启运行时错误自动暂停功能,准确定位出错脚本位置
在 Chrome开发者工具中,可以开户运行时错误自动暂停这一功能,从而使开发者工具能在发现运行时脚本异常时,在异常脚本处暂停运行,跳转至调试页面,供开发人员进一步查找该运行时异常产生的原因。
开启方法:打开Sources面板,点击右边的调试面板上的Pause on exceptions按钮,然后勾选下方的Pauseon Caught Exceptions复选框。
(4)在js脚本中使用console.debug或console.log语句打印调试信息
console打印出来的内容可以在Console面板中查看。
(5)为javascript脚本设置断点
在Sources面板中,打开自己的脚本文件,然后在需要调试的代码位置设置断点。
(6)在开发者工具直接修改javascript脚本用于调试
Chrome开发者工具提供的一种非常实用的功能,即使开发人员可直接对开发者工具的 Source标签页中的代码进行修改,并将其保存,使浏览器在下次执行该段脚本时,直接加载最新修改的版本。目前的 Firebug 及 IE自带的开发者工具都不支持对脚本的直接修改,导致在 Firefox 或 IE中调试脚本时,如果需要对代码进行修改,需要先去修改脚本源文件,再同步至应用服务器,再清理浏览器缓存,最终再次打开应用程序时,才会看到代码修改后的效果。可见Chrome 开发者工具提供的这一功能,大大提供了开发者调试脚本的效果。
需要注意的是,由于这种修改是保存在浏览器缓存中,因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时,需要将其复制到脚本的源文件中。
(7)在 DOM 元素上设置断点
如果需要监听某个DOM 被修改情况,而不关心是哪行代码做的修改(也可能有多处都会对其做修改)。那么我们可以直接在 DOM 上设置断点,例如,当页面元素的属性变化时,暂停下来用来调试。使用方法加下图,有三种类型:a)子节点修改; b)自身属性修改; c)自身节点被删除。
(8)格式化javascript代码
在Sources面板中打开Javascript代码,然后在左下角的{}按钮,即可以将杂乱无章的代码进行格式化。
(9)javascript代码的调试方法
javascript的调试有暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。