Foreword
Usually heavy workload and busy, which means they will be accidentally write BUG when writing code. If the test is not measured once, to the existing network on the code is often the accident, many students at this time running around in circles, I do not know how to solve debugging. In this article mainly to talk about those methods usually used to debug the front, hoping to be able to help everyone.
BUG encountered how to do?
If you were a white front-end, you are the most commonly used testing method should be directly log in to write a code, for example:
console.log ( 'debug information, output:', test) copy the code
The method is simple and crude, but it is practical and simple. However, if the BUG is very complex, involving cross-component and even the source code, using play log way to become very cumbersome; while more experienced students in the face of complex issues may take the following methods to locate and debugging:
Break point
charles capture
Do not see a problem, we have to make a break it ~
Encounter BUG, our first instinct is usually open the console, point to open a look at the Console
Typically, if there is an error, we can directly point to go directly to the source at break point
If the console is not being given, but there is a problem that the code logic we supposed to do? As long as we add a debugger in the code on the line, for example:
...created () { debugger
this.init()
this.doSomething()}
...
复制代码
F12 after opening the Debugging Tools refresh the page, it will stop at a breakpoint created in the. Of course, just do a simple example, the actual situation is more complex when the stack on the right lets you see the call sequence, generally able to find the problem the call stack.
If the break point still can not find the problem, we can review the code and consider the following questions:
Whether or not there is an abnormality interface data
If the code has been submitted to the current network environment
If the interface data is abnormal returns, that is certainly not what we do, but if the code is not submitted or the wrong tag caused the accident, the accident will be re-set on embarrassing ...
charles how to solve our problem?
通常碰到 BUG，我们会先从 master 拉一个 fix-bug 的分支。我们复现、解决 BUG 的前提是调试环境需要跟现网保持一致，具体如下：
代码跟现网保持一致
接口能力跟现网保持一致
非常理想化的情况下，我们拉下来的 fix-bug 分支可以直接代理到现网，这样一来可以极大提高复现 BUG 的可能性，从而解决它。
...devServer: { proxy: {
'/api': { target: 'https://你的现网域名', changeOrigin: true, ws: true, pathRewrite: {
'^/api': ''
}
}
}}复制代码
然而，现实情况往往不会这么理想。我们有时候会被“安排”维护一些老项目，由于历史原因这些老项目往往不能用本地开发代理来进行调试，这时候就可以用到一个神器 ———— charles
charles的作用
抓取目标的 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
【番外】实在定位不到问题怎么办？
能够用调试工具定位出来的问题都不算问题，相信很多前端的同学都有这种感觉。有这么一些疑难杂症，我们很难去定位、解决，况且一般给到我们的时间非常紧，这种时候应该怎么办呢？我总结了如下方法：
到社区上寻求帮助
向你身边的同事求助
常用到的网站：
百度
google
stackoverflow
segmentfault
当然，无论是跟同事求助，还是到社区上寻找解决方案，你都要事先整理好这些：
清晰的描述问题所在
提供可复现的环境
提供核心代码
Finally, in case the problem is not resolved, you have to find a compromise solution.
data
The following information is available:
TBS official documents
charles official website
google debug document
to sum up
There are a lot of front-end debugging methods, know which method is very important, but the most important thing is to be able to use the most appropriate solution under different scenarios.