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

前言平时工作量大并且很忙也就意味着难免会在写代码的时候一不小心写出BUG。如果测试一旦没有测到代码上到现网往往就是事故很多同学在这种时候手忙脚乱不知道怎么调试解决。本文就这点主要讲一下平时前端调试用的那些方法希望能够给到大家帮助。遇到了BUG怎么办如果你还是个前端小白你最常用的调试方法应该是直接在代码中写下一个log例如console.log(调试信息输出,test)方法虽然简单粗暴但是它是实用且简单的。然而如果BUG十分复杂涉及到跨组件甚至是源码采用打log的方式就变得十分麻烦了而比较有经验的同学在遇到复杂问题的时候可能会采取以下方法来定位、调试打断点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:}}}}然而现实情况往往不会这么理想。我们有时候会被“安排”维护一些老项目由于历史原因这些老项目往往不能用本地开发代理来进行调试这时候就可以用到一个神器 ————charlescharles的作用抓取目标的javascript文件用本地打包后的javascript文件替换它每次更改javascript文件后只要手动刷新页面即可生效怎么抓包步骤下载charles安装证书刷新页面并让它显示需要抓取页面的域名/ip找到需要替换的js选中需要替换的js右键Map Local跟本地相应的js对应当然了网上关于charles抓包的教程已经很多了这里只是简单写下步骤。大家自行到google或者百度上搜索以下关键词即可charles抓包charles安装证书比较麻烦的就是每次更改需要刷新页面才能看到效果。移动端的调试移动端的问题处理起来有时候真的很心累尤其是ios上safari的兼容性问题当然这里不会展开讲charles抓包调试charles抓包调试还是很常见的方法但是现在在安卓7.0及以上已经抓不到了不过使用ios系统的小伙伴依然可以抓到包。需要注意的是如果遇到小程序上的支付问题由于ios在小程序上存在支付限制用起来反而会显得掣肘。对于喜欢折腾的同学安卓上的抓包问题已经有解决方案了。真机调试工具Google 浏览器Google 浏览器是具有真机调试功能的这里有详细的教程本文就不展开讲了。TBS腾讯出的一款基于X5内核的真机调试工具只要连上数据线就完事了也可以调试微信H5。然而之前在这里查看到相关问答和说明 现在的小程序上的内核已经改变使用TBS已不能调试。微信开发者工具微信开发者工具具有真机调试的功能然而在实际环境中首先你要有开发者权限才行。小结能够直接用真机调试的尽量用真机调试不管是样式还是代码逻辑都能快速定位并解决。微信开放社区微信小程序上有时候会出现一些奇特的 BUG往往跟我们的代码逻辑完全没有关系这种时候应该到微信的开放社区上及时反馈BUG。点击这里查看微信开放社区。在PC端浏览器上调试前提不是微信H5或者小程序直接打log或者断点就行了一般不用特意去抓包。vconsole我们在前端项目中安装vcosole插件开发/测试环境下那么就可以可以在移动端中小程序除外查看log或者接口请求情况一般用来快速定位问题不建议用来调试很复杂的BUG【番外】实在定位不到问题怎么办能够用调试工具定位出来的问题都不算问题相信很多前端的同学都有这种感觉。有这么一些疑难杂症我们很难去定位、解决况且一般给到我们的时间非常紧这种时候应该怎么办呢我总结了如下方法到社区上寻求帮助向你身边的同事求助常用到的网站百度googlestackoverflowsegmentfault当然无论是跟同事求助还是到社区上寻找解决方案你都要事先整理好这些清晰的描述问题所在提供可复现的环境提供核心代码万一问题最后还是没有解决你得想一个折中的解决方案。资料以下资料可供参考TBS官方文档charles官网google调试文档总结前端的调试方法有很多知道有哪些方法很重要但是最重要的还是能在不同的场景下采用最合适的方案。交流大家如果觉得觉得写的不错可以点赞评论。扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号那么就可以第一时间收到我的最新文章。