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

╰半橙微兮° 2022-04-12 14:22 1172阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]

如图，可以看到页面中分别有`Elements`、`Console`、`Sources`、`Network`、`Performance`、`Application`、`Memory`等标签页。

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

## Console ##

### 介绍 ###

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

### `Console.log()` ###

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

![在这里插入图片描述][20181204090012680.png]

### 利用控制台调试`JavaScript`脚本 ###

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

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

## Network ##

### 介绍 ###

`Network`，即网络。这里表示是`Http`请求执行的记录。  
以百度为例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]

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

最常用的`Headers`和`Preview`。

### `Headers` ###

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

### `Preview` ###

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

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

## `Elements`和`Source` ##

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

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

### 调试源代码 ###

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

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

## `Application` ##

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

## 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][http_www.eknown.cn]
 *  Github: [https://github.com/laolunsi][https_github.com_laolunsi]
 *  CSDN: [https://blog.csdn.net/qq\_28379809][https_blog.csdn.net_qq_28379809]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]: /images/20220412/f181d575cef94b39b4d104ea883062cb.png
[20181204090012680.png]: /images/20220412/d91566fdcd524a37aae4d794d0e45c7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]: /images/20220412/98c003e5d89947b7b1dc27ff7081e0e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]: /images/20220412/3bb768b44d9f4436939182b3ccaa241f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 3]: /images/20220412/00ba8e6c509444afa67cdc43f6847b43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 4]: /images/20220412/0f346275929d461bb81c5111f248c301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 5]: /images/20220412/89bca8211eb440049c9dac11639a62aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 6]: /images/20220412/c54fe54016af4aef99dcfc7d46c9d307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 7]: /images/20220412/d33fd0c32e9b47a19bd8b6ffe22e0004.png
[http_www.eknown.cn]: http://www.eknown.cn
[https_github.com_laolunsi]: https://github.com/laolunsi
[https_blog.csdn.net_qq_28379809]: https://blog.csdn.net/qq_28379809