前端必须知道的开发调试知识|字节青训营笔记

拿奖去喝AD钙
225 阅读10分钟

👀 这是我参与「第四届青训营 」笔记创作活动的的第3天！

e48eef20bd9a9728d00fae682e4b7ada0cacc1e3a8fd1c435.png

👀一、Bug与Debug

  • Bug在我们码农的世界里，bug是在电脑系统或程序代码中隐藏着的一些未被发现的缺陷或问题，可以简称为程序缺陷。从广义上看，还包括软件需要改进的细节、或与需求文档存在差异的功能实现等等。

  • Debug是计算机排除故障的意思。用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用Debug模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。

👀前端Debug的特点：

1.多平台

2.多环境

3.多功能

4.多技巧

👀二、调试工具的使用方法

2.1 Chrome DevTools 的使用

Chrome 开发者工具 (Chrome DevTools) 是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。以下是Chrome DevTools的详细讲解。

Chrome DevTools 官方文档

深入理解 Chrome DevTools

下面为大家详细介绍其中的几个功能面板

Element： 用于查看和编辑DOM节点和节点相对应的CSS样式。

Console： 用于打印运行时抛出的信息，我们可以通过它查看异常信息或主动抛出信息进行调试。

Sources： 用于查看资源信息，我们编写和运行的代码都可以在这里找到。我们可以通过在这里设置断点来达到调试的目的。

Network： 用于查看请求信息，这里可以看到所有的页面资源请求，包括网络请求、图片资源、HTML、CSS、JS等。可以根据需求筛选请求项，一般多用于网络请求的查看和分析。

Performance： 用于查看页面加载的性能情况，包括页面渲染时间、JS执行时间等。

Application： 用于查看 cookie、localStorage 等信息。

2.1.1 Elements元素面板

Elements，它主要针对页面元素样式的调试，可以观察到元素在页面中具体所在位置以及被影响的样式列表，事件绑定，DON断点等一系列功能。并且可以在页面中直接修改样式元素和内容，页面是可以直接根据修改的内容作出及时的反应的。

我们可以使用Element面板来查看源代码，它不但可以很好的格式化DOM节点，清晰的展现HTML文档，还可以查看JavaScript创建的DOM节点和iframe中的DOM节点，比在当前网页中右击鼠标选择“查看网页源代码”强大很多。

打开方式：你可以直接按F12打开开发者工具，但是这样不能直接进入到你想查看页面的某一个样式，所以我们可以选择把鼠标放到你想要查看元素的位置，然后点击鼠标右键，点击检查，这样elements就会自动定位到你鼠标所选择的元素位置。

image.png

开启 Elements 面板时，标记的元素后方总会有个 == $0

image.png

选中一个元素后再到 Console 面板输入$0，会发现刚刚选中的元素出现在 Console 中,如果再多点几个元素，还可以用$1、$2、等来拿到你每次选到的元素。

image.png

在Console 中选中元素按下右键，选择 Reveal in Elements Panel 可以跳到该元素在 Elements 面板中的位置，对 Elements 面板的元素按下右键则有 Scroll to view 可以把视野滚到能看见元素的地方。

想要在 Console 面板中用 JavaScript 操作元素时，$0就非常方便，另外也可以搭配 console.dir($0) 来观察元素的各个属性，如果在 Console 直接输入 $0 或是 console.log($0) 只会显示元素自身。

image.png

2.1.1.1 点击 .cls开启动态修改元素的class

image.png

2.1.1.2 输入字符串可以动态的给元素添加类名

image.png

image.png

2.1.1.3 勾选/取消类名可以动态的查看类名生效效果

image.png

image.png

2.1.1.4 点击具体的样式值(字号，颜色，宽度，高度等)可以进行编辑，浏览器内容区域实时预览

image.png

image.png

2.1.1.5 computed下点击样式里的箭头可以跳转到styles面板中的css规则

点击computed，然后点击样式里面的箭头(这个箭头只有你css中有的样式才会有箭头)就会跳转到styles面板中的css规则。

image.png

注意:可以使用以下两种方法强制激活伪类\color{FF0000}{注意:可以使用以下两种方法强制激活伪类}

  • 选中具有伪类的元素，点击 :hov

image.png

  • DOM树右键菜单，选择Force State

image.png

【小技巧】使用键盘方向键改变数值

查看div节点的样式，如上图所示，选中 width 的值，按下键盘方向键（<- 和 ->）数值会跟着改变，页面上div节点的样式也立刻改变。实际开发中，会经常使用该方法来微调元素的外边距、内补白和大小等，非常方便。

【小技巧】颜色拾取器

查看div节点的样式，如上图所示，选中 color 后边的小图标，会弹出颜色拾取器，能够很方便的改变背景颜色，如下图所示：

image.png

2.1.2 Console控制台面板

Console是一个JavaScript解释器的内置对象, 用于访问调试控制台, 在不同的浏览器里效果可能不同。 我们最常用的console.log就是Console对象的一个静态方法, 它的作用是将内容输出到控制台上。 现在, 我们来深入了解一下Console都提供了什么功能.

👀console.log(object[, object, …])

console.log用来在控制台上输出信息, 所需的参数是需要输出的对象, 输出的对象会以空格分隔开。 如果第一个参数使用了字符串替换模式, 则之后的参数将作为替换字符串, 这类似于printf占位符格式化输出. console可用的字符串模式请参照下表.

模式类型
%s字符串
%d, %i整型数值
%f浮点数值
%o对象超链接
%c格式化样式

除了console.log这一个方法，console对象还有很多方法。

image.png

最常见的如下：

console方法功能
console.warn功能与console.debug类似, 输出会伴随一个”警告”图标.
console.error功能与console.debug类似, 输出会伴随一个”错误”图标, 在Webkit下的效果与未捕捉到异常类似.
console.debug功能与console.log类似, 输出将会包含对象超链接, 多数情况下与console.log输出的效果一致.
console.info功能与console.debug类似, 输出会伴随一个”信息”图标, 在Firefox中有效果.
console.table具体的展示JSON和数组数据以表格形式输出数据.
console.dir通过类似文件树的方式展示对象的属性

示例

console.table() 可用于打印 obj/arr 成表格

image.png

2.1.3 Sources源代码资源面板

Sources面板可以查看浏览器页面中的源文件（html/js/img/css等），点击面板下方的{}大括号可以将代码转成可读格式，同时可给js文件添加上断点。Sources下的Snippets可以添加文件片段，可在浏览器中运行

image.png

1.区域一: 页面资源文件目录树

2.区域二: 代码预览区域

3.区域三: Debug工具栏，从左至右依次为：

  • 暂停（继续）
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活（关闭）所有断点
  • 代码执行异常处自动

4.区域四: 断点调试器

Breakpoints

debugger 语句

  • 使用关键字debugger 或代码预览区域的行号可以设置断点

  • 执行到断点处时代码暂停执行

  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

  • 暂停状态下，鼠标hover变量可以查看变量的值

  • 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

image.png

使用较多的断点方式

  • 普通断点：在想断住的那一行左侧单击一下就可以添加一个断点，运行到该处就会断住。

  • 条件断点：右键单击代码所在的行左侧，会出现一个下拉框，可以添加一个条件断点。输入条件表达式，当运行到这一行代码并且表达式的值为真时就会断住。

  • DOM 断点：在 Chrome Devtools 的 Elements 面板的对应元素上右键，选择 break on，可以添加一个 dom 断点，也就是当子树有变动、属性有变动、节点移除这三种情况的时候会断住。可以用来调试导致 dom 变化的代码

  • Event Listeners 打断点：在 Chrome Devtools 的 Elements 面板上找到你想排查的 dom 节点，右侧面板 Event Listeners 中会有当前阶节点，可以当前节点打断点调试。

Scope与Call Stack

image.png

  • 展开Scope可以查看作用域列表(包含闭包)
  • 展开Call Stack 可以查看当前javaScript代码的调用栈

闭包可以参考

关于调用栈可以参考

2.1.4 Network网络面板

如果想知道一个网页调用了那些接口，其实可以借助浏览器开发工具来查看。

1）打开自己项目的网站，点击F12，可以看到上面有个NetWork选项，这个功能主要使用来查看网络请求的内容。

image.png

2）请求一下数据，（可以在左上角方框里过滤一下（filter））

image.png

同时，还可以查看响应的内容，还有cookie信息等

image.png

重点：Network网络面板各区域的作用

image.png

  • 区域一: 控制面板
  • 区域二: 过滤面板
  • 区域三: 概览面板
  • 区域四: Request Table面板
  • 区域五: 总结面板
  • 区域六: 请求详情面板

2.1.5 Application应用面板

Application（应用）面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据以及页面用到的图片、字体、脚本、样式等信息。

image.png

Application面板展示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • indexedDB
  • Web SQL
  • Cookie

image.png

点我了解更多Application应用面板

2.1.6 Performance性能面板

在 Chrome 中，我们打开 Chrome 调试面板，进入 performance 界面。如下所示.

image.png

我们点击重新录制，就会出现：

image.png

我们一起来看看有哪些部分：

image.png

第一部分：控制面板

第二部分：重要参数，这一部分我们称之为 Overview 窗格，我们可以看到 FPS， CPU， NET在页面加载时候的变化。

FPS：每秒帧数，绿色竖线越高， FPS 越高，我们应该关注红色部分，这说明我们的页面很可能出现卡顿现象，另外 60 是一个比较理想的值

CPU: CPU 资源

NET: 每条彩色横杆代表一种资源，横杆越长，检索资源所需要的事件越长

第三部分：火焰图

1.  横轴表示加载的时间
1.  纵轴表示事件（线程）的执行顺序，先是上面的执行再到下面的，我们要特别注意红色的三角行部分

第四部分：统计面板Summary 部分，可以看到 CPU 中中的资源分配，比如下图中的 Rendering（渲染）占比就很大

点我了解更多Performance性能面板

👀三 调试步骤

1、 检查控制台是否报错

2、 错误是什么

3、 当前页面是否需要请求获取数据

4、 网络请求是否成功发送

5、 定位到代码应当执行的位置

6、 按照预期执行顺序检查代码

7、 检查渲染需要的数据是否与预期相同

8、 异常代码一般分析方法

👀四 总结

介绍了 Chrome 浏览器的基本调试场景和调试方法，并分别对几个面板的调试做了展示。当然Chrome 浏览器的调试功能并不仅限于此，还有很多模块值得我们一起去探索。浏览器是前端开发用于展示的平台，是我们提升效率的利器，通过这节课我明白了学习一定要多多尝试，多动手实践才会有进步。因为是初学者，对这方面还有很多理解不到位的地方，希望大家可以理解。

avatar
文章
阅读
粉丝