系列
Chrome开发者工具教程
Chrome开发者工具简介
2020-02-01大约6分钟
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)
打开之后,就可以看到这个界面: