一、Bug 与 Debug
我们系统程序的漏洞就叫 bug。世界上第一个 bug ，是 1946 年霍普发现了第一个电脑上的 bug，竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试，也就是 Debug。
Debug 的特点
多平台：浏览器、NodeJS、Hybrid、小程序、桌面应用......
多环境：本地开发环境、线上环境
多工具：Chrome Devtool、Charles、Spy-Debugger、Whistle、vConsole......
多技巧：Console、BreakPoint、sourceMap、代理......
二、Chrome Devtool
修改元素和样式——Element面板
修改元素、调试样式，我们常用的就是 Chrome 开发者工具 Element 面板，如下就是该面板的用途：
点击 .cls 开启动态修改元素的 class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值(字号、颜色、宽度高度等) 可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则
Console面板
输出日志，需要用到 Console 面板，以下是几种 console 常见的用法：
console.log：输出信息
console.warn：输出警告信息
console.error：输出错误信息
console.debug：调试信息
console.info：console.log 别名，输出信息
console.table：将复合类型的数据（JSON、数组）转为表格显示
占位符：给日志添加样式，可以突出重要的信息
%s: 字符串占位符;%o: 对象占位符; %c:样式占位符;%d:数字占位符。
Source Tab
Source 面板，主要可以查看源代码，并且能断点调试，如下是该面板功能介绍：
区域1:⻚面资源文件目录树
区域2:代码预览区域
区域3:Debug 工具栏从左到右依次为
暂停(继续)
单步跳过
进入函数
跳出函数
单步执行
激活(关闭)所有断点
代码执行异常处自动断点
区域4:断点调试器
Break Point 与 Watch
Break Point 是存放所有调试断点的列表，Watch 则是观察变量值的变化，如图所示：
使用关键字 debugger 或 代码 预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开 Breakpoints 列表可以查 看断点列表，勾选/取消可以 激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
展开 Scope 可以查看作用域列表（包含闭包）
展开 Call Stack 可以查看当前 javaScript 代码的调用栈
Perfomance
Perfomance 面板，主要用来检测性能问题。平时开发应该很少用到，但遇到页面性能提升瓶颈时，这是个很好的利器，帮助我们快速排查定位出引起性能问题的原因。我们先来看看该面板几个区域的主要功能：
区域1：控制面板：录制页面加载/操作、清空、快照/内存捕捉等
区域2：概览面板
FPS：帧率，每秒帧数
CPU：处理各个任务花费的时间
NET：各个请求花费时间
HEAP：内存消耗记录，包括存在内存未销毁的js变量、文档量、dom节点、事件监听、GPU占用内存等
区域3：线程面板
Network：各个请求发生的时间点
Frames：帧线程
Main：主线程，负责加载、执行JavaScript，解析html、css，生成render树，完成绘制painting（帮助我们理解浏览器的页面渲染原理）
Raster：Raster线程，负责完成某个layer或者某些块的绘制
区域5：统计面板
Network
Network 网络面板，是我们开发调试经常用到的，可以查看 xhr/fetch 接口请求、加载的资源（js/css/img/media/font...）。下面是该面板的主要区域：
区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4：Request Table 面板
区域5：总结面板
区域6：请求详情面板
我们经常用 Request Table 面板查看接口请求，点开某个请求，就能查看接口详情。其中包含请求头、响应头、请求状态码等。比如一个接口状态码是4xx，属于客户端错误，我们就需要排查自己前端的代码问题；如果状态码是5xx，属于服务器端错误，我们就可以找后端撕逼，协助他们排查解决。
Application
Application 应用面板，主要用来查看本地的一些缓存数据，比如 Storage、Cookie、离线缓存、本地数据库等，如下图所示：
Security
Security 面板，用来查看页面的https证书相关状态，比如安全源信息、https协议的CA证书（颁发机构、有效期、签名算法、公共密钥......）等。
三、移动端调试-H5
真机调试
IOS
使用 Lightning 数据线将 iPhone 与 Mac 相连
iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启 Web 检查器)
iPhone 使用 Safari 浏览器打开要调试的页面
Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)
在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器
iPhone
使用 USB 数据线将手机与电脑相连
手机进入开发者模式，勾选 USB 调试，并允许调试
电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
手机允许远程调试，并访问调试页面
电脑点击 inspect 按钮
进入调试界面
直接使用手机扫码查看，体验更佳
使用代理工具调试
移动端h5开发，需要抓包进行接口调试，这时可以选择代理工具。下面以 Charles 为例:
安装 Charles
查看电脑 IP 和 端口
将 IP、端口号填入手机 HTTP 代理
Charles 允许授权（默认情况下，Charles 无法抓取https的请求，需要安装证书）
使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
手机访问开发环境页面
代理工具的原理：
电脑作为代理服务器
手机通过 HTTP 代理连接到电脑
手机上的请求都经过代理服务器，电脑自然就抓取到手机上的请求了
常用工具
Charles
Charles：适合查看、控制网络请求，分析数据。
Fiddler
Fiddler：与Charles类似，适合 windows 平台。
spy-debugger
spy-debugger: 远程调试手机页面，抓包。
Whistle
Whistle: 基于 Node 实现的跨平台 Web 调试代理工具。
四、常用调试技巧
线上即时修改
我们平时在 Source 面板在线修改调试代码，会实时更新效果，但浏览器一刷新之前修改的全部恢复原样，这样子调试代码效率就很低，只能浏览器调试改点，代码跟着改点很麻烦。为了解决这个问题，我们可以使用 Overrides 保存线上修改后的文件，并能清晰看出改动了哪些地方，最后修改代码也方便。
Overrides 使用步骤如下：
打开 Sources 面板下的的 Overrides。
点击 Select folders for Overrides。选择一个本地的空文件夹目录。
允许授权
在 page 中修改代码，修改完成后 command + s 保存。
打开 devTools ，点击右上角的三个小 点 -> More tools -> Changes，然后就 能看到所有修改了。
启用本地 source map
线上环境的代码是打包压缩的，且没有 source map 文件，排查定位问题不方便，这时可以使用 Charles，配置 Map Local，将线上环境代理到本地，运行本地文件，本地有 source map就能快速定位到问题啦。
小黄鸭调试大法
上述调试技巧都没啥帮助时，我们可以采取终极调试大法——小黄鸭调试大法。
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
五、总结
我们开发写代码，虽然追求高质量编码，但 bug 终究不可避免。当遇到bug排查定位问题时，我们就会用到调试技巧，如下是我做的一些总结：
样式问题排查：使用
Element面板接口问题排查：善用
Network网络面板、Console日志面板线上环境问题排查：启用
Overrides、Charles配置Map Local移动端问题排查：使用代理抓包工具（
Charles、Fiddler...）隐藏深的问题排查：小黄鸭调试大法（一行行挨着读代码，梳理清楚代码逻辑）
欲善其事必先利器，要想提升排错效率，快速解决线上问题，我们就需要用好上述介绍的前端调试工具和技巧。
作者：小铭子
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
