一、调试技术的起源
1947年，哈佛大学，一只飞蛾粘在一个继电器上，导致计算机无法正常工作，操作员把飞蛾移除之后，计算机又恢复了正常运转。于是他们将这只飞蛾贴在了他们当时记录的日志上，并在日志最后写了这样一句话：First actual case of bug being found。这是他们发现的第一个真正意义上的 bug，这也是人类计算机软件历史上发现的第一个 bug。他们也提出了一个词，“debug（调试）”了机器，由此引出了计算机调试技术的发展。
二、那些好用工具：
按照工具罗列，讲述每个工具中我认为好用的功能
Chrome插件
前端跟Chrome打交道最多，我们开发的网页审查元素、抓包网络请求都离不开Chrome，用什么工具都不如在Chrome内闭环解决。推荐几个调试相关的插件：
篡改猴，原名tamperMonkey。可以很方便地往页面注入脚本，之前用它统计过小程序的端到端成功率（爬微信开发者后台接口返回数据）。比如我们前边提到的页面注入vConsole，就可以用篡改猴实现
(function() { 'use strict'; var script = document.createElement('script'); script.src="//npm.elemecdn.com/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } // Your code here... })();
给掘金注入调试脚本
Proxy SwitchyOmega
是我用的时间最长的chrome插件。将Chrome的网络请求转到各种服务上的插件，比如Charles的启动的服务默认端口8888，就需要
ModHeader
ModHeader没啥说的，说几个骚操作，比如你需要下载一段js粘到项目里，或者下载一张cdn图片。你可以这样：
当然也可以配置cors
还有很多，比如ModHeader、JSON格式化、二维码生成、JSON对比、Vue/React状态查看插件等等就不一一列举了。
Charles
charles是个古老的debug工具，他太好用了。如果你还不会我建议你好好学学。阿里郎可以直接申请正版
抓包工具三部曲：
给电脑装ssl证书。你电脑跑着代理工具就相当于服务器了，电脑需要ssl证书跟手机发来的请求做握手请求交换数据
给自己手机装ssl证书。安卓手机放弃吧，想抓https需要应用放开口子。iPhone可以自己信任证书
给simulator装ssl证书。同手机
强烈安利的功能：
BreakPoint 接口断点调试，对于接口有超时设置比较短的情况无能为力
Rewrite 用于开发中把线上域名映射到本地localhost资源
Map Remote 接口中转，你拿到了一个线上页面地址，需要验证他预发环境的接口请求是否正常
Map Local 接口mock开发，需要处理本地文件请求跨域。缺点是charles不会帮你管理json文件
Export Session 导出给别人做接口请求参考，比如没有接口文档的情况下，导入进来就能看接口请求链路
Whistle
Charles的同质化应用，相比之下，Whistle优点很多，我建议你忘掉Charles，全心去拥抱他：
免费不用破解不用花钱，文档全，易用；
whistle是开源的，你可以给他写插件，且技术栈是nodejs；
映射规则配置简单，至少比Charles Rewrite的规则简单太多；
whistle甚至可以运行在server端做负载均衡，毕竟是nodejs程序，可以纯命令形式运行；
mock本地json文件，不需要处理本地问题cors，且可以帮你托管json文件；
charles有的功能，whistle基本都具备。charles没有的功能，whistle也具备。
也有缺点：
不适合大规模推广，比如你有个需求测试过程需要映射一个域名，或者mock一个response body，教会测试同学使用whistle的成本将会比Charles高不少。
推荐的功能：
包含以上Charles的推荐功能（BreakPoint功能是Whistle开箱不支持的，除非你安装插件）
Composer 用来重发请求、构造请求，可以自定义请求的url、请求方法、请求头、请求内容。一个微型postman。
Weinre 真机调试，审查元素
PostMan
chrome插件应用已经下线，现为web应用
推荐功能：Export导出接口
适合场景：前后端一起联调，后端把联调完完成的接口直接用PostMan导出，发送给前端，前端一边看着接口文档，一边使用PostMan验证接口信息
Simulator + Safari
适合场景：需要依赖App新开发的桥能力。模拟器+新debug包+Charles代理本地Server
Android ADB调试
非常好用的安卓真机调试方案，在安卓平台无可取代
需要下载 Android platform-tools 工具包
配置adb全局命令
开启手机的开发者模式（不同手机型号可能不同）
需要一根安卓数据线
使用 Chrome 访问 chrome://inspect
vConsole
vConsole本身没什么好讲的，h5应用调试利器，同质的应用还有eruda等。使用姿势可以推荐下：
页面document中，根据环境引入eruda并初始化
function envname() { try { var host = location.host; if (host.includes('nr.ele.me')) { return host.includes('ppe-') ? 'pre' : 'prod'; } if (host.includes('elenet.me')) { return 'daily'; } if (host.includes('be.dev.ele.me')) { return 'pre'; } return 'prod'; }catch(e) { return 'prod'; } } if(envname() !== 'prod'){ var script = document.createElement('script'); script.src="//npm.elemecdn.com/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } }
使用Whistle注入eruda
使用山海关Chrome插件直接注入eruda、vConsole等脚本
AppDevTools
内网发现的神器，为啥给他单独列一类拿来讲，因为看着类似Weinre，真机调试工具，真机调试在某些场景还是很重要。
https://aliyuque.antfin.com/apptools/appdevtools/about
小程序调试
除小程序开发者工具外，真机调试类似vConsole（需要打开开发者模式）
也可以使用Charles、Whistle这种抓包工具抓包
转一篇文良讲的安卓小程序真机Chrome调试
AntMan
https://aliyuque.antfin.com/antman/guide/about
饿了么App抓包神器，App开发+mist卡片抓包适用
Flipper
为新Hermes引擎定制的新一代RN调试工具。原调试神器RNDebugger已经无法适配最新的js引擎。可inspect元素、network请求、查看log等。
expo项目接入方式及效果图：
metro项目接入效果图
除使用Flipper调试RN应用之外，使用RN自带的chrome devTools 也可以，只不过无法抓包network请求，可以借助charles等工具。
VSCode
配合vscode调试功能，生成launch.json文件，可以指定process.env
三、写在最后
工欲善其事必先利其器。以上虽然不是每一个coder必备技能，却是很重要的软技能。掌握更多样化的调试技术，会提高我们解决问题的效率、打开思路开阔眼界。
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
