Chrome 开发工具使用

介绍 

   Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现非常优秀。对于html+css+javascript前台技术的学习或者开发，浏览器developer tool的使用时必不可少的，也能极大的提高学习或者开发效率。本文根据版本 34.0.1847.116 m。在window下，开启developer tool的快捷键为F12。（2014年4.29日整理—Laily）

1 developer tool结构

Developer tool的功能栏有8个，分别是

Elements（标签）：用来调试网页的HTML源码和CSS代码。

Network（网络）：查看网页的HTTP通信情况。

Sources（源码）：调试JavaScript代码。

Timeline（时间抽）：查看各种网页行为随时间变化的情况。

Profiles（性能）：查看网页的性能情况，比如CPU和内存消耗。

Resources（资源）：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。

Audits（监察）：提供网页优化的建议。

Console（控制台）：用来运行JavaScript命令。

整理自：

http://www.cnblogs.com/wukenaihe/archive/2013/01/27/javascript%E8%B0%83%E8%AF%95.html

http://blog.sina.com.cn/s/blog_6e637ea701017glv.html

http://javascript.ruanyifeng.com/tool/console.html

2 Element（元素）

Element控制面板能够让你查看所有的DOM tree中的内容，可以根据html内容找到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。由javascript代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。

Element控制面板

2.2 选元素找标签 

   如上图所示，我选中<div id=”fm”>标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的层次关系。

选元素找标签功能

2.3 临时修改内容

我们也可以对里面的内容进行临时性修改，可以直接在某个元素上双击修改元素的属性，或者你点右键选“Edit as Html”直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。如刚才找到的百度一下标签中的value改成“调试一下”后马上在页面中相应显示。


临时修改内容

2.4 元素监听

你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

2.5 css修改

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦

2.6 标签注册事件查看

如果你想知道“百度一下”这个按钮注册了哪些功能，或者鼠标点击时执行了哪个javascript函数，就可以通过这个功能实现了。

3 网络控制面板

网络控制面板在两个方面还是非常还用的，一个是发现图片（css、js等）加载不了，可以通过network查看它请求的位置。第二个，是调试ajax时，可以查看它的请求和获取。如百度输入框中，输入关键字后会自动显示热门内容，这显然是一个ajax的使用。

 注：要是点击进去没有内容就刷新一下。

网络加载显示

文件加载失败

查看http请求和获得的内容

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

4 源码控制面板（js调试）

Javascript的调试，基本上是通过源码控制面板和命令行配合进行的。

4.1 Beautiful javascript

网上的js一般是压缩过的，阅读压缩过的javascript肯定是不是人能进行的，更别说添加断点了。在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。

调整之前

调整之后

4.2 代码出错定位

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

«strong>html xmlns="http://www.w3.org/1999/xhtml">

«strong>head>

«strong>title>javascript add</title>

«strong>script type=“text/javascript”>

<strong>var</strong> <strong>div</strong>=<strong>document</strong>.getElementByd("a");

function calSum(){

<strong>var</strong> <strong>a</strong>=parseInt(<strong>document</strong>.getElementById("num1").<strong>value</strong>);

<strong>var</strong> <strong>b</strong>=parseInt(<strong>document</strong>.getElementById("num2").<strong>value</strong>);

<strong>document</strong>.getElementById("num3").<strong>value</strong>=(<strong>a</strong>+<strong>b</strong>);

}

</script>

</head>

«strong>body>

<<strong>input</strong> <strong>type</strong>="text" <strong>id</strong>="num1"/>add<<strong>input</strong> <strong>type</strong>="text" <strong>id</strong>="num2"/>

<<strong>input</strong> <strong>type</strong>="button" <strong>id</strong>="btnCal" <strong>onclick</strong>="calum()" <strong>value</strong>="equal"/><<strong>input</strong> <strong>type</strong>="text" <strong>id</strong>="num3"/>

</body>

</html>

上面的代码中，getElementByd(“a”)部分显然是错误的，在IDE中有些错误是检查不出来的（特别是跟浏览器有关的部分）。加载该页面后，可以在控制台看到报错信息，然后直接定位至出错点。

Javascript错误位置定位

4.3 添加断点及单步

4.3.1 断点中断

可以通过单击左侧添加断点，并在右侧显示。也可以通过watch expression添加查看的变量。

我们添加了一个断点，如果在页面上的操作执行到断点处，就会在断点处终止。然后，我们可以通过右侧最上面的按钮调试，与VS等IDE的调试非常相近。Call stack是显示函数的调用栈，在调试大规模的javascript程序是非常有用。

单步调试

4.3.2 页面中断调试

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件。

4.4 其他 

 以下是老版本chrome的界面，某些细节可能不一样，但是大体是类似的。

5.Timeline 面板（当前 Chrome 版本为 45.0.2454.99 m (64-bit)）

Timeline 工具栏提供了对于在装载你的 Web 应用的过程中，时间花费情况的概览，这些应用包括处理 DOM 事件, 页面布局渲染或者向屏幕绘制元素。Timeline 可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。

强烈建议在浏览器隐身模式下使用这个工具，并且禁用一切无关的插件，因为这些插件会影响测试的结果

5.1 使用

在面板的最左侧有一个记录按钮，点击该按钮之后 Timeline 开始工作，之后刷新页面，然后再次点击该按钮使之停止记录信息并开始分析结果。分析完之后会出现如下信息。

6 Profiles标签页 

   这个控制面板允许我们查看函数运行时CPU占有率，还有内存占有率。这能够帮助我们优化代码，查看代码性能（内存还能查看闭包泄露等）。

按start可以分析，现在的内存占有率。进行操作后，再得到第二份内存分析报告，这样我们就能通过内存变化来进行分析了。在底栏，还有对比、总结等选项。

7.resource（资源） 

 Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这两个不是熟悉，不多说，具体还是请参考官方文档吧。

8.Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

9.Console（控制台）

命令行对于我们有一个非常有用的地方，对于javascript提供的API或者API的功能不是非常熟悉。这个时候命令行就成为我们试验最好的地方。如，我们想查看document下面有哪些函数，我们就可以在命令行中输入，然后选中并尝试。对于jquery等开源框架的学习，这种方式也非常高效，学代码还是得跑起来才行。

   我们可以在命令行里面直接改变内存中的内容，对于小函数我就可以用这样的方式直接替换。

   我们按enter是对输入的内容运行，如果要换行需要按shift+enter。在这里面，我们直接在命令行里面里面讲calSum函数覆盖掉，a+b换成了a*b。运行结果如下所示。

这个除了查看错误信息、打印调试信息（console.log（））、写一些测试脚本以外，还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性，我可以直接在Console中输入“console”并执行：

怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：

9.1 console对象

console对象代表浏览器的JavaScript控制台。虽然它还不是标准，但是各大浏览器都原生支持，已经成为事实上的标准。

console对象主要有两个作用：

  • 显示网页代码运行时的错误信息。

  • 提供了一个命令行接口，用来与网页代码互动。

console对象的接口有很多方法，可供开发者调用。

9.1.1 console.log方法

log方法用于在console窗口显示信息。

如果参数是普通字符串，log方法将字符串内容显示在console窗口。

console.log(“Hello World”)// Hello World

console.log(“a”,“b”,“c”)// a b c

如果参数是格式字符串（使用了格式占位符），log方法将占位符替换以后的内容，显示在console窗口。

console.log(” %s + %s = %s", 1, 1, 2)// 1 + 1 = 2

上面代码的%s表示字符串的占位符，其他占位符还有

  • %d, %i 整数

  • %f 浮点数

  • %o 对象的链接

  • %c CSS格式字符串

log方法的两种参数格式，可以结合在一起使用。

console.log(" %s + %s “, 1, 1, “= 2”)// 1 + 1 = 2

9.1.2 其他输出方法：debug，info，warn，error方法

除了log，console对象还有四个输出信息的方法：

  • debug：等同于log。

  • info：等同于log。

  • warn：输出信息时，在最前面加一个黄色三角，表示警告。

  • error：输出信息时，在最前面加一个红色的叉，表示出错。

这四个方法的用法与log完全一样。

console.error(“Error: %s (%i)”, “Server is not responding”,500)// Error: Server is not responding (500)console.warn(‘Warning! Too few nodes (%d)’, document.childNodes.length)// Warning! Too few nodes (1)

9.1.3 console.table方法

对于某些复合类型的数据，console.table方法可以将其转为表格显示。

var languages = [ { name: “JavaScript”, fileExtension: “.js” }, { name: “TypeScript”, fileExtension: “.ts” }, { name: “CoffeeScript”, fileExtension: “.coffee” }];console.table(languages);

上面代码的language，转为表格显示如下。

复合型数据转为表格显示的条件是，必须拥有主键。对于上面的数组来说，主键就是数字键。对于对象来说，主键就是它的最外层键。

var languages = { csharp: { name: “C#”, paradigm: “object-oriented” }, fsharp: { name: “F#”, paradigm: “functional” }};console.table(languages);

上面代码的language，转为表格显示如下。

9.1.4 console.assert方法

assert方法用来验证某个条件是否为真。如果为假，则显示一条事先指定的错误信息。它的格式如下。

console.assert(条件判断，输出信息)

使用方法如下。

console.assert(true === false,“判断条件不成立”)// Assertion failed: 判断条件不成立

下面是另一个例子，判断子节点的个数是否大于等于500。

console.assert(list.childNodes.length < 500, “节点个数大于等于500”)

9.1.5 time和timeEnd方法

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time(“Array initialize”);var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i–) { array[i] = new Object();};console.timeEnd(“Array initialize”);// Array initialize: 1914.481ms

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。

9.1.6 分组方法：group和groupend

这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。

9.1.7 其他方法

  • console.dir：输出对象的信息，用于显示一个对象的所有属性。

  • console.clear：对console窗口进行清屏，光标回到第一行。

  • console.trace：当前执行的代码在堆栈中的调用路径。

9.2 命令行API

在控制台中，除了使用console对象，还可以使用一些控制台自带的命令行方法。

（1）$_

$_属性返回上一个表达式的值。

2+2// 4

$_// 4

（2）$0 - $4

控制台保存了最近5个在Elements面板选中的DOM元素，$0代表倒数第一个，$1代表倒数第二个，以此类推直到$4。

（3）$(selector)

$(selector)返回一个数组，包括特定的CSS选择器匹配的所有DOM元素。该方法实际上是document.querySelectorAll方法的别名。

var images = $(‘img’);for (each in images) { console.log(images[each].src);}

上面代码打印出网页中所有img元素的src属性。

（4）$x(path)

$x(path)方法返回一个数组，包含匹配特定XPath表达式的所有DOM元素。

$x(”//p[a]")

上面代码返回所有包含a元素的p元素。

（5）inspect(object)

inspect(object)方法打开相关面板，并选中相应的元素：DOM元素在Elements面板中显示，JavaScript对象在Profiles中显示。

（6）getEventListeners(object)

getEventListeners(object)方法返回一个对象，该对象的成员为登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。

（7）keys(object)，values(object)

keys(object)方法返回一个数组，包含特定对象的所有键名。

values(object)方法返回一个数组，包含特定对象的所有键值。

var o = {‘p1’:‘a’, ‘p2’:‘b’};keys(o)// [“p1”, “p2”]values(o)// [“a”, “b”]

（8）monitorEvents(object[, events]) ，unmonitorEvents(object[, events])

monitorEvents(object[, events])方法监听特定对象上发生的特定事件。当这种情况发生时，会返回一个Event对象，包含该事件的相关信息。unmonitorEvents方法用于停止监听。

monitorEvents(window, “resize”);monitorEvents(window, [“resize”, “scroll”])

上面代码分别表示单个事件和多个事件的监听方法。

monitorEvents($0, “mouse”);unmonitorEvents($0, “mousemove”);

上面代码表示如何停止监听。

monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。

  • mouse：“mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”

  • key：“keydown”, “keyup”, “keypress”, “textInput”

  • touch：“touchstart”, “touchmove”, “touchend”, “touchcancel”

  • control：“resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

monitorEvents($("#msg"), “key”);

上面代码表示监听所有key大类的事件。

（9）profile([name])，profileEnd()

profile方法用于启动一个特定名称的CPU性能测试，profileEnd方法用于结束该性能测试。

profile(“My profile”)profileEnd(“My profile”)

（10）其他方法

命令行API还提供以下方法。

  • clear()方法清除控制台的历史。

  • copy(object)方法复制特定DOM元素到剪贴板。

  • dir(object)方法显示特定对象的所有属性，是console.dir方法的别名。

  • dirxml(object)方法显示特定对象的XML形式，是console.dirxml方法的别名。

9.3 debugger语句

debugger语句必须与除错工具配合使用，如果没有除错工具，debugger语句不会产生任何结果。

在chrome浏览器中，当代码运行到debugger指定的行时，就会暂停运行，自动打开console界面。它的作用类似于设置断点。

for(var i = 0;i<5;i++){ console.log(i); if (i===2) debugger;}

上面代码打印出0，1，2以后，就会暂停，自动打开console窗口，等待进一步处理。

9.4 移动端开发

9.4.1 模拟手机视口（viewport）

chrome浏览器的开发者工具，提供一个选项，可以模拟手机屏幕的显示效果。

老版本（估计以chrome 32为分界）：打开“设置”的Overrides面板，选择相应的User Agent和Device Metrics选项。

较新的版本：在,进入开发者工具之后，直接按下Esc快捷键或者下图的按钮，可以看到第三个选项卡Emulation,（有的版本为override）

.

User Agent可以使得当前浏览器发出手机浏览器的Agent字符串，Device Metrics则使得当前浏览器的视口变为手机的视口大小。这两个选项可以独立选择，不一定同时选中。

9.4.2 模拟touch事件

我们可以在PC端模拟JavaScript的touch事件。

首先，打开chrome浏览器的开发者工具，选择“设置”中的Overrides面板，勾选“Enable touch events”选项。

然后，鼠标就会触发touchstart、touchmove和touchend事件。（此时，鼠标本身的事件依然有效。）

至于多点触摸，必须要有支持这个功能的设备才能模拟，具体可以参考Multi-touch web development。

9.4.3 模拟经纬度

chrome浏览器的开发者工具，还可以模拟当前的经纬度数据。打开Sensors，选中Override Geolocation选项，并填入相应经度和纬度数据。

参考链接