chrome developer tools小技巧

chrome developer tools小技巧

最喜欢用的浏览器是chrome浏览器，没有之一。不仅仅因为简洁、轻巧、速度快，更是因为其内置的强大的F12 developer tools开发者工具。

技巧1:Elements面板

1）这个是最基本的，如果想查看页面的元素，直接点击鼠标右键，inspect elements（审查元素），chrome就会自动呼出developer tools面板中的第一个标签Elements，同时会定位到所选择的DOM元素节点（如图1），这样我们就可以点击右键编辑DOM节点的内容。

2）除了Elements面板左侧匹配的DOM节点，右侧的Style面板也很有用，其中element.style表示DOM元素的行内（inline）样式，现在不推荐使用行内样式，提倡写到CSS中，所以大部分情况是空的；下面的Matched CSS Rules是写在CSS文件中的并且匹配当前DOM节点元素的CSS样式，用删除线划掉的是和当前元素相关但是被后来的样式覆盖的；再往下灰色背景的区域不是我们自己写的样式，而是浏览器自带的，叫做user agent stylesheet；

3）有一点需要注意：鼠标的active、hover等属性是默认看不到的，需要点击Toggle Element Style显示或隐藏。

4）Metrics

用来查看块元素的结构。如margin和padding的区别等。

 

 

 

技巧2：Source面板

1）Local modifications

最惊艳的一个技巧是修改了本地文件，developer tools会自动进行版本控制，方便查看和比较我们做过的修改。

2）debugger

单步执行、跨函数执行，step into这些功能都有。

 

3）Pretty print

代码格式化功能，把压缩成1行的js和css文件格式化，更美观，易于调试。

 

技巧3：强大的console控制台

1）接受firebug的命令行API

http://getfirebug.com/wiki/index.php/Command_Line_API

如常用的$0,表示当前选中的元素。

2）使用console记录日志

console.log()

console.warn()

console.info()

console.error()

 

技巧4：resource面板

包含了与当前页面相关的几乎所有资源，包括document、js、css、image等，还包括比较新潮的html5的local strage等。

 

技巧5：network面板

1）记录了所有http request

2）还可以查看每个request的报文头和内容等。

 

完。