#

相关

web devtool 历史

Chrome相关介绍

Chromium

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

国产的所有 “双核浏览器”,都是基于 Chromium 开发的,甚至 Chrome 也是基于它。

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

Chromium 的内核版本比 Chrome 明显领先,新的技术都是先在 Chromium 上应用。

几乎每天都在进行更新;

Chrome

基于 Chromium,但是它是闭源的!
所以有这样的一种说法:谷歌把核心技术都保留在了之家的 Chrome 中。

支持了一些商业的收费插件,这些是不会出现在开源软件中的: H.264编码、mp3编码

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

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

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

Dev Canary Stable Beta

是Chrome的四个版本

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

新版发布速度递增
新功能数量递增
稳定性递减

Chrome Devtools 界面概览

000devtoolsAll.png

Tips and Tricks

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

Elements 面板

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS

Elements 面板

Inspect Mode

快捷键 ctrl shift c/点击面板左上角的按钮,进入元素选择模式
inspect

在新版本 chrome 中,选择元素时会显示更多元素信息
inspect

Device Mode 设备模式

deviceMode

DOM 树

在元素面板左侧是当前页的 DOM 树
0

在 DOM 树中可以:

Styles

在面板右侧 Styles 窗格中:

0

color picker

Computed

在 Styles 右侧的 Computed 窗格中可以查看:

0

Event Listeners

0

在源代码中加 行 debugger 断点,或者debug(函数)断点(Sources 面板会提及这两种断点),是需要代码维护成本的,有时候还会忘记删除;

或者你想调试别人开发的 你不拥有源码的 网页;

这些时候可以利用 Event Listeners 窗格快速定位当前元素被绑定的所有的事件函数代码并调试。

DOM Breakpoints

在面板右侧 DOM Breakpoints 中,可以查看元素断点

0

相应的在左侧 DOM 树右键点击元素,可以给元素添加断点

元素断点有三种类型:属性变更,子树变更,节点删除

例如添加“node removal”断点,就会在 有代码移除当前节点时,在当前行代码执行前暂停执行,并自动转换到 Sources 面板,以便做进一步调试
0

Console 面板

Console 面板是浏览器的控制台,也是 Devtools 的灵魂。

可以通过设置->Show Console drawer或者Esc 快捷键让 Console 在每个面板都能显示。
0

message

0

javascript 实时执行环境

选择执行环境

可以通过左上的下拉列表,选择不同的执行环境

0

top 是最外层的顶级页面,其他的是 iframe 子页面

console 中的$符号:

console 下的方法:

1
2
3
queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组

Sources 源文件面板

在 Sources 面板你可以:

七种断点类型

  1. 行断点:代码运行到当前行之前暂停执行

    1
    2
    3
    在源代码添加debugger关键字
    或者
    点击Sources面板中的源代码的行号
  2. 条件行断点:当满足条件时才会触发该断点

    1
    2
    右击Sources面板中的源代码的行号
    选择“Add conditional breakpoint”

    0

  3. DOM 断点

    1
    2
    3
    4
    即Elements面板提及过的三种DOM断点:
    - 节点属性断点
    - 节点删除断点
    - 子树变更断点

    0

  4. XHR/Fetch 断点

    1
    在页面发出XHR或Fetch请求前加断点

    0

  5. Event Listener 事件监听断点

    1
    可以在所有类型的事件函数被出发前加断点

    0

  6. Exception 异常断点

    0

  7. Function 函数断点

    1
    把想调试的函数名作为参数,调用debug()函数,可以在每次执行该函数前暂停执行代码

    0

Debug

0

0

0

0

0

0

Workspace:Devtools as IDE 将更改持久化

Network 面板

network.png

筛选请求

瀑布图

分析请求/请求列表

network2.png

networkOrder.png

initiator.png

Color Code:瀑布图中的几种颜色与代码

colorCode.png

DOMContentLoaded 和 load 事件

Performance 性能面板

performance.png

RAIL 模型

控制区

FPS 图表 - Frames Per Seconds

CPU 图表

SCREENSHOTS

HEAP

Frames

Main

性能相关扩展