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

前端必须要知道的调试知识

前言

很多刚学习前端编程的小白，并没有充分了解到浏览器的使用可以给我们前端开发带来很多便利，接下来我以我的理解给小白们带来一些关于浏览器调试的相关内容。

我以Chrome浏览器为例，其他浏览器都是一样的。随意打开一个网站，这里我以百度为例，在百度首页鼠标右键点击检查，或者使用键盘上的F12，打开浏览器调试界面（下图黑色的部分）。

元素（element）右边第一个图标可以帮我们快速锁定我们的目标内容

元素（element）右边第二个图标可以让我们的网页改变尺寸也可以切换PC端和移动端

元素（element）可以展示当前网页的html和css的内容

控制台（console）输出调试信息和脚本执行
我们在script中编写一段代码

在我们的控制台（console）中就会输出上述代码的执行结果

断点调试 断点调试（Source）断点调试是每位程序员所必备的技能，合理的使用断点调试可以帮助程序员节省很多不必要的时间。

网络（Network）可以查看相关网络请求信息，请求了哪些地址及每个URL的网络相关请求信息都可以看的到。

以上内容就是最基础（也是最常用）的浏览器的调试功能的介绍了，掌握了这些知识，就可以应对在开发中绝大多数的问题。如果觉得以上不能满足你的需求，可以移步至Chrome的官方文档。