关于前端调试知识笔记 | 青训营笔记

一只菜喵
126 阅读5分钟

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

关于前端调试知识

前端Debug特点

  • 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
  • 多环境：本地开发、线上开发
  • 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等
  • 多技巧：Console、BreakPoint、sourceMap、代理等。

web端调试//谷歌浏览器检查工具 - Chrome DevTools

首先用谷歌浏览器打开网页，然后鼠标右键在弹出的菜单选择“检查”：

image.png

动态修改元素和样式

image.png

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

PS：可以用2种方法强制激活伪类

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

Console-控制台

可以用console语句在控制台显示信息，常用的CONSOLE语句有：

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

占位符：给日志添加样式，可以突出重要的信息

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

Sorces

Sorces分为四个区域：

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

image.png

区域2:代码预览区域

image.png

区域3: Debug 工具栏

image.png这个小条条

从左到右依次为

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

区域4:断点调试器

image.png

关于区域4的选项：

  • 使用关键字debugger 或代码预览区域的行号可以设置断点
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
  • 展开Scope 可以查看作用域列表(包含闭包)
  • 展开Call Stack可以查看当前javascript代码的调用栈

Source Map

用来调试被压缩的代码，比如代码报错点击行数可以跳到相应的行数，把压缩过的代码按原代码的样子显示。
另外：mappings字段存储了源又件和SourceMap 的映射

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

NetWork

在这里进行网络方面的调试，可以通过network查看请求头、在低网速时页面的运行情况等。关于这方面的知识上节课HTTP的讲述已经很详细了，这里就不过多赘述。

Application

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

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • cookie

此外还可以点击图中按钮清除缓存数据：

image.png

Perfomance

在这里进行跟性能相关的调试。分为4个区域：

image.png

区域1:控制面板

image.png

区域2︰概览面板

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

image.png

区域3:线程面板

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

image.png

区域4:统计面板

image.png

Lighthouse

这里显示一些核心web指标：

  • Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
  • First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的F应为100毫秒或更短。
  • Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

移动端H5调试

真机调试

将手机与电脑用数据线连接，安卓跟IOS端略有不同，没有iphone设备可以用IOS模拟器进行调试，而安卓可以直接用手机扫码调试。

VConsole工具

可以在页面注入这个组件，可以在手机中看到一个类似谷歌TOOL的页面，能看到日志、元素等。

使用代理工具调试

常用代理工具：Charles、Fiddler、spy-debugger、Whistle

Node.js调试

  1. 执行命令node --inspect=8888 index.js
  2. chrome浏览器访问服务
  3. 点击绿色node图标打开node调试面板(在chrome://inspect/#devices中配置network target)
  4. 在node 调试面板中使用断点调试

也可以在VS Code中进行断点调试：运行-->启动调试

常用开发调试技巧

线上即时修改Overrides

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

利用代理服务器解决跨域问题

这方面内容在上节课HTTP的介绍中讲过，这里不做赘述。

使用代理工具Mock数据

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

小黄鸭调试大法

在工作的桌子上面放一只小黄鸭，当出现问题时跟小黄鸭解释每行代码，问题会在你的讲述中得到解决方法。没有小黄鸭的可以用身边的同事或者朋友代替。注意：这可能会失去一个朋友。

avatar
文章
阅读
粉丝