简单复习各个面板

Elements

浏览 DOM 树，浏览样式。

Console

一个 REPL。

小技巧：在任何非 Console 面板中，按 ESC 可以调出一个小的 Console 窗口，方便开发者 Debug。

Sources

类似一个文本编辑器。右边有一个 Debugger，我们可以用它来 Debug，可以做比 console.log 更复杂的事。

Network

显示请求瀑布流。

Performance

我们可以 Record 一些操作，然后在这个面板中查看一些信息。

Memory

查看页面的内存占用具体情况，可以定位内存泄漏原因。

Application

显示各种浏览器储存情况，比如 local storage，Session Storage，cookie。查看网站储存了用户的哪些信息。

Security

查看安全证书，连接是否安全。

Audits

网站性能的总结，整合了 google 自家的 Lighthouse 功能。基于平均水平的网络速度和设备性能作出的评估。

深入各个面板

编辑 Editing

元素和样式

我们可以点击 Elements 面板中的 HTML 文本，做更改，也可以点击 CSS 属性，做更改。

在 Elements 面板，按住 option 点击展开一个元素节点的箭头会展开当前节点下的所有子节点。

在 Elements 面板，我们长按一个节点可以移动该节点在 DOM 树中的位置。

右键一个 DOM 节点，选择 Scroll into view，可以迅速找到页面中节点的位置。

选择一个 DOM 节点，按“H”隐藏这个节点，调整的是 visibility 属性。如果 visibilty 在 CSS 中被标记了!important 则不能被隐藏。按“delete”删除这个节点，ctrl+ z 撤销删除。

在 Style 面板中，我们按住 Shift 点击一个颜色块，我们可以更改颜色的表达格式，在 HEX，RGB，HSL 间切换。

在 Style 面板中，我们可以左键点击一个颜色块，调出调色板。这个调色板有一个最大的好处就是里面总是保存了 Material Design 的配色, 方便了开发者选择颜色。

在 DOM 树中选择一个节点，在右边样式面板中点击:hov，可以选择强制触发各种鼠标事件，方便开发者检查触发事件时的 CSS 属性。

元素节点

有的时候我们会发现一个元素节点有好几个 CSS 选择器，比如浏览器有默认样式，你自己写了一个样式，你又用了一个 CSS 库比如 Bootstrap 加了另一个样式。我们可以点击 Computed 面板，来检查最后有用的样式是哪些。

在 Event Listeners 面板中，我们可以观察该节点的所有事件。如果我们点击旁边的 JS 文件名，会跳转到 Source 面板展示事件处理函数的实现代码。

当 Source 面板中的代码格式是被压缩过的时候，我们点击左下角的大括号 {}“Pretty Print”按钮，可以美化代码样式。

DOM 断点。右键点击一个元素节点，选择 Break On。我们有三种 Debug 的选择，为什么这个节点被删除 (node removal)，为什么这个节点的某种属性发生了变化 (attribute modification)，或者为什么这个节点的子节点发生了变化 (subtree modification)。当代码触发断点的时候，Sources 面板会自动打开，展示引发节点变化的具体代码。

更改本地文件

在 Sources 面板中，选择 Filesystem 面板，我们可以打开本地的 workspace。然后我们再前往 Elements 面板中调试 CSS 样式，会发现一些 CSS 文件图标被标上了绿色原点，这就表示现在我们在 Devtool 做的调试，本地的文件也会被更改，Sass 也有用，但是使用 webpack 的项目不一定支持这个功能。

但是在 Elements 面板左边的 DOM 树中做更改，不会改变本地的 HTML 文件。因为 DOM 树只是浏览器根据我们写的 HTML 生成的，并没有直接更改 HTML 文件的能力。如果我们想要更改 HTML 和 JS 文件，我们可以在 Sources 面板中做到，就像使用文本编辑器一样。

选择元素历史

在 Elements 面板中左键点击选择一个节点，然后进入 Console 面板，输入:

$0

就会返回刚才最近选择的一个节点。以此类推，$1 会返回第二近选择的一个节点。

说到 $ 符号，Console 里也可以使用类似 Jquery 的 $ 选择器, 输入 $, 按回车，就会返回 Jquery 选择器函数。

调试 Debug

小技巧：在开发者工具的任意面板按 ctrl+shift+P，我们可以打开一个命令行，里面有很多常用 Dev Tool 操作。方便开发者少用鼠标。而在 Sources 面板中 ctrl+ P 是打开具体文件。

断点

在 Sources 面板中打开一个 JS 文件，我们可以在代码中加入

debugger;

来打断点。我们还可以直接点击代码行数来打断点，行数会变蓝。当代码运行到断点的时候，我们会在调试操作面板中看到“Paused on breakpoint“的提示。 注意断点是在改行代码执行前断而不是之后。

除了常见的 Step over, Step into 功能按钮，我们还有一些其他面板。

• Watch 我们可以在 Watch 中添加任何变量。可以观察该变量在当前断点的作用域中是 defined 还是 undefined。
• Call Stack 顾名思义，观察这个断点发生之前，被调用过的函数。
• Scope 观察当前作用域中我们所有可以调用的变量。如果知道要具体看哪个变量还是用 Watch 比较方便。
• Breakpoints 告诉我们目前可用的断点。我们可以取消打勾来取消断点。
• XHR/fetch Breakpoint 加入自定义请求断点，在特定 URL 请求发生的时候打断。然后可以在 Call Stack 面板中找到涉及到这个请求的代码文件。

Blackbox 功能

当我们使用很多库的时候，比如 React，d3.js。如果我们在调试面板中看到了一些文件名属于第三方库，我们可以右键点击然后 Blackbox 它。意思是我们不需要看到第三方库的代码运行过程。在开发者工具的 setting 中，我们可以设置永久 Blackbox 名单。

条件性断点

当一个函数被经常调用，但是只在特定情况下出错的时候。我们可以使用条件性断点。比如我们只想要在 ajax 函数被传入特定参数的时候才打断，而不是所有 ajax call 都打断让我们看。我们可以右键点击一个行数，选择 Conditional Breakpoint 然后我们可以输入参数条件。这种断点，行数会变成黄色。

官方文档
Chrome Developer Tool