Chrome开发者工具简介

Chrome开发者工具(Chrome DevTools)是一项Web前端开发的利器，简单的有分析DOM元素、分析网络请求，复杂的如debug页面代码，分析页面性能等等，是一个前端开发必用的工具。

由于官方的链接是英文的，并且也打不开，所以这个教程将对这个工具做一下简单的使用说明。

本教程从实用角度出发，主要介绍的是程序员们经常用到的功能。开发者工具非常强大，细节功能也非常多，由于不想做成一个工具书版事无巨细的教程，所以如果有些内容文章内没有涵盖，可以进一步通过Bing来查如何使用。

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具，开发者可以用这个工具来重演，调试和分析网站。

这个工具既不神秘，也不需要安装，只要你已经安装过了Chrome(谷歌浏览器），你就可以开始尝试这个工具。

打开方式很简单，下面任何一种方式都是可以的：

• 按键盘“F12 ”功能键
• 网页任何位置右键选择“检查(N) ”
• Chrome右上角菜单 -> 更多工具(L) ->开发者工具(D)
• 快捷键：Ctr+Shift+I ** (Windows)，或者Cmd+Opt+I** (Mac)

打开之后，就可以看到这个界面：