浏览器F12（开发人员调试工具）功能介绍

调试时最常用的功能页面是: ELements，控制台，源，网络等.

元素

查看元素代码: 如箭头（或使用快捷键Ctrl + Shift + C）进入选择元素模式，然后选择在页面上查看所需元素，然后可以在开发人员工具元素（元素）列中找到该元素的源代码的特定位置.

查看元素属性: 您可以从源代码中查看部分，例如class，src，也可以在右侧栏中查看所有属性，如下图所示.

修改元素的代码和属性: 您可以直接双击要修改的零件，然后对其进行修改，也可以选择要修改的零件，然后单击鼠标右键以对其进行修改，如下所示

注意: 此修改将仅对当前页面呈现生效，而不会修改服务器的源代码浏览器调试工具，因此此功能还用作调试页面效果.

右侧栏中的功能介绍: 如下所示

控制台

来源

网络

请求文件的详细信息:

总共四个模块:

打开浏览器，按F12，单击“网络”，您可以查看相关的网络请求信息，记得打开F12，然后刷新页面以开始记录.

查看基本的网络信息，请求的地址以及每个URL的网络相关请求信息: URL，响应状态代码，响应数据类型，响应数据大小，响应时间可以对请求URL进行过滤和分类: 选择不同的类别，查看请求URL，并使其更易于查找

您还可以直接过滤和查询相关的URL. 您可以输入关键字或正则表达式进行查询.

瀑布可以细分重要的请求耗时，查看特定请求的耗时在哪里，然后将鼠标悬停在相关区域上即可查看特定的耗时.

我们专门分析其中每个代表的含义以及花费的时间，然后使用它来分析服务器的哪一部分故障.

排队意味着排队

停转被阻止. 请求访问URL的主机具有并发性和连接限制. 它必须等待之前的执行，然后才能执行. 这个时间很耗时.

DNS查找是指域名解析所花费的时间

初始连接初始连接时间. 通常是TCP 3连接握手时间.

SSL https是一个协议.

请求发送时间花费在发送请求上

等待响应时间，这通常是最耗时的

下载内容所需的内容下载时间

使用JS控制浏览器F12和右键单击功能

从本文开始: 新太潮网络博客使用JS控制浏览器的F12和右键单击功能，以防止恶意代码窃取或其他直接复制. //禁用右键单击document.oncontextmenu = function（）{.

Chrome浏览器F12开发人员工具易于使用

1. 如何调出开发人员工具按F12键调出右键单击检查（或快捷键Ctrl + Shift + i）调出2.开发人员工具介绍了chrome开发人员工具最常用的四个功能模块: 元素（ELements ）. 控制台（Conso ...

Chrome浏览器F12开发人员工具的一些提示摘要

1. 直接修改页面元素选择页面上的元素，右键单击“检查”，将打开开发者工具窗口，显示当前选定元素的源代码，您可以双击进行修改. 如果还有更多要修改的内容浏览器调试工具，则可以折叠元素并单击以选择，然后右键单击“编辑为HTML”以修改...

[F12] Google Chrome F12前端调试工具控制台

Google Chrome F12前端调试工具的控制台. 前言首先，我不知道有多少人在浏览器开发工具的“控制台”上找到百度首页. 有关百度招聘的信息: 我今天想向您介绍的是Web前端调试工具中的C ...

Chrome浏览器F12上的说明

Chrome与其他浏览器相比功能相对强大. DevTools（开发人员工具）非常强大. 本课将向您展示如何使用Chrome的开发人员工具进行HTTP请求分析. ...

企业IT管理员IE11升级指南【17】-F12开发人员工具

企业IT管理员IE11升级指南系列: [1]-Internet Explorer 11增强保护模式（EPM）简介[2]-Adobe Flas的Internet Explorer 11 ...

＆lbrack;翻译和rsqb; AngularJS 1＆期间; 3＆期间; 0开发人员指南和lpar;一＆rpar;-简介

[翻译] AngularJS 1.3.0开发人员指南（1）-什么是Angular？ AngularJS是动态Web应用程序的结构框架. 它可以像模板语言一样使用HTML，并且可以扩展....

IE11的新F12开发人员工具

我讨厌调试，我相信没有多少开发人员会喜欢它. 但是，当代码错误时，绝对可以找出问题所在. 但是，在开发网页时遇到错误是很正常的事情. 我们不能保证代码的万无一失，因此我们使用浏览器...

Charles系列1: Charles功能介绍，下载安装和界面介绍

一个: Charles的主要功能介绍Charles是HTTP代理/ HTTP监视器/反向代理，使开发人员和测试人员可以查看计算机与Internet之间的所有HTTP和SSL / HTTPS通信，包括请求，响应. ...

＆lbrack;翻译和rsqb; AngularJS 1＆期间; 3＆期间; 0开发人员指南和lpar;一＆rpar;-简介（返回）

[翻译] AngularJS 1.3.0开发人员指南（1）-什么是Angular？角度...

[Turn] Apache Kafka监控系列-KafkaOffsetMonitor

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/dianqi/article-155145-1.html