原文：https://blog.csdn.net/qq_28379809/article/details/84782692
在浏览器下按F12键，可以打开调试面板。
如图，可以看到页面中分别有Elements、Console、Sources、Network、Performance、Application、Memory等标签页。
下面介绍一下各个标签页的作用和用法。
Console
介绍
控制台页面，在里面可以看到页面加载、响应中产生的错误（红色），警告（黄色）。如果HTML页面有语法或其他错误，可以到这边查看。
Console.log()
利用Console.log()，可以在页面加载或脚本执行时，在控制台打印输出。
比如我的HTML页面加载时，里面有一行代码Console.log("页面加载中....")，那么，页面加载时就会在控制台显示：
利用控制台调试JavaScript脚本
此外，Console页面可以用来执行JavaScript代码。
比如我想测试一下js中Date类的使用，包括如何初始化，如何赋值，如何转换格式等。那么我只需要在控制台区域书写相关脚本即可。
活用控制台，对于JavaScript的学习和使用是有很大帮助的。
Network
介绍
Network，即网络。这里表示是Http请求执行的记录。
以百度为例。
左侧Name区域，是请求的列表，其中对我们来说最有用的就是HTTP请求了。右侧是请求的具体情况，包括Headers、Preview、Response、Cookies、Timing，一次表示请求本身、请求结果的格式化显示、请求结果、当前的Cookie列表、请求详细时间。
最常用的Headers和Preview。
Headers
其实就是请求本身，包括请求头、请求参数（或body）。
从这里能够看到客户端的数据，比如浏览器的版本，还有请求的类型，是Get还是Post，参数类型等等。
Preview
这个算是更常用的一个界面吧。它展示的数据实际上和Response是一样的，只是前者自动把请求的返回值格式化显示了。
在这个界面可以看到，HTTP请求的返回值被以json的形式格式化了，非常利于我们观察数据、调试代码。
Elements和Source
这两个界面展示的都是代码，区别在于前者展示的是与界面相同的代码，所以在浏览器页面，鼠标右键–查看网页源代码，就会跳到这个界面上的指定位置。
而Source界面则是源码，看上去就是未经过浏览器、框架进行一些修改操作的代码，也就是我们在编辑器中写的代码。这个界面的左侧像是一个文件夹列表，所以想要找到对应的源代码还需要一番功夫。
调试源代码
我们都知道，前端是极难进行调试的，我们大多只能依赖编辑器的代码提示，浏览器界面的异常或者Console控制台的报错或者输出，来判定前端代码的正确性。
其实，在浏览器中，我们还可以使用Source界面，对前端的源码进行调试。点击代码左侧（带有行号）处，就可以建立一个断点，当执行到这段代码时，就会触发断点，我们可以看到变量运行中的值。
需要注意的是：虽然在这个页面，我们可以给HTML、CSS、JavaScript都打上断点，但只有JavaScript的断点是起作用的。
Application
这个界面其实是一些存储在浏览器中的数据，包括Local Storage、Session Storage、Cookies等。我们使用客户端脚本语言或者服务端语言保存至Cookie或Session的数据都会在这里显示出来。
Conclusion
总结一下，在浏览器的F12键启动的调试界面下，我们可以利用使用Console控制台观察输出或者学习JavaScript，利用Network观察HTTP请求的执行情况，利用Elements观察界面与代码的对应关系，利用Sources对代码进行调试，利用Application查看浏览器端保存的数据。
Communication
如果大家有兴趣一起学习java技术，一起交流讨论，可以加入QQ群：701365388，目前基本没什么人气啦。嘿嘿。
Contact Me
If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list:
- Personal Site: http://www.eknown.cn
- Github: https://github.com/laolunsi
- CSDN: https://blog.csdn.net/qq_28379809
扫一扫
2672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
