Web调试技术 | 青训营笔记

记得带伞_
99 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

R-C.jfif

课程笔记

Bug 与 Debug

Bug的产生

image.png

程序错误，即英文的Bug，也称为缺陷、臭虫，是指在软件运行中因为程序本身有错误而造成的功能不正常、死机、数据丢失、非正常中断等现象。 早期的计算机由于体积非常庞大，有些小虫子可能会钻入机器内部，造成计算机工作失灵。史上的第一只 "Bug" ，真的是因为一只飞蛾意外走入一电脑而引致故障，因此Bug从原意为臭虫引申为程序错误。 一些有趣的Bug有时也会成为一种乐趣。在电脑游戏中，一些Bug，假如不令游戏出现大错误的话，经常会变成一种玩游戏时的秘技。

虽然Bug很多，但是我们可以通过Debug的方法来消除很多程序错误。

前端Bug的特点

结合前端Bug的特性，我们就产生了相应的具有前端特色的Debug方法。

  • 多平台

    浏览器、Hybrid、NodeJs、小程序、桌面应用等

  • 多环境

    本地开发环境、线上环境

  • 多工具

    Chrome devTools、Chatles、Spy-Debugger、Whistle、vConsole等等

  • 多技巧

    Console、BreakPoint、sourceMap、代理等

Chrome DevTools

前端常用的调试手段就是使用Chrome DevTools（在Edge中为Edge DevTools）来通过浏览器进行调试。

打开Chrome DevTools的方法：用浏览器打开页面-->在页面右键点击检查-->然后就打开了Chrome DevTools。

在Chrome DevTools界面会有一个Tab栏，可以查看页面的每部分内容：

  • Elements：对应Edge DevTools中的元素。
  • Console：对应Edge DevTools中的控制台。
  • Sources：对应Edge DevTools中的源代码。
  • Network：对应Edge DevTools中的网络。
  • Application：对应Edge DevTools中的应用。
  • Performance：对应Edge DevTools中的性能。

Elements

image.png

通过Elements栏我们可以动态修改元素和样式。

2种方式可以查看指定元素的样式：

  • 面板左上角的定位跟踪箭头可以进行选中。
  • 选中元素再右键检查。

可以用以下2种方式强制激活伪类：

  • 选中具有伪类的元素，点击：hover。
  • DOM树右键菜单，选择Force State。

还有许多常用的其他功能：

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

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

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

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

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

image.png

一个较少人知道的小技巧：

将鼠标放在body标签上然后右键选择Capture node screenshot（捕捉节点屏幕截图）即可将页面整个截图下来。（单个其他节点也适用）

Console

image.png

控制台界面，可以查看一些页面日志或者JS输出的内容。左侧可以选择等级，对日志进行分类查看 在JS中我们通过Console类方法来输出不同类型的日志（不同类型的日志在界面中的条目背景颜色不同）：

  • console.log

    在输出界面显示为黑白色背景

  • console.warn

    在输出界面显示为黄色背景

  • console.error

    在输出界面显示为红色背景

  • console.debug

    在输出界面显示为蓝色背景

  • console.info

    在输出界面显示为黑白色背景

  • console.table

    具象化的展示JSON和数组数据

image.png

  • console.dir

    通过类似文件树的方式展示对象的属性

image.png

  • console.time()

    计时开始

  • console.timeEnd()

    停止计时并输出时间

  • 在JS中我们可以使用占位符来给给日志添加样式，可以突出重要的信息

    %s：字符串占位符； %o：对象占位符 %c：样式占位符 %d：数字占位符

还有一个点就是，在Consloe中，不同数据类型（如数字123（蓝色）和字符123（黑灰色））所输出的字体颜色不同。

Sources

在Sources栏下可以看到页面的所有源代码，可以在这里进行调试测试。

image.png

  • 区域1：页面资源目录文件树

  • 区域2：代码预览区域

  • 区域3：Debug工具栏

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

  • 区域4：断点调试器

image.png

总的来说，图中1，2区域用于展示源码及资源，区域3，4用于代码调试。

对于代码调试区域，我们可以使用以下方法来进行断点调试：

  • 在JS源码中使用关键字 debugger 或 代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂时执行
  • 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标 hover 变量可以查看变量的值
  • 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值

Scope 与 Call Stack：

image.png

  • 展开 Scope 可以查看作用域列表（包含闭包）

  • 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈

Network

在Network界面我们可以看到页面所请求的各种各样的资源。（可以通过点击资源类型名来查看相应类型资源的请求结果）

image.png

各个区域的具体功能如下：

  • 区域1：控制面板

    该面板下可以设置控制网络的请求，如设置慢网环境下站点网络请求的情况。

  • 区域2：过滤面板

    在该面板下可以选择查看指定类型的资源。

  • 区域3：概览面板

  • 区域4：Request Table 面板

    在这个面板里我们可以清晰地看到网站请求了哪些资源。

  • 区域5：总结面板

    可以看到一些基本的请求汇总信息。

  • 区域6：请求详情面板

    单击资源后我们即可在该面板下查看资源的详细请求信息。

Application

该界面主要是一些与浏览器存储相关的东西。

点击左侧Application下的Stroage面板中的Clear Site Data可以清除网页的本地存储数据。

image.png

Performance

该界面是与网页性能相关的内容。

image.png

  • 区域1：控制面板

    我们可以在这里进行各种操作。

  • 区域2：概览面板

    • FRS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费时间

  • 区域3：线程面板

    • Frame：帧线程
    • Main：主线程，负责执行 JavaScript，解析 HTML/CSS，完成绘制
    • Raster：Raster 线程，负责完成某个 layer 或者某些块（title）的绘制

  • 区域4：统计面板

总结

通过本次课程，大致对Web调试技术有了一定的了解，随着我们写的代码越来越多，代码的调试会越来越复杂，所以我们要使用好调试工具才能让我们在写代码的时候能够发现代码的问题所在。

avatar
文章
阅读
粉丝