这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前端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
代理工具调试
原理
将电脑作为代理服务器
手机通过HTTP代理链接到电脑上
手机上的请求都经过代理服务器
以Charles为例
安装Charles
查看电脑IP和端口
将IP、端口号填入手机HTTP代理
Charles允许授权
使用SwitchHosts！软件给Mac电脑配置Hosts
手机访问开发环境页面
常用工具
Charles：Mac
Progress：Windows
