Chrome开发者工具使用经验

浏览器就是前端开发者的ide。作为一个前端开发者，浏览器devtool是很有必要熟悉起来的。

说到这里，我不由得想起了两年前第一次看到当时带我入门前端的老大熟练地用浏览器来调节css。感觉就像是开了一扇新天地的大门，原来我们常常使用的浏览器竟然还有这些隐秘的功能。

不知不觉两年过去，自己实实在在地使用浏览器调试工具中获益非浅。网上关于浏览器工具的使用有很多文章，这里我也来做一些总结，算是自己的一些经验之谈。毕竟工具是死的，要如何的灵活运用，才可以发挥它最大的威力。而这就需要一个经验积累的过程。

Elements面板



左边可以看到dom结构。这个dom结构，不是网页源代码中的结构。而可能是经过你的js处理之后的结构。比如你用js添加了一些东西在页面上。也是可以在这里看到的。也就是说你在这里看到的结构，并不是你右键查看源代码所看到的结构。
选中dom节点，可以右键选择编辑。包括内容。dom节点。也可以删除。也支持ctrl+z恢复操作。
同时也可以为dom节点添加断点。当dom节点发生变化 的时候，代码会停在修改这个dom节点的js代码的位置。
也可以看到dom节点上边绑定了哪些事件。
右边是样式。用鼠标选中某个节点，就可以在右边看到它所有的样式。包括内联样式以及引入的样式。
单独为其写的样式和继承过来的样式。
会按照优先级从高到低排列。
所以我们可以看到下面的很多样式都被划上了删除横线。多半是因为优先级低样式被覆盖。
另外样式前面有很多选择框，把前面的√点掉，这个样式就失效了。
如果后面有优先级稍低的其他样式，它就会跟上来作用到节点上。
然后是computed.
这里的样式是计算过的样式。
可以看到它的盒模型图。
也可以看到它所有的样式。点开可以看到具体是哪一个样式最终产生作用。

Console面板
主要是用来做一些自定义的输出以及一些报错信息。
也有很多公司在控制台输出招聘信息，，比如百度。
这里先不细写。功能比较基础。
cosole面板的作用域。　
一般情况下是全局作用域，断点时是断点运行中的那个方法体的作用域。
如果element面板里点到一个iframe中去，这个时候作用域可能是这个iframe中，使用document.get....可以找到iframe中的dom。

Sources面板
可以看到页面用到的各种资源，包括js。css。图片等等。以及它们分别是来自哪个域名。
可以给js代码设置断点。
右边可以看到当前设置的断点情况。以及作用域中的参数的值和调用栈。



格式化代码。点左下的括号，可以把代码用格式化后的代码显示出来，方便阅读。包括压缩过的代码。
调用栈。Call Stack
可以看到一个函数是在哪里调用的。

博主这样常常需要去看其他同事写的代码的，你知道它一定会调用了某个方法，但是你不知道是哪里调用的，就可以给它打个断点。然后观察它的调用栈。很容易就理清了某个功能的实现脉络。

断点停下来的时候。在console控制台可以console出当前位置的活动环境的作用域中的值，比如可以看到当前函数的活动环境下的this的值。
可以很方便的看到某个功能模块对象中的各个值是否跟设想的一样。从而发现问题，纠正自己的思路，一步步地完善代码。

在断点调试的过程中，如果你的js是写在单独的文件中。就可以直接修改代码，然后ctrl+s保存，再运行的时候就可以运行你修改后的代码。
这样可以直接在浏览器中边修改边调试。效率能提高不少。

在js代码中写 debugger;会自动断点到该位置。



Network面板
这是很重要的一个面板。
可以看到页面所有的网络请求的情况。包括请求时间，资源大小，类型，状态码等等。
同时点开单个资源，可以看到该资源的http头信息。资源请求类型，form提交内容，服务器返回的结果等等。
特别是调试ajax的时候，可以很直观地看到自己传到服务器的数据和服务器返回的数据结构。
勾选上面的 disabled cache。会禁用缓存，再刷新该页面的时候，所有资源都会重新从服务器获取。如果修改了js、css或图片资源 后刷新页面，勾上这个，就不会受缓存影响了。
勾选上preserve log。 意思是刷新或跳转页面时不清空前面的页面的log信息。对于一些我们执行完某种操作就跳转页面的情况，我们勾上这个就能看到上一个页面最后的操作，比如一个ajax请求的具体情况。上传的参数对不对，返回的结果正常不正常等等。
那个漏斗形状的按钮，点开就会出现过滤栏。可以对下面列表中的信息进行一些过滤。 包括文件名，文件类型等的过滤。
让我们更快地找到我们要观察的请求。
另一个很常用的功能，鼠标移动到initator那一列，可查看请求是哪个地方发送的，哪个js，哪个方法。



时间匆忙，先写到这里。后面再补充。本文不定期更新。
转载请注明出处：http://blog.csdn.net/liusaint1992/article/details/52891841