原文：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

js调试技巧之活用浏览器F12相关推荐

【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
一探前端开发中的JS调试技巧
转自:http://seejs.me/2016/03/27/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E4%B8%80%E6%8E%A2%E5%89%8D%E7%AB% ...
学习前端开发中的JS调试技巧(断点)
http://seejs.me/2016/03/27/jsdebugger/ alert() console.log(xxxx) JS断点调试 JS断点调试,即是在浏览器开发者工具中为JS代码添加断点 ...
js调试技巧（通过debugger调试）
通常我们在网站开发的过程中会用到很多JavaScript代码, 来进行调试,调试方法有很多,以前用的是火狐浏览器的调试工具,但是后来版本等等的原因不能用了, 现在就用debugger在谷歌浏览器中进行 ...
Chrome JS断点调试技巧
Chrome调试折腾记_(2)JS断点调试技巧技巧一:格式化压缩代码技巧二:快速跳转到某个断点的位置技巧三:查看断点内部的作用范围[很实用] 技巧4:监听事件断点技巧5:DOM及 XHR监听跳 ...
最全面的JavaScript调试技巧总结
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
php和js调试,JS调试使用详解
这次给大家带来JS调试使用详解,JS调试的注意事项有哪些,下面就是实战案例,一起来看一下. 试想一下:出现了某个bug,有人用几分钟就搞定了,有人用了半天或者一天都找不到原因所在.你愿意当前者还是后者 ...
js_调试_01_14 个你可能不知道的 JavaScript 调试技巧
更快更高效地调试你的 JavaScript 了解你的工具在完成任务时有很重要的意义. 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了. ...

js调试技巧之活用浏览器F12