- 这是我参与第五届青训营伴学笔记创作活动的第12天
- 本文章学习的是前端调试的一些技巧和方法。包括对PC端和移动端的调试。调试常用的工具使用方法的介绍。
前端Debug特点
- 多平台（浏览器 Hybrid NodeJS 小程序 桌面应用）
- 多环境（本地环境 线上环境）
- 多工具（Chrome devTools, Charles, Spy-Debugger, Whistle, vConsloe...）
- 多技巧（Console BreakPoint sourceMap 代理等）
PC端调试
Element
- .cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态查看类名生效效果
- 点击具体样式值（字号 颜色 宽度 高度等）可以及逆行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
- 强制激活伪类的方式
- 选中具有伪类的元素点击.hov
- DOM树右键菜单，选择Force State
Console
- .log
- .warn
- .debug
- .info
- .table
- .dir
- 占位符，给日志添加样式，可以突出重要信息
- %s 字符串占位符
- %o 对象对占位符
- %c 样式占位符
- %d 数字占位符
Source
- 设置断点
- 关键字debugger
- 代码预览区域行号设置断点
断点调试器区域Scope 与 Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JS代码调用栈
SourceMap
- webpack配置文件中 dectool: 'source-map'
- 代码压缩工具
- Webpack
- UglifyJS
- terser
- mappings字段存储了源文件和Source Map的映射
- 英文 表示源码及压缩代码的位置关联
- 逗号 分割一行代码中的内容
- 分号 代表换行
映射见www.murzwin.com/base64vlg.h… source Map标准docs.google.com/document/d/…
Source Map带上源码不安全怎么办
- 监控场景使用Source Map
- 打包带上Source Map，上线时删除source map
Network
Application
- 本地存储相关信息
Performance
- 性能相关信息
LightHouse
移动端调试
真机调试
VConsole
代理调试
- 常用的代理工具
- Charles 适合查看 控制网络请求 分析数据 -Charles 功能介绍和使用教程 - 掘金 (juejin.cn)
- Progress 与Charles类似，适合windows平台
- spy-debugger 远程调试手机页面 抓包
- Whistle 基于Node实现的跨平台Web调试代理工具
常用技巧
Node调试
- 结合浏览器
- node --inspect=8888 index.js
- chrome浏览器访问
- 点击绿色node图标打开node调试面板（在chrome://inspect/#devices 中配置network target）
- 在node调试面板中使用断点调试
- 结合vscode
线上即时修改Override
利用代理解决开发阶段的跨域问题
- Webpack 配置中devServer
- 字节内部跨域代理方式
- 开发阶段代理软件 线上nginx代理
- Char
