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

2020-10-22 10:11:01 浏览数 (1)

本文结构

- 本文相关

- 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，天天更新）图标采用了特别的土豪金版神奇宝贝球。

新版发布速度递增

新功能数量递增

稳定性递减

代码语言：javascript复制

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：全部面板
  • 无痕模式打开网页 —> 更纯净的调试环境，无扩展代码干扰
  • 实验性功能：
代码语言：javascript复制
    打开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 -

https 网络安全 官方文档 开源

0 人点赞