这是我参与「第四届青训营」笔记创作活动的第9天
前言
作为一个写前端的人员，一定是需要调试前段代码的，那么这篇文章我们就一起来学习前段的代码调试技巧。
浏览器开发工具
如果我们是使用的是使用Chrome内核的浏览器，那么一定会有一个自带的开发工具可以使用。这个开发工具具有很多功能，我们一般常用的是下面这五大功能。
元素
我们在页面中选中特定的元素，就可以动态的修改元素的内容和样式，然后由浏览器实时渲染并呈现。还可以在其中给元素添加自己的类名和id等。
控制台
这个就类似于我们在其他语言中的控制台，可以像调试一般程序一样调试javascript代码，可以使用console.log、console.warn、console.error、console.info等方法向控制台输出信息，也支持格式化字符串等操作。
Sorce Tab
这里就是展示页面资源目录树的控制台，我们可以看到页面关联的所有外部资源，然后也可以在这里对其进行调试，也可以添加断点之类。添加断点和查看变量等操作就和其他的语言中的IDE是一样的了。
NetWork
这里是可以查看前端页面中涉及http请求等网络相关东西的地方。可以过滤请求、查看请求详情等。
Performance
这里就是比较与众不同的地方了。这里可以查看各个任务所花费的时间，以及不同的任务所调用的线程、绘制是所使用的层等。
移动端H5调试
伴随着移动互联网的发展，我们的页面不光会在电脑端使用，也会在移动端被使用，在移动端的调试就没有那么简单了。我们大概可以分为真机调试和代理调试两类。
真机调试
我们只需要将数据线连到电脑上，然后开启USB调试功能，在浏览器中打开远程调试选项就可以了。
代理调试
这种调试方式和上一个比就麻烦了一些，我们需要让电脑作为代理服务器，然后手机通过HTTP代理服务器连接到电脑，这样手机的所有请求都可以通过代理服务器进行。
Node.js调试
这种比较完善的框架调试起来就非常的简单，可以用Chrome Devtool，也可以使用VScode来进行调试，这里就不再赘述了。
总结
在调试的时候别忘了小黄鸭捏🥳