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

用户5197441653766
85 阅读6分钟

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

Bug与Debug

Bug的产生

First bug

First actual case of bugbeing foundFirst actual cbeing found

Big or Feature

That's not a bug, it's afeature request.

Node Code，No Bug

lf debugging is the processof removing softwarebugs,then programmingmust be the process ofputting them in.

前端Debug 的特点

多平台

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

多环境

本地开发环境、线上环境

多工具

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

多技巧

Console、BreakPoint、sourceMap、代理等

Chrome DevTools

动态修改元素和样式

  • 点击“.cls ”开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值〈字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则

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

  • 选中具有伪类的元素．点击:hov
  • DOM树右键菜单．选择Force State

Console控制台

  • console.log
  • console.warn
  • console.error
  • onsole.debug
  • console.info
  • console.table 具象化的展示JSON和数组数据
  • console.dir 通过类似文件树的方式展示对象的属性
  • 占位符 给日志添加样式，可以突出重要的信息

%s:字符串占位符;%o:对象占位符;%c︰样式占位符;%d:数字占位符

image.png

给日志添加效果

image.png

字符串白色字体，数字紫色字体。可以通过日志字体的样式判断数据类型

Sorce Tab

image.png

  • 区域1∶页面资源文件目录树
  • 区域2∶代码预览区域
  • 区域3:Debug工具栏 从左到右依次为
    1. 暂停（继续）
    2. 单步跳过
    3. 进入函数
    4. 跳出函数
    5. 单步执行
    6. 激活（关闭）所有断点
    7. 代码执行异常处自动
  • 区域4∶断点调试器
    • 使用关键字debugger 或代码预览区域的行号可以设置断点
    • 执行到断点处时代码暂停执行
    • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
    • 暂停状态下，鼠标hover变量可以查看变量的值
    • 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

image.png

设置断点

image.png

解决问题

Scope与Call Stack 展开Scope 可以查看作用域列表（包含闭包)

闭包可以参考： https : / / developer . mozilla. org/ en-uS/ docs/ Web/ JavaScript / Closures

（执行栈）展开Call Stack可以查看当前javaScript代码的调用栈

关于调用栈可以参考： https : / / developer . mozilla. org/ en-US / docs/Glossary / Call_stack

XHR/fetch Breakpoints所有请求的断点

DOM Breakpohrits在html中某个元素变化时可以添加的断点（开发页面、动态效果）

Global Listeners

Event Listener Breakpoints

CSP Violation Breakpoints

压缩后的代码如何调试?——Source Map

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

实用工具：

  • webpack
  • UglifyJS
  • terser

image.png

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

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

映射见: www.murzwin.com/base64vlq.h…

NetWork

image.png

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

Application

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

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web sQL
  • Cookie

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

Performance

image.png

区域1:控制面板

与网页性能相关

区域2∶概览面板

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

区域3∶线程面板

  • Frames:顿线程
  • Main:主线程，负责执行Jvascript,解析HTML/CSS,完成绘制
  • Raster: Raster线程，负责完成某个layor或者某些块{tile)的绘制。

区域4∶统计面板

各个部分的耗时

解决性能问题

image.png

Lighthouse

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

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

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

移动端H5.调试

真机调试

ios

  1. 使用 Lightning 数据线将iPhone与 Mac相连
  2. iPhone开启Web检查器{设置-> Safari ->高级>开启we 检查器)
  3. iphone使用 Safari浏览器打开要调试的页面
  4. 4.Mac打开 Safari 浏览器调试(菜单栏->开发-> iPhone 设备名->选择调试页面)
  5. 在弹出的Safari Developer Tools中调试

没有iPhone设备可以在Mac AppStore安装Xcode 使用其内置的iOS模拟器

Android

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

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

vConsole

image.png

  • 日志(Logs): console.loglinfolerrorl..
  • 网络(Network): XMLHttpRequest,Fetch,sendBeacon
  • 节点(Element): HTML节点树
  • 存储(Storage):Cookies,LocalStorage, SessionStorage
  • 手动执行JS命令行
  • 自定义插件

使用代理工具调试

原理:

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

以Charles为例:

  1. 安装Charles
  2. 查看电脑P和端口
  3. 将IP、端口号填入手机HTTP代理
  4. Charles 允许授权
  5. 使用SwitchHosts!软件给Mac电脑配Hosts6.手机访问开发环境页面

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

常用代理工具

Charles:适合查看、控制网络请求，分析数据

Fiddler:与Charles类似,适合windows 平台

spy一debugger:远程调试手机页面,抓包

Whistle:基于Node 实现的跨平台Web调试代理工具

NodejS调试

lnspector Protocol + Chrome Devtool

  1. 执行命令node --inspect=8888 index.js

  2. chrome浏览器访问服务

  3. 点击绿色node图标打开node调试面板(在chrome:// inspect/#devices中配置network target)

  4. 在node调试面板中使用断点调试

lnspector Protocol + VS Code

vs Code点击运行：

  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈

常用开发调试技巧

线上即时修改Overrides

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

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

image.png

启用本地 source map

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

使用代理工具Mock数据

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