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

Posted 2021-03-30 自律神仙ScarSu

本文结构

    - 本文相关

    - 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 -

   其他文章   

   我的博客   

www.scarsu.com

“效率是第一生产力”

点个“在看”鼓励我吧