这是我参与「第四届青训营」笔记创作活动的第4天

俗话说的好：好事多磨；同样，对于一个前端开发人员而言，一个成品是慢慢调试出来的，所以对于前端的开发调试必须要了如指掌。

本文是针对青训营《前端必须知道的开发调试知识》这节课所学的课后总结，通过秃头披风侠老师深入浅出的介绍，让我了解了前端开发调试常用的方法。

Bug与Debug

多平台:浏览器、Hybrid、NodeJs、小程序、桌面应用……
多环境:本地开发环境、线上环境
多工具:Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
多技巧:Console、BreakPoint、sourceMap、代理……

Chrome DevTools

Chorme devTools是谷歌浏览器自带的调试工具，功能非常之强大，以下通过Elememts、Console、Source、Performance、Network等介绍其调试功能。

动态修改元素和样式

1.通过.cls给元素添加类名

2.直接修改样式后面的属性值

Console

JS中的console.log就不必多说了.... 其他的console输出：

console.table：可以将JSON或数组数据表格展示

console.dir：可以数据树状结构展示

Source Tab

展示源代码中的内容，可以增加断点、进行单步调试等

断点（break point）与监视(watch)

通过上图可以看出，通过断点让时间函数暂停

监视(watch)可以对某个变量进行监控

作用域(Scope)与调用栈(Call Stack)

scope可以查看作用域列表(包括闭包)，CallStack可以查看当前JavaScript代码的调用栈。

这里有个问题，前端代码通常是以压缩代码的形式呈现，那么如何对压缩的代码进行调试呢？

webpack 打包时可以多产出一个Source Map程序，会将压缩后的代码和真实的文件进行映射)，抛出异常时就将其映射出来，而在上线后将Source Map映射删除。

NetWork

Application

此面板展示与本地存储相关的信息

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

Performance

页面卡顿调试：页面卡顿 ——> 查看FPS ——> 寻找性能瓶颈 ——> 优化代码

Lighthouse

移动端H5调试

真机调试

ios

使用Lightning 数据线将iPhone与Mac相连
iPhone开启Web检查器(设置 -> Safari -> 高级 -> 开启Web检查器)
iPhone使用Safari浏览器打开要调试的页面
Mac打开 Safari浏览器调试(菜单栏 -> 开发 -> iPhone设备名 -> 选择调试页面)
在弹出的Safari Developer Tools中调试

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式。勾选USB调试，并允许调试
电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/#devices并勾选Discover USB devices选项
手机允许远程调试，并访问调试页面
电脑点击inspect 按钮8622
进入调试界面

代理调试

以[Charles](Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy (charlesproxy.com))为例：

安装Charles;
查看电脑IP和端口；
将IP、端口号填入手机HTTP代理
Charles允许授权
使用SwitchHosts!软件给Mac电脑配Hosts
手机访问开发环境页面

常用代理工具如下：

常用开发调试技巧

线上及时修改Override

打开Sources面板下的的Overrides
点击Select folders for Overrides。选择一个本地的空文件夹目录。
允许授权
在page中修改代码，修改完成后保存
打开devTools ，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

启用本地source map

线上不存在Source Map时可以用Map Local网络映射功能来访问本地的Source Map文件

使用代理工具Mock数据

终极技能：小黄鸭调试大法！！！

总结

通过本课程，让我深刻地了解了前端在开发过程是如何进行一步步调试的，让我知晓常用的开发调试方法，受益匪浅。

前端开发调试|青训营笔记