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

Sonui
81 阅读4分钟

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

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

Bug

前端Debug的特点

  1. 平台杂

各种各样的环境各不相同

例如

  • 浏览器
  • Hybrid
  • NodeJs
  • 小程序
  • 桌面应用
  • ...
  1. 环境多
  • 本地开发环境
  • 线上开发环境
  1. 多工具

各平台有不同的工具来调试

例如

  • Chrome DevTools: Chromium内核浏览器自带的调试工具
  • Charles: 网络封包抓取工具
  • Spy-Debugger: 一站式页面调试工具，远程调试任何手机浏览器页面，任何手机移动端webview
  • Whistle: 网络封包抓取工具
  • vConsole: 小程序调试工具
  • ...
  1. 技巧多

可以通过各种方式来调试

  • Console: 控制台调试
  • BreakPoint: 调试断点
  • sourceMap: 源码调试
  • 代理: 查看网络封包
  • ...

调试介绍

Chrome DevTools

支持以下调试方式

  • Elements
  • Console
  • Source
  • Performance
  • Network

动态修改元素和样式

  • 点击空白处可添加新属性
  • 点击属性名或属性值可更改
  • 通过勾选取消查看不同效果
  • 编辑完成可实时查看效果
  • 可通过选中具有伪类的元素点击 :hov 或右键DOM树选择 Force State 使伪类强制生效

Console

Console有四个等级：

  • Debug
  • Log
  • Info
  • Warn
  • Error

console.table(data) 具象化展示JSON和数组数据

console.dir(obj) 展示对象的属性和方法

console.log('%s %o %c %d') 占位符, 对应 string, object, css, number

BreakPoint 与 Watch

点击行号部分可设置断点, 运行到此处暂停可查看变量值

Scope & Call stack

Scope 可查看作用域的变量值

Call stack可查看调用栈, 追踪调用链路

Source Map

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

source Map 标准

source map

Network

非常重要的调试工具, 可以查看网络请求的详细信息

Application

用于展示网页存在在本地上的信息

Performance

用来评测网页性能好坏

出现页面卡顿时通过此查看FPS指标, 然后寻找性能瓶颈进行优化

Lighthouse

用于评测用户体验

LCP: 最大内容绘制时间, 应当在页面首次加载后的2.5s内发生

FLD: 首次输入延迟, 页面FID应为100ms以内

CLS: 累计布局偏移, 应当保持在0.1或更少

移动端 H5 调试

iOS

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

Android

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

使用代理工具调试

原理:

  • 电脑作为代理服务器中转移动端请求
  • 使用中间人攻击原理

官方为Charles, 个人更习惯Fiddler, 往上教程很多不再赘述

注意搜索Fiddler 手机 https

NodeJS 调试

Chrome DevTools

  1. 执行命令 node --inspect=8888 index.js
  2. 打开浏览器输入 http://localhost:8888
  3. 点击绿色的按钮，打开断点调试界面(在chrome://inspect/#devices中配置network target)
  4. 在node调试界面使用断点调试

VS Code

VS Code点击右上角的Debug按钮，选择Start Debugging

添加配置

启动调试

添加断点

查看变量、堆栈

常用开发技巧

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

使用Mock数据

将服务器返回的信息保存下来并进行编辑, 然后作为Mock数据使用

小黄鸭调试大法

买个小鸭子对着讲每行代码的作用

avatar
文章
阅读
粉丝