相干篇章

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面板看到执行打印进去的日志。