这是我参与「第四届青训营 」笔记创作活动的第8天
Bug与Debug
bug的产生
前端Debug的优点
- 多平台： 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境： 本地开发环境、线上环境
- 多工具： Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
- 多技巧： Console、BreakPoint、sourceMap、代理等
Chrome DevTools
Elements
打开Chrome DevTools,来到Elements
在这个界面我们能够，通过点击元素代码，进入style模块，进行元素样式的修改
- 点击.cls 开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素
- 点击:hov. DOM树右键菜单．选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table
- 具像化的展示JSON和数组数据
- console.dir
- 通过类似文件树的方式展示对象的属性
- 占位符
- 给日志添加样式，可以突出重要的信息
- %s:字符串占位符;%o:对象占位符;%c︰样式占位符;%d:数字占位符
Source
断点调试
- 使用关键字debugger 或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover变量可以查看变量的值
- 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
- 展开Scope 可以查看作用域列表(包含闭包)
- 展开Call Stack可以查看当前javaScript代码的调用栈
压缩后的代码如何调试
通常上线的js代码都是通过压缩和混淆使其只有一行，且晦涩难懂。那么我们怎么调试这种代码呢？
Source Map
使用Source Map将压缩混淆后的代码和源代码做一个映射，当代码报错时通过点击报错的位置，能够直接找到源代码报错的区域
mappings字段存储了源文件和Souroe Map的映射
- 英文，表示源码及压缩代码的位置关联逗号，分隔一行代码中的内容。
- 分号，代表换行。
NetWork
Application
Performance
LightHouse
移动端 H5 调试
真机调试
VConsole
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例:
- 安装Charles
- 查看电脑P和端口
- 将IP、端口号填入手机HTTP代理
- Charles 允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
常用代理工具
NodejS调试
Inspector Protocol + Chrome Devtool
- 执行命令node --inspect=8888 index . js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板〈在chrome : / / inspect/#devices中配置network target)
- 在node调试面板中使用断点调试
常用开发调试技巧
线上即时修改 Overrides
- 打开Sources面板下的的Overrides
- 点击Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page 中修改代码，修改完成后ctrl/command +s保存
- 打开devTools ,点击右上角的三个小点-> More tools ->Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地 source map
线上不存在Souroe Map时可以使用Map Local网络映射功能来访问本地的 SourceMap文件。
