Devtools 老师傅养成[1] - Chrome Devtools介绍

本文结构

- 本文相关

- Web Devtool历史

- 按Chrome相关介绍

- Devtools 界面概览

- 几个重要面板简介

- 使用Devtools的几个小技巧

本文共计：1415字1图

预计阅读时间：2min40s

本文相关

本文基于 chrome 浏览器版本 73.0.3683.103（正式版本）总结
本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍
参考 1：google developers 官方文档[2]
参考 2：来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]
参考 3：来自作者 Tomek Sułkowski 在 medium 的系列文章[4]
Devtools脑图.png[5]

web devtool 历史

view-source + alert 调试法：所有浏览器至今都支持的原生方法，查看网页源码和alert API。
Live DOM Viewer[6]：能将HTML源码生成DOM树形结构视图。
Firebug[7]：2006年诞生，2007年被Firefox开源，当时只有单一的console面板，带有AJAX日志；于2017停用，Firefox的调试工具转为全新的Devtools。

Chrome相关介绍

Chromium

是谷歌的开源项目，由开源社区维护。

国产的所有 “双核浏览器”，都是基于 Chromium 开发的，当然 Chrome 也是基于它。

我们下载的 Chromium 浏览器都是其源码未经修改的直接编译版本。

Chromium 的内核版本比 Chrome 明显领先，新的技术都是先在 Chromium 上应用。几乎每天都在进行更新;

Chrome

基于 Chromium，但是它是闭源的。

所以有这样的一种说法：谷歌把核心技术都保留在了之家的 Chrome 中。

Chrome 内置了 Flash，Chromium 需要额外安装。

据说?在网页渲染方面 Chrome 也悄悄有一些特别的优化。

集成了更多的谷歌服务（RanBinNuan），同时也有更多的限制，比如目前使用 Chrome 需要一定手段才能安装非商店的扩展，一旦被发现还会永远禁用，但 Chromium 就没有这些限制

Dev Canary Stable Beta

是Chrome的四个版本：

Stable 稳定版（几月一次更新）
Beta 测试版（1 月一次更新）
Dev 开发者版（1 星期一次更新）
Canary 金丝雀版（脚步几乎同步 Chromium，天天更新）图标采用了特别的土豪金版神奇宝贝球。

新版发布速度递增

新功能数量递增

稳定性递减

Chrome Devtools 界面概览

F12打开的界面

几个重要面板简介

Elements面板：实时检查和编辑页面的HTML & CSS。
Console面板：浏览器的控制台，各种输出信息，REPL环境。
Sources面板：网页的源文件，Debug调试器，IDE，文件变更与覆盖调试。
Network面板：检查网页的所有网络请求。
Performance面板：给网页做运行时性能分析。
Memory面板：监控网页的内存和内存泄漏情况。

Tips and Tricks

快捷键：ctrl shift p：执行命令
快捷键：ctrl p：打开文件
快捷键：esc：显示/隐藏 drawer(第二行面板
快捷键：ctrl shift c：选择元素
more -> focus debugee：切换至正在被调试的页面
more -> more tools：全部面板
无痕模式打开网页 —> 更纯净的调试环境，无扩展代码干扰
实验性功能：

    打开url     chrome://flags/
    搜索dev
    打开Experimental Extension APIs开关
    在settings中找到experiments可以找到相关实验性功能
    shift按七次，显示隐藏的实验性功能（比如terminal

参考资料

[1]

Devtools Sample: https://masteringdevtools.com/

[2]

google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/

[3]

Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2

[4]

系列文章: https://medium.com/@tomsu

[5]

Devtools脑图.png: https://i.loli.net/2019/04/19/5cb95639a9f73.png

[6]

Live DOM Viewer: https://software.hixie.ch/utilities/js/live-dom-viewer/

[7]

Firebug: https://getfirebug.com/

- END -