浏览器的开发者工具使用介绍

分手后的思念是犯贱 2022-09-16 08:49 1130阅读 0赞

### 浏览器的开发者工具使用介绍 ###

浏览器开发者工具（通常称作devtools）是一种网页开发者测试和调试代码的工具，一般内置于网页浏览器或者作为浏览器的附加组件使用。不同于网站创建器或者集成开发环境，Web 开发工具不直接参与网站的创建，而用于测试网站或网页应用的用户界面。Web 开发工具便于开发人员调试各种浏览器网页处理技术，例如HTML、CSS、DOM、JavaScript，显示每个资源页面的请求以及载入所花费的时间等。

打开浏览器后，按下F12键，可以打开浏览器自带的开发工具，它有多个面板。Microsoft Edge浏览器的参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16][]

**浏览器控制台（Console）使用简介**

浏览器的“开发者工具”（Developer Tools）里面的“控制台”（console），是运行 JavaScript 代码的理想环境。打开浏览器，按下 F12键，然后选择 “控制台”（console） 面板，就进入了控制台。进入控制台以后，就可以在提示符后输入代码，然后按回车（Enter键），代码就会执行。如果按Shift + Enter键，就是代码换行，不会触发执行。

在浏览器控制台中输入多行语句示例：

let x=2 //按shift+enter键

let y=5  //按shift+enter键

console.log('和：',x+y)  //按enter键

参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16][]

**特别提示：**在浏览器控制台中使用console.log()语句，如console.log("Hello")，没有显示的原因及解决：

原因筛选框中有内容，删除之即可，参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

**如何在浏览器中查看HTTP请求或响应头？**

步骤:

1、用浏览器（在此以 Edge为例），访问一个网址（在此以https://www.baidu.com/为例），用如下操作之一：

点击右键，选择检查，打开“开发人员工具”；

直接按F12。

2、选择 Network（网络） 选项卡。

3、重新加载页面。

4、单击“名称”格的HTTP请求，在“标头（Headers）”格中显示相关信息。参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**附录：**主要浏览器开发者工具参考网址

**Edge** [Microsoft Edge开发人员工具概述 - Microsoft Edge Development | Microsoft Docs][Microsoft Edge_ - Microsoft Edge Development _ Microsoft Docs]

**Chrome** [Chrome 开发工具指南\_w3cschool][Chrome _w3cschool]

【Microsoft的Edge浏览器基于Chromium（由Google主导开发的网页浏览器）开发的，Microsoft的 Edge浏览器和Google的Chrome浏览器开发者工具差不多。】

**Firefox** [Firefox 开发者工具 | MDN][Firefox _ _ MDN]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1af4a6a536ba48278912180d27539ffd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c0b2ab1219504268bfa3868038e5ed7a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/74120c7a1fa7442c97f4bb369092a139.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv54ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/2d4ab57fbe794834b1cbf9e55a89ecd7.png
[Microsoft Edge_ - Microsoft Edge Development _ Microsoft Docs]: https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/
[Chrome _w3cschool]: https://www.w3cschool.cn/chromedevtools/
[Firefox _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Tools