Chrome Dev Tools

较早接触前端的人可能最开始使用的都是Firebug调试工具，不过后来由于Chrome的强势逆袭以及移动端开发的兴起，大部分开发者开始转战使用Chrome自带的开发者工具(F12或Ctrl+Shift+I)，本文接下来就会介绍一些你平常开发中也许没有注意到的关于Chrome Dev Tools的奇技淫巧。

刚才说了通过Ctrl+Shift+I可以打开开发者工具，但是你知道吗？在开发者工具中继续按Ctrl+Shift+I还可以继续打开开发者工具的开发者工具，所以实际上这个开发者工具也是通过Web来构建的。

DevTools能给我们带来什么

通过开发者工具可以检查、调试以及优化你的应用程序，让你的程序运行地更加顺畅，如果你可以很好地使用它，甚至可以把开发者工具变成一个所见即所得的编辑器，同时，作为一个优秀的前端工程师，娴熟地使用开发者工具必定会为你的工作提供一臂之力。

说了这么多，我们究竟能用开发者工具做什么呢？下面分别按照开发者工具的几个面板一一介绍大家平常不怎么注意到的一些诀窍。