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

小塔_Zrea
119 阅读7分钟

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

这是我参与「第四届青训营 」笔记创作活动的的第10天
Bug与Debug

bug的产生

Bug是一个英文单词，本意是指昆虫、小虫子。

那为什么测试就是在找Bug呢？

这需要我们去追溯历史，当时人们还在使用第一代真空计算机（马克二型），这种计算机是依靠控制电流来改变开关，从而实现控制，但是它会发出大量的热和光。1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。

第一份缺陷报告也由此诞生啦

img

前端Debug的特点

01.多平台

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

02.多环境

本地开发环境、线上环境

03.多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...

04.多技巧

Console、BreakPoint、sourceMap、代理...

Chrome DevTools 开发者工具

动态修改元素和样式

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

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

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

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

  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则 可以用以下2种方式强制激活伪类

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

Concle 控制台

console.log
console.warn
console.error
console.debug
console.info
​
console.table
具像化的展示JSON和数组数据
​
console.dir
通过类似文件树的方式展示对象的属性

  • 占位符

    • 给日志添加样式，可以突出重要的信息 %s:字符串占位符；%0：对象占位符；%c:样式占位符；%d:数字 占位符

  • 左侧可以选择等级，对日志进行分类查看

image-20220804224308582.png

Sorce Tab 源代码

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

  • 区域2：代码预览区域

  • 区域3：Debug工具栏 从左到右依次为

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

  • 区域4：断点调试器

image-20220804224451151.png

Break Point与Watch 断点与监视

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

image-20220804224937143.png

Scope与Call Stack 作用域和调用堆栈

image-20220804225126473.png

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

压缩后的代码如何调试？

前端代码天生具有“开源"属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码 只有一行，变量使用'a'、b等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？——Source Map

mappings字段存储了源文件和Source Map的映射

source map 为调试提供了便利，但在生产环境下，一定要关闭 source map。防止通过一些渗透手段，来获取源码。

英文，表示源码及压缩代码的位置关联 逗号，分隔一行代码中的内容。 分号，代表换行。

NetWork

  • 区域1：控制面板
  • 区域2：过滤面板
  • 区域3：概览区域
  • 区域A:Request Table面板
  • 区域5：总结面板
  • 区域6：请求详情面板

image-20220804230227102.png

Application

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

  • Local Storage

  • Session Storage

  • IndexedDB

  • Web SQL

  • Cookie

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

image-20220804230548995.png

Performance

  • 区域1：控制面板

  • 区域2：概览面板

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

  • 区域3：线程面板

    • Frames:帧线程
    • Main:主线程，负责执行]avascript,解析HTML/CSS,完成绘制
    • Raster:Raster线程，负责完成某个layer或者某些块(tile)的绘制。

  • 区域4：统计面板

image-20220804230911183.png

Performance 运用示例

页面卡顿>查看FPS指标>寻找性能瓶颈>优化代码

Lighthouse

核心Web指标 LCP、FID、CLS

Largest Contentful Paint(LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

First Input Delay(ID):首次输入延迟测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。

Cumulative Layout Shift(CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

移动端5调试

真机调试

  • IOS

     2.iPhone开启Web检查器（设置->Safari->
 高级->开启Web检查器)
 3.Phone使用Safari浏览器打开要调试的页面
 4.Mac打开Safari浏览器调试（菜单拦一>开发
 ->iPhone设备名->选择调试页面)
 5.在弹出的Safari Developer Tools中调试 

     Store安装Xcode使用其内置的
iOS模拟器

  • Android

    1.使用USB数据线将手机与电脑相连
    2.手机进入开发者模式，勾选USB调试，并允许调试
    3.电脑打开Chrome浏览器，在地址栏输入：chrome:/
    /inspect/#devices并勾选Discover USB devices选
    项不
    4.手机允许远程调试，并访问调试页面
    5.电脑点击inspect按钮
    6.进入调试界面

直接使用手机扫码查看，体验更佳

VConsole

  • 日志(Log): console.log l info l error l..
  • 网络(Network):XML HttpRequest, Fetch,sendBeacon
  • 节点(Element)):HTML节点树
  • 存储(Storage):Cookies,Localstorage,Sessionstorage
  • 手动执行S命令行
  • 自定义插件

使用代理工具调试

原理：

  • 电脑作为代理服务器
  • 手机通过HTTP代理连接到电脑
  • 手机上的请求都经过代理服务器

以Charles为例：

  • 1.安装Charles

  • 2.查看电脑P和端口

  • 3.将P、端口号填入手机HTTP代理

  • 4.Charles允许授权

  • 5.使用SwitchHosts!软件给Mac电脑配Hosts

  • 6.手机访问开发环境页面

    默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。

常用的代理工具

image-20220804232939824.png

NodejS调试

Inspector Protocol + Chrome Devtool

image-20220804233046301.png

Inspector Protocol + VS Code

image-20220804233046301.png

VS Code点击运行 添加配置 启动调试 添加断点 查看变量、堆栈

常用开发调试技巧

线上即时修改Overrides

1.打开Sources面板下的的Overrides 2.点击Select folders for Overrides。选择一个本地的空文件夹目录。 3.允许授权 4.在page中修改代码，修改完成 后command+s保存 5.打开devTools,点击右上角的三个小点->More tools->Changes,就能看到所有修改了

利用代理解决开发阶段的跨域问题

image-20220804233334397.png

启用本地source map

线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件。

使用代理工具MOCK数据

1.右键选中要mock数据的接口，选择save response,保存文件到本地。 2.本地打开保存的文件，编辑想mock的数据并保存。 3.右键选中第一步的接口，选择Map Local,Local Path选择第二步的文件。

最后，小黄鸭大法

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。——《程序员修炼之道》

当然，百度一下，拿着bug找到你的同事探讨一番也是很不错的选择。

avatar
文章
阅读
粉丝