浏览器调试在前端开发中是必不可少的，刚接触前端的同学不清楚到底是干啥的，我们先讲讲浏览器调试它能帮我们干什么呢？
可以查找页面元素，可以看到当前元素的样式。如果页面布局有问题，我们就可以通过调试很快找到原因。可以调试javaScript，在控制台中查看调试日志和异常信息。可以查看网站html、js、css源代码，给js代码添加断点等。网页前后端数据请求时，可以查看发送数据和返回数据等信息。点击f12就可以打开浏览器的调试模式。打开界面如图所示：
上边几个菜单我们主要看下列几个：
元素(element)：用于查看html元素，css属性、监听事件、断点。控制台(console)：用于执行一次性代码，查看javascript对象、调试日志或异常信息。源代码(source)：用于查看html、css、js源代码，在此处可以调试js、打断点等。网络(network)：查看前端请求后台时详细信息。元素：查看代码时点击空色框中按钮
点击之后按钮会变成蓝色，进入选择元素模式，然后在网页上点击元素，选中之后调试模式中会自动展示当前元素的html和css信息，并且退出选择模式。
控制台：查看js异常信息和日志，也可以执行js。输入如下js代码，然后点击回车。就会执行。
源代码：如下图所示，可以看到所有文件以及所在目录，还有文件的源代码。
对于js文件，还可进行调试、断点等。
网络：如图所示网络模式下，具体信息：
网络内又有四个模块：
标头(header)：列出请求资源的url，