目录
Bug的产生
前端debug的特点
多平台
浏览器、小程序、桌面应用、NodeJs、Hybrid
多环境
本地开发环境、线上环境
多工具
Chrome devTools、Charles、Spy-Debugger、Whistle
多技巧
Console、BreakPoint、SourceMap、代理
chrome devtool
修改元素和样式
点击elements面板
双击或右键改变类名
改样式：computed-输入要改的属性
console日志
调试代码、输出
console.warn/console.debug/console.error可以利用等级来调试代码
console.dir打印对象，展示对象属性及对应的值。可用于绑定对象，dom节点。
列出数组的每一项：console.table
占位符 %c样式 %s字符串 %o对象
source
三个部分分别是：
文件 代码 调试代码
可以在你觉得有错的部分加上debugger；新增断点，鼠标放在变量上面可以看到结果。根据变量的值进行调试。
watch对某一个值进行监听，可以看到代码运行过程中，该值的变化。
Scope作用域Call Stack执行栈
scope看对应变量。
Call Stack执行上下文，调用栈，看当前程序执行到了哪个函数。
压缩后的代码如何调试？
压缩后的代码，变量名会变，用Source Map生成映射文件之后，压缩代码会变成源文件。
Performance
调试性能可以用这个，打开面板 有四个区域
区域一：控制面板
区域二：概览面板
FPS: 每秒帧数
CPU：处理各个任务花费的时间
NET：各个请求花费的时间
区域三：线程面板
Frames:帧线程
Main：主线程，复制执行Javascript，解析HTML/CSS，完成绘制
Raster:Raster线程，负责完成某个layer或者某些块tile的绘制
区域四：统计面板
Network
整个站点的网络请求，可以看参数返回头，值
模拟弱网，更改代码：NetWork->3G
Application
本地存储
快速清除数据：Storage->claer slie data
网页截图
选中要截图的部分，右键选择Capture Node screenshot
移动端H5调试/混合移动端开发
真机调试
在同一个局域网下，扫二维码，看样式。
代理工具调试
原理
- 将电脑作为代理服务器
- 手机通过HTTP代理链接到电脑上
- 手机上的请求都经过代理服务器
以Charles为例
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts！软件给Mac电脑配置Hosts
- 手机访问开发环境页面
常用工具
Charles：Mac
Progress：Windows
常用调试技巧
线上及时修改
看改了哪：sources->changes
小黄鸭debugger
给同学、同事一行一行讲代码
1691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
