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

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

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

【打开浏览器空白页的命令about:blank

about:blank是打开浏览器空白页的命令——内置在浏览器中的命令，可以打开浏览器空白页（没有任何内容）。在Firefox、Chrome、Edge、Safari等浏览器的地址栏输入about:blank回车将打开浏览器空白页，打开浏览器但没有保留任何上次浏览会话中的任何内容。这实现了在没有网络的情况下即可启动浏览会话，又因为它是空白的，这给了你更多的自由来决定你这次用它做什么。

】

浏览器控制台（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键

参见下图：

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

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

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

步骤:

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

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

直接按F12。

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

3、重新加载页面。

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

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

Edge Microsoft Edge开发人员工具概述 - Microsoft Edge Development | Microsoft Docs

Chrome Chrome 开发工具指南_w3cschool

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

Firefox Firefox 开发者工具 | MDN

浏览器的开发者工具使用介绍相关推荐

浏览器F12开发者工具
浏览器F12开发者工具 1.介绍 2.工具附录 1.介绍 F12常用于网站界面测试.调试,分析问题,查看HTML元素.查看响应事件和数据等,还可帮助测试工程师定位前后端Bug: 其中使用最多的功能页 ...
浏览器开发者工具控制面板介绍
目录一.打开方式 1. 按 F12 或者 Control + Shift + i (PC)/ Command + Option + i (Mac). 2. 浏览器菜单选择"工具/开发 ...
谷歌浏览器开发者工具标签介绍
谷歌浏览器开发者工具标签介绍: 一般在windows系统上浏览器开发者工具打开都是按F12快捷键. ==>Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可 ...
【Python】Chrome浏览器F12开发者工具使用
研究爬虫时经常要到这个工具,转载一篇,以后方便查阅. 转自:https://www.cnblogs.com/yaoyaojing/p/9530728.html 侵删,谢谢 1.如何调出开发者工具按F ...
edge等浏览器打开开发者工具（F12）之后在NetWork看不到请求头等信息
问题打开调试器,F5刷新页面后出现下面这种情况没有出现资源等想要的信息(注:从参考1里面得到如下图) 解决方法 1.打开Edge浏览器里面的调试器的设置 2.重置默认并刷新即可注:chrome浏览 ...
渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码（实现绕过）
文章目录前言一.JS前端的修改前言最近学习了一些有关于JS脚本搭建网站方面的安全知识.通常来说JS是前端的页面代码,因此我们可以直接修改前端的JS代码来实现绕过,故我试着做了一下利用浏览器的开 ...
chrome等浏览器打开开发者工具（F12）之后在NetWork看不到请求头等信息
chrome等浏览器打开开发者工具(F12)之后在NetWork看不到请求头等信息 has blocked cookie不要勾选
win7系统ie11浏览器为什么开发者工具一片空白
win7系统ie11浏览器为什么开发者工具一片空白实际上,因为win7系统中少了一个补丁包,大家可以去官网直接下载补丁包,下载完成后双击下载下来的程序会提示需要安装,更新电脑,然后重启. 下载官方链 ...
微信小程序零基础入门_第一章小程序和开发者工具的介绍
第一章小程序和开发者工具的基本介绍 1.1 小程序的开发工具微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...

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

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

浏览器的开发者工具使用介绍相关推荐

最新文章

热门文章