【干货】前端进阶应该知道的这些调试方法

前言

平时工作量大并且很忙，也就意味着难免会在写代码的时候一不小心写出BUG。如果测试一旦没有测到，代码上到现网往往就是事故，很多同学在这种时候手忙脚乱，不知道怎么调试解决。本文就这点主要讲一下平时前端调试用的那些方法，希望能够给到大家帮助。

遇到了BUG怎么办？

如果你还是个前端小白，你最常用的调试方法应该是直接在代码中写下一个 log，例如：

console.log('调试信息，输出：', test)

方法虽然简单粗暴，但是它是实用且简单的。然而，如果 BUG 十分复杂，涉及到跨组件甚至是源码，采用打 log 的方式就变得十分麻烦了；
而比较有经验的同学在遇到复杂问题的时候可能会采取以下方法来定位、调试：

• 打断点
• charles 抓包

看不出来问题，我们来打个断点吧~

遇到 BUG，通常我们第一直觉是打开控制台，点开看一下 Console

通常，如果存在报错，我们可以直接点进去到源码处直接打断点

如果控制台没有报错，只是代码逻辑出现了问题那咋办呢？我们只要在代码中加个 debugger 就行了，举个例子：

...
created () {
   debugger
   this.init()
   this.doSomething()
}
...

F12 打开调试工具之后刷新页面，断点就会停在 created 里了。
当然，这里只是做简单的示例，实际情况更加复杂的时候，右边的堆栈可以让你看到调用顺序，沿着调用堆栈一般也能找到问题所在。

如果打断点还是找不到问题，我们可以 review 代码并思考以下问题：

• 接口数据是否存在异常
• 代码是否已提交到现网环境

如果是接口数据异常返回了，那当然没我们什么事情了，但是代码如果没有提交或者打错tag引起的事故，那么事故复盘会就尴尬了...

charles 怎么解决我们的问题呢？

通常碰到 BUG，我们会先从 master 拉一个 fix-bug 的分支。我们复现、解决 BUG 的前提是调试环境需要跟现网保持一致，具体如下：

• 代码跟现网保持一致
• 接口能力跟现网保持一致

非常理想化的情况下，我们拉下来的 fix-bug 分支可以直接代理到现网，这样一来可以极大提高复现 BUG 的可能性，从而解决它。

...
devServer: {
    proxy: {
        '/api': {
            target: 'https://你的现网域名',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
        }
    }
}

然而，现实情况往往不会这么理想。我们有时候会被“安排”维护一些老项目，由于历史原因这些老项目往往不能用本地开发代理来进行调试，这时候就可以用到一个神器 ———— charles

charles的作用

• 抓取目标的 javascript 文件，用本地打包后的 javascript 文件替换它
• 每次更改 javascript 文件后，只要手动刷新页面即可生效

怎么抓包？

步骤：

1. 下载charles
2. 安装证书
3. 刷新页面并让它显示需要抓取页面的域名/ip，找到需要替换的js
4. 选中需要替换的 js，右键Map Local跟本地相应的 js 对应

当然了，网上关于 charles 抓包的教程已经很多了，这里只是简单写下步骤。大家自行到 google 或者百度上搜索以下关键词即可：

• charles 抓包
• charles 安装证书

比较麻烦的就是，每次更改需要刷新页面才能看到效果。

移动端的调试

移动端的问题处理起来有时候真的很心累，尤其是 ios 上 safari 的兼容性问题，当然这里不会展开讲

1. charles 抓包调试

charles 抓包调试还是很常见的方法，但是现在在安卓7.0及以上已经抓不到了，不过使用 ios 系统的小伙伴依然可以抓到包。需要注意的是，如果遇到小程序上的支付问题，由于 ios 在小程序上存在支付限制，用起来反而会显得掣肘。
对于喜欢折腾的同学，安卓上的抓包问题已经有解决方案了。

1. 真机调试

工具：

• Google 浏览器

Google 浏览器是具有真机调试功能的，这里有详细的教程，本文就不展开讲了。

• TBS

腾讯出的一款基于 X5 内核的真机调试工具，只要连上数据线就完事了，也可以调试微信H5。
然而之前在这里查看到相关问答和说明 ，现在的小程序上的内核已经改变，使用TBS已不能调试。

• 微信开发者工具

微信开发者工具具有真机调试的功能，然而，在实际环境中，首先你要有开发者权限才行。

小结：能够直接用真机调试的尽量用真机调试，不管是样式还是代码逻辑都能快速定位并解决。

1. 微信开放社区

微信小程序上有时候会出现一些奇特的 BUG，往往跟我们的代码逻辑完全没有关系，这种时候应该到微信的开放社区上及时反馈BUG。点击这里查看微信开放社区。

1. 在PC端浏览器上调试（前提：不是微信H5或者小程序）

直接打 log 或者断点就行了，一般不用特意去抓包。

1. vconsole

我们在前端项目中安装 vcosole 插件（开发/测试环境下），那么就可以
可以在移动端中（小程序除外）查看 log 或者接口请求情况，一般用来快速定位问题，不建议用来调试很复杂的 BUG

【番外】实在定位不到问题怎么办？

能够用调试工具定位出来的问题都不算问题，相信很多前端的同学都有这种感觉。有这么一些疑难杂症，我们很难去定位、解决，况且一般给到我们的时间非常紧，这种时候应该怎么办呢？我总结了如下方法：

• 到社区上寻求帮助
• 向你身边的同事求助

常用到的网站：

• 百度
• google
• stackoverflow
• segmentfault

当然，无论是跟同事求助，还是到社区上寻找解决方案，你都要事先整理好这些：

1. 清晰的描述问题所在
2. 提供可复现的环境
3. 提供核心代码

万一问题最后还是没有解决，你得想一个折中的解决方案。

资料

以下资料可供参考：

• TBS官方文档
• charles官网
• google调试文档

总结

前端的调试方法有很多，知道有哪些方法很重要，但是最重要的还是能在不同的场景下采用最合适的方案。

交流

大家如果觉得觉得写的不错，可以点赞评论。扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。