前端调试知识 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第5天前言想要写好一段代码，多数情况下免不了去使

这是我参与「第四届青训营」笔记创作活动的第5天

前言

想要写好一段代码，多数情况下免不了去使用调试工具，这些调试工具能高效帮助我们去找到bug

当我们做页面开发，浏览前开发工具可以更有效的帮助我们

可以动态的修改元素的内容和样式，浏览器会实时渲染。另外还可以添加标签，属性，和样式，几乎如同我们在编译器上操作

可调试javascript代码，使用一些常用的输出语句，控制台会输出相应的信息，程序员通过输出信息做出相应调整.

能看到页面关联的所有外部资源，可使用断点，查看变量等操作。

查看页面中涉及到一些网络请求。可以过滤请求、查看详细请求。

查看各个任务使用的时间，以及不同的任务所调用的线程、绘制时使用的层等。

分为真机调试和代理调试两类。

需要要将数据线连到电脑上，然后开启USB调试功能，在浏览器中打开远程调试选项。

原理：使用电脑作为代理服务器手机通过HTTP代理连接到电脑手机上的请求都经过代理服务器

可以用Chrome Devtool，VScode来进行调试