空夜

js调试技巧之活用浏览器F12
在浏览器下按F12键,可以打开调试面板。如图,可以看到页面中分别有Elements、Console、Sources...
扫描右侧二维码阅读全文
04
2018/12

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

在浏览器下按F12键,可以打开调试面板。

在这里插入图片描述

如图,可以看到页面中分别有ElementsConsoleSourcesNetworkPerformanceApplicationMemory等标签页。

下面介绍一下各个标签页的作用和用法。

Console

介绍

控制台页面,在里面可以看到页面加载、响应中产生的错误(红色),警告(黄色)。如果HTML页面有语法或其他错误,可以到这边查看。

Console.log()

利用Console.log(),可以在页面加载或脚本执行时,在控制台打印输出。
比如我的HTML页面加载时,里面有一行代码Console.log("页面加载中...."),那么,页面加载时就会在控制台显示:

在这里插入图片描述

利用控制台调试JavaScript脚本

此外,Console页面可以用来执行JavaScript代码。
比如我想测试一下js中Date类的使用,包括如何初始化,如何赋值,如何转换格式等。那么我只需要在控制台区域书写相关脚本即可。
在这里插入图片描述

活用控制台,对于JavaScript的学习和使用是有很大帮助的。

Network

介绍

Network,即网络。这里表示是Http请求执行的记录。
以百度为例。
在这里插入图片描述

左侧Name区域,是请求的列表,其中对我们来说最有用的就是HTTP请求了。右侧是请求的具体情况,包括HeadersPreviewResponseCookiesTiming,一次表示请求本身、请求结果的格式化显示、请求结果、当前的Cookie列表、请求详细时间。

最常用的HeadersPreview

Headers

其实就是请求本身,包括请求头、请求参数(或body)。
从这里能够看到客户端的数据,比如浏览器的版本,还有请求的类型,是Get还是Post,参数类型等等。

Preview

这个算是更常用的一个界面吧。它展示的数据实际上和Response是一样的,只是前者自动把请求的返回值格式化显示了。
在这里插入图片描述

在这个界面可以看到,HTTP请求的返回值被以json的形式格式化了,非常利于我们观察数据、调试代码。

ElementsSource

这两个界面展示的都是代码,区别在于前者展示的是与界面相同的代码,所以在浏览器页面,鼠标右键--查看网页源代码,就会跳到这个界面上的指定位置。
在这里插入图片描述

Source界面则是源码,看上去就是未经过浏览器、框架进行一些修改操作的代码,也就是我们在编辑器中写的代码。这个界面的左侧像是一个文件夹列表,所以想要找到对应的源代码还需要一番功夫。
在这里插入图片描述

调试源代码

我们都知道,前端是极难进行调试的,我们大多只能依赖编辑器的代码提示,浏览器界面的异常或者Console控制台的报错或者输出,来判定前端代码的正确性。
其实,在浏览器中,我们还可以使用Source界面,对前端的源码进行调试。点击代码左侧(带有行号)处,就可以建立一个断点,当执行到这段代码时,就会触发断点,我们可以看到变量运行中的值。
在这里插入图片描述

需要注意的是:虽然在这个页面,我们可以给HTML、CSS、JavaScript都打上断点,但只有JavaScript的断点是起作用的。

Application

这个界面其实是一些存储在浏览器中的数据,包括Local StorageSession StorageCookies等。我们使用客户端脚本语言或者服务端语言保存至Cookie或Session的数据都会在这里显示出来。
在这里插入图片描述

Conclusion

总结一下,在浏览器的F12键启动的调试界面下,我们可以利用使用Console控制台观察输出或者学习JavaScript,利用Network观察HTTP请求的执行情况,利用Elements观察界面与代码的对应关系,利用Sources对代码进行调试,利用Application查看浏览器端保存的数据。

交流讨论

如果大家有兴趣,可以加入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:

Last modification:December 9th, 2018 at 05:04 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment