相干篇章

Chrome Devtools: Elements 篇

概述

Sources 面板用于资源检索、代码逻辑调试。

演示前置

示例

• ElementUI 官网

其余篇章有的是以掘金为示例演示的，而掘金是服务端渲染（SSR），资源压缩，不易演示。

环境

• Chrome 浏览器
• 版本 90.0.4430.93

操作释义

• 聚焦控制台
• 鼠标在控制台范畴内点击一下，使后续操作上下文绑定在控制台中。

关上控制台

以 ElementUI 官网为示例讲述：

通过链接关上页面，通过 F12 或鼠标右键【查看】关上开发者工具控制台。

默认布局

1. 资源管理器面板

   • 该面板下又细分不同的面板，默认展现的是 Page 面板
   • Page 面板默认以域名分类，列出站点依赖的所有资源

2. 代码编辑面板

   • 在资源管理器面板中选中一个文件后，该文件的内容展现在该面板

3. 代码 Debugger 面板

   • 操作断点
   • 查看断点上下文

Sources 面板

该面板下的性能紧紧依赖着资源管理面板、代码编辑面板、调试面板。

只不过细分到上层面板治理不同的资源：

• Page 面板

  • 治理近程站点资源

• Filesystem 面板

  • 将 Sources 面板当 IDE（代码编辑器），治理本地站点资源

• Snippets 面板

  • 治理浏览器长久化代码资源

咱们以 Page 面板为主体讲述，其它小面板（Filesystem、Snippets）一带而过。

Page 面板

面板布局 1：资源管理器

默认布局的 1 地位即 Page 面板的全部内容，该面板列出了以后站点页面执行的所有资源，咱们能够通过该面板获取以下站点信息：

• 技术栈：

  • 能够从资源的要害代码查看

• 相干资源：

  • 从资源列表中一眼能看出页面加载的资源类型
  • 以后页面执行的自定义脚本，比方 Snippets 面板下定义的 …

• 依赖域：

  • 从资源分类上，依赖资源所在域高深莫测

• 浏览器扩大程序

  • 以后页面加载的浏览器扩大程序

  • 为了洁净的调试环境，排除扩大程序的烦扰，所以，个别选用无痕模式调试

    • 前提：没有开启扩大程序无痕模式下可用

面板布局 2：代码编辑面板

在 Page 面板中点击任意资源，即可在默认布局 2 的编辑面板中看到资源详情。

上图点击了图片资源，能够看到该图片是一张二维码。

上图点击了 CSS 资源，在默认布局 2 地位的编辑面板中，能够点击左下角的 {} 按钮，进行代码丑化 —— 依据以后 CSS 资源的大小，丑化所须要的工夫不同。

若资源太大，浏览器可能会因为 CPU 占用过高卡死。

这里咱们做了一个试验，检索到顶部菜单的选择器，进行款式更新，能够实时地在页面上看到展现成果，甚至不须要保留。

然而，在这里批改的代码只是保留在内存中，刷新页面代码就还原了。

JS 资源调试

这里，咱们将 Javascript 资源独自讲述，因为在 Devtools 中 JS 资源调试的复杂度较高。

调试 JS 的场景

• 在编写代码过程中，查看未知参数的构造；
• 在编写、Bug 修复过程中，运行后果与逻辑设计不符时，代码逻辑梳理；

调试 JS 的步骤

以修复 Bug 为例：

1. 找出 Bug 复现的法则
2. 相熟代码的前提下，由法则登程，推断 Bug 复现的范畴
3. 在不同的范畴打（条件）断点
4. Step by Step 的调试断点
5. 依据调试的后果，一直的放大 Bug 范畴
6. 放大至找到确定的问题
7. 针对找到的问题，提出解决方案
8. 评估解决方案，抉择适合的计划修复

Note：针对网络申请，断点工夫过长会造成申请超时。

断点 vs. 日志

说到调试代码，罕用的形式有两种：断点、日志；

示例

在代码编辑面板中，只有针对 Javascript 的断点能力拦挡执行胜利，而针对 DOM 的断点，须要在 Elements 面板增加：DOM 的操作，详情参见 Elements 篇。

下述以 Chrome 浏览器提供的官网调试代码为例：

关上控制台，从 Panel 面板中能够看到以后页面只有两个资源：HTML 页面及相干的 JavaScript。
其它的是我装置的 Chrome 扩大（没有应用无痕模式）。

从 get-started.html 中咱们能够看到相干的 HTML 构造、Style 款式 及引入的JavaScript 代码。

页面逻辑

输出 Number1、Number2，点击按钮取得计算结果。

冀望后果

计算获取 Number1、Number2 两个数字的和：1 + 1 = 2

理论后果

获取到 Number1、Number2 字符串的拼接：1 + 1 = 11

复现率

100%，阐明是逻辑谬误，而不是代码逻辑对某种边界没有笼罩的概率问题。

代码锁定 Bug 范畴（嫌疑犯）

function updateLabel() {var addend1 = getNumber1();
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + '+' + addend2 + '=' + sum;
}

由代码 label.textContent = addend1 + '+' + addend2 + '=' + sum; 及 1 + 1 = 11 的显示后果猜想，addend1、addend2看似没有问题，而 sum 看似有问题，那咱们就在 sum 计算的中央打断点。

断点调试

在资源管理器中点击 html 引入的 Javascript 文件，找到相干代码，在 行号 地位点击一下，即增加断点，再次点击同一行号，勾销断点。

点击按钮，触发函数调用 ，此时，咱们能够看到 以后执行上下文 中的所有信息，如 addend1、addend2 的值，偷偷的执行 F9（Step），能够看到sum 的后果。

诊断

从以后执行上下文能够看到 addend1、addend2 的值是字符串类型，而字符串做加法就是字符串的拼接，所以，后果没问题！！！

是的，运算后果没问题，那为什么不是咱们冀望的后果呢？

因为咱们冀望的是数字类型相加！！！

测试

聚焦控制台，通过 ESC 按键能够在 以后面板 开启 / 暗藏 Console 面板，在控制台的最下方。

借助断点将作用域限度在函数 updateLabel 内，通过 Console 面板验证本人的猜测，此时，Console 面板能够拜访函数 updateLabel 的变量。

解决方案

那咱们只有将 addend1、addend2 的值转换为数字即可。

计划有很多种：

• parseInt()
• parseFloat()
• Number()
• 1 * '1'
  …

这里，我间接在代码编辑器面板中改变了 getNumber1、getNumber2 的办法，另其返回数字类型的数据。

保留当前，点击按钮，能够看到冀望的后果。

通过右上角按钮，切换断点的激活状态，激活是深蓝色，勾销激活是有透明度的蓝色。
勾销激活状态下，断点不会拦挡代码的执行。

在勾销激活的状态下，能够尝试输出不同的值，检测逻辑的正确性。

简略的调试示例到此结束。

CSS、JavaScript 调试比照

断点分类

上述调试 Javascript 的前提是要相熟代码，比拟实用于在本人编写的程序中调试。

若遇到其它的场景，如第三方库调试，则须要依据相应的场景，抉择适合的断点组合应用。

代码行断点

通过问题复现能揣测出 明确的调试代码范畴 时应用。

在代码编辑面板的行号上右键或者间接点击该行号，即可增加代码行断点。

代码行条件断点

在有中介兼顾调配解决逻辑或条件分支时应用，排除其它逻辑的烦扰，聚焦关注点。

由上图可知，在代码编辑面板的行号上右键，抉择 Add Conditional Breakpoint…，即可增加代码行条件断点。

增加条件断点时，如果条件为 true 时，拦挡代码执行，条件为 false 时，不会拦挡。

在输入框至多有一个为空时，断点无效，输入框全不为空时，断点有效。

代码行日志断点

无需侵入源代码，实现非侵入式的日志打印

如上图，输出的格局是 console.log 函数的参数模式。

如上图，能够显式地应用 console 对象的其它办法打印日志

DOM 断点

详情参见 Elements 篇

XHR 断点

顺手找个申请，增加到 XHR 断点，重载页面，在申请 send 的时候，会拦挡代码逻辑，能够查看相干的申请参数。

事件监听断点 Event Listener Breakpoints

若对代码不相熟或在大长篇代码逻辑中，只是晓得点击触发业务解决逻辑时，能够思考事件监听器断点。

然而，在简单的事件委托中，是一个噩梦。
Note：无痕模式下应用，浏览器扩大程序会产生烦扰。

谬误断点

开启谬误断点，默认会拦挡未解决的谬误逻辑。

若抉择Pause on caught exceptions，则捕捉的谬误逻辑也会被拦挡。

黑盒（Ignore list）

黑盒（旧版叫黑盒，新版浏览器改名为疏忽列表）是一小性能，独自拉进去讲是因为不适宜和其它分类合并。

应用该性能能够聚焦关注点，排除 非核心或可信赖代码 的烦扰。

因为示例是一个很简略地例子，这里借助 Event Listener Breakpoints 讲述该性能地应用。

在 Click 事件上增加断点，点击 Add Number1 and Number2 按钮，会在函数 onClick 地首行进行执行拦挡，OK！

重载页面，在代码编辑面板关上可信赖的代码，右键增加 Add script to ignore list，再次点击Add Number1 and Number2 按钮，会发现代码逻辑齐全执行完结，没有拦挡。

上述场景比照，咱们能够意识到，黑盒帮忙咱们聚焦相干逻辑代码，跳过一些可信赖（认为不会呈现 Bug）的库，如：jQuery？在一步步调试时，不会进入 jQuery 库调试，聚焦咱们本人的逻辑。

代码覆盖率

能够帮忙咱们查找有效（Never）代码。

通过代码编辑面板右下角的Coverage，咱们能够查看代码的覆盖率。

如上图，页面初始化执行时，代码未覆盖率为 41.9%，即有 41.9% 的代码在页面初始化时未执行。

点击 Add Number1 and Number2 按钮，执行了输出校验相干的代码逻辑，代码未覆盖率为 17.3%，即仍有 17.3% 的代码未执行。

输出输出，点击 Add Number1 and Number2 按钮，执行了计算相干的代码逻辑，代码未覆盖率为 0%，即代码逻辑全副执行。

某种程度上能够帮忙咱们查找 Never 有效代码。

面板布局 3：调试面板

单步执行

在调试代码的过程中，咱们须要控制代码的执行：

如上图，增加三个断点，追加一个日志。

触发事件，点击Resume script execution，会复原代码的执行，直至遇到下一个断点。

若在拦挡时，长按 Resume script execution，抉择下拉按钮的 第一项，会跳过后续的断点，将代码执行残缺，能够看到日志执行了一次。

若在拦挡时，长按 Resume script execution，抉择下拉按钮的 第二项，会在拦挡处强制进行后续代码执行，能够看到后续逻辑中的日志没有执行。

重载页面，使页面复原到 初始状态。

调试面板最上排的工具管制断点拦挡时代码的执行，Resume按钮复原代码的执行，直至遇到下一个断点。

若断点所在代码行的表达式是一个函数，step over按钮会 跳过 函数的外部执行，如图第 15 行（15L），下一步间接执行到了 16L。

若断点所在代码行的表达式是一个函数，step into按钮会 深刻 函数的外部执行，如图第 15 行（15L），下一步进入了函数外部，执行到了 22L。

执行到了 22L 后，若不想再调试该函数 inputsAreEmpty，能够通过step out 跳出函数的执行，如下图，下一步间接跳出以后函数的执行，执行到 16L。

思考：

• 若在 22L，点击了 Step into 按钮，下一步会执行到哪？
• 若在 22L，点击了 Step through 按钮，下一步会执行到哪？

最初看一下 step 按钮，step按钮是实名的老实人，遇山爬山，遇海潜海，逻辑中的每一步都会走到，遇见函数就会深刻函数代码执行每一步。

若逻辑中一个函数都没有，step over、step into、step out、step的行为和 step 保持一致。

禁用（Deactivate）、停用（disable）断点

看下图，别离执行了禁用、停用，看明确了么？

上图，退出了两种类型的断点，第一次失常执行，三个断点都会执行的到。

第二次禁用了断点，点击Add Number1 and Number2，代码执行结束，断点都没有拦挡。

第三次激活断点（还原禁用），停用了断点，点击Add Number1 and Number2，代码拦挡在了 Click 事件处理逻辑的首行，后续断点并没有拦挡。

迷糊了？

综述：
停用是有作用域的，停用的只是代码行断点，其它类型的断点并没有停用。而禁用是全副类型的断点都不会触发。

监听

重载页面，移除所有的断点。

能够减少表达式在 Watch 中，监听执行各工夫点的值。

函数调用 的监听会影响代码逻辑的执行，如上图中的 inputsAreEmpty()作为 Watch 表达式，Watch 在须要更新展现的时候（机会：代码执行到表达式所在所用域），Chrome 会主动调用该函数来获取函数最新返回值。

如果在 inputsAreEmpty() 的函数逻辑中增加断点，就会有限循环。

• 在 inputsAreEmpty() 代码行处增加代码行断点，函数领会执行三次

  • 第一次，达到作用域时的初始值
  • 第二次inputsAreEmpty() 自身执行
  • 第三次 inputsAreEmpty()执行后，更新 Watch 表达式的值
  • 因为inputsAreEmpty() 函数体内无断点，更新 Watch 表达式后，再也没有其它机会更新表达式

• 在 inputsAreEmpty()函数体内增加代码行断点，函数体有限执行

  • 第一次 inputsAreEmpty()在执行作用域初始化
  • 第二次执行inputsAreEmpty()
  • 第三次执行 inputsAreEmpty() 后，更新 Watch
  • 第四次更新 Watch 执行inputsAreEmpty()
  • 第五次执行 inputsAreEmpty() 后，更新 Watch
  • 第六次 …

所以，不举荐在 Watch 表达式中增加函数调用。

作用域

在拦挡代码执行时，咱们能够在调试面板的 Scope 章节看到 以后作用域Local 的变量，如上图中的 this。

继续执行代码到 return 语句，能够在以后作用域 Local 看到返回值 Return Value

双击作用域中的值，能够扭转以后的值。

Global 作用域能够看到全局作用域的变量、办法。

默认状态下，Console 面板只能拜访到全局的变量、函数，而在断点拦挡时，Console 面板能够拜访到以后作用域下的办法、变量。

调用栈

调用栈 Call Stack，能够看到以后执行函数的起源，帮忙咱们溯源。

在以后执行函数上右键，点击 restart frame，能够让以后函数的逻辑从新执行，在大块代码段调试中应用较为便当，仅限于断点执行到的函数，曾经走过的函数有效。

Filesytem 面板

浏览器即代码编辑器

如上图，在本地启动服务关上某动态页面，在 Sources 面板下的 Filesystem 面板增加动态我的项目到 workspaces。

通过 Elements 面板定位锚点到某 DOM 节点，在 Styles 面板间接调试款式，重载页面后，该款式仍旧无效。

通过查看款式源码，能够发现 Styles 面板中调试的款式曾经保留到磁盘笼罩原有的款式。

实用场景

• 动态页面的 CSS、JavaScript

  • 上图咱们能够看到 Filesystem 中的一些文件的文件名有绿色小点

    • 绿点表明浏览器关上的该文件曾经与本地磁盘建设连贯
    • 在浏览器调试批改文件能够间接映射到本地磁盘

• 动态页面的 HTML 通过 Elements 面板右键 eidt HTML 无奈保留磁盘

  • Elements 面板映射的是 DOM Tree
  • DOM Tree 的产生受 HTML、CSS（content 款式属性）、JavaScript 动静解决的影响，所以，浏览器无奈将 DOM Tree 的扭转映射到对应的地位

【举荐】在构造、展示、动效（HTML、CSS、JavaScript）拆散的动态页面我的项目中疾速调试应用。

有效场景

• 应用构建工具打包的我的项目

  • 即便应用 sourceMap，简单的文件映射关系使得浏览器和本地磁盘建设单薄的连贯
  • 连贯不牢靠

Snippets 面板

Snippets 面板为咱们提供跨标签、跨域名的 Javascript 测试性功能。

上图附了一段检测浏览器类型的 Javascript 脚本，Ctrl + S 保留后，能够关上其它页签，在 Snippets 面板中依然能看到该脚本。

点击右下角的执行按钮或通过快捷键 Ctrl + Enter 执行这段脚本，能够在下方的 Control 面板看到执行打印进去的日志。