前端开发必须知道的开发调试知识
前端开发调试之 PC 端调试
前端Debug的特点：
多平台：浏览器、小程序、桌面应用 多环境：本地开发环境、线上环境 多工具：Chrome devTools、Charles 多技巧：sourceMap、代理、BreakPoint
1. console.log()
在你觉得有问题的代码处，加上一句 console.log() 就好了。然后在开发者工具控制台就可以看到你打印出来的东西了。
2. 断点调试
debugger 语句 在代码中添加 debugger 语句，当代码执行到该语句的时候就会自动断点。
a: Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）
b: Step over next function call：逐语句执行（跳到下一行），快捷键F10
c: Step into next function call：进入当前函数，快捷键F11
d: Step out of current function：跳出当前执行函数，快捷键F11 Shift
e: Step 和b的作用一致，快捷键F9
f: Deactive/Active all breakpoints：关闭/开启所有断点
g: Pause on exceptions：异常情况自动断点设置
（1）手动断点 打开开发者工具的 source 面板，在左侧目录树中找到对应的JS文件，在右侧对应文件的行号上单击即可实现断点的添加和删除。在添加断点之后，代码就会在断点处停止执行。
（2）事件断点 在上图中点击 Event Listener Breakpoints ，然后选择我们需要监听的事件。之后当该事件被触发时，浏览器会帮我们自动在相应的js文件代码处打上断点。
（3）请求断点 在上图中点击 XHR/fetch breakpoints ，然后添加对应的请求URL，之后当该请求发送的时候，就会自动断点。
（4）Dom 断点 我们还可以对指定的 dom 节点进行断点设置，根据设置类型的不同，浏览器会在 dom 节点属性变化，子树变化，节点被移除三个时机帮我们进行断点。
前端开发调试之移动端调试
真机调试 代理调试 常用工具
1、Chrome DevTools模拟手机调试
直接使用谷歌浏览器的开发者工具
2、weinre(web inspector remote)远程调试工具
weinre其实是在待调试的页面中嵌入了一个特定的js，这样页面才能被weinre监测到并能打开调试面板；要注意weinre的调试面板不能调试JS,也不支持打断点调试，仅能用于调试页面样式，使用场景有限；
3、微信的“web开发者工具”
微信的web开发者工具，集成了谷歌的DevTools和weinre
4、Chrome DevTools远程调试Android和iOS页面
电脑上安装新版谷歌浏览器，然后地址栏输入 chrome://inspect 会打开设备监视页面，这里可以监视到iOS和Android设备
