乐趣区

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

jiezi

前言

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

遇到了 BUG 怎么办？

比较有经验的同学都清楚，平时比较好用的方法有这些：

  • 打断点
  • charles 抓包

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

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


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


当然，这里只是做简单的示例，实际情况更加复杂的时候，右边的堆栈可以让你看到调用顺序，沿着调用堆栈一般也能找到问题所在。

如果打断点还是找不到问题，我们可以 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 文件后，只要手动刷新页面即可生效

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

移动端的调试

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

  1. charles 抓包调试

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

  1. 真机调试

工具：

  • Google 浏览器

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

  • TBS

腾讯出的一款基于 X5 内核的真机调试工具，只要连上数据线就完事了。可以调试微信 H5，但是由于现在小程序上的内核已经改变了，用 TBS 已经不能调试。点击查看官方文档。

  • 微信开发者工具

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

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

总结

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

交流

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

退出移动版