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

 

本文结构

    - 本文相关

    - Web Devtool历史

    - 按Chrome相关介绍

    - Devtools 界面概览

    - 几个重要面板简介

    - 使用Devtools的几个小技巧

本文共计:1415字1图

预计阅读时间:2min40s

本文相关

  • 全系列文章可以点击上方的《Devtools老师傅养成系列》专辑

  • 本文基于 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 -

   其他文章   

  【自律】书籍推荐《4点起床》舒适而高效的作息方式

  【认知分享】行为决策学入门书籍推荐《别做正常的傻瓜》

【认知分享】如何高效舒适的成长——《刻意学习》读书输出

【认知分享】为什么马云能成功而你不能

【效率工具】 Notion为什么能让我放弃手账

【认知分享】无痛提升英语的方法

【学习方法】如何学习源码 | 如何高效学习一个新知识

   我的博客   

www.scarsu.com

“效率是第一生产力”

点个“在看”鼓励我吧????

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值