前端_调试工具_Chrome Devtools

目录

一、上左侧菜单功能

1.选择功能

2.手机/电脑 显示切换功能

3.内存

4.元素

5.控制台

6.源代码/来源

7.网络

8.应用

9.性能

10.安全

11.Lighthouse

12.记录器

13.性能数据分析

二、上右侧菜单功能

1.警告

2.设置

3....更多功能


谷歌浏览器自带了调试工具Chrome Devtools,专为开发者设计,用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素,到深入的性能分析和网络通信追踪。

首先将项目运行起来,使用谷歌浏览器打开项目。然后打开调试工具,有下面四种方法:

        ①点击F12

        ②鼠标右键->检查

        ③左键点击浏览器右上角三个点->更多工具->开发者工具

        ④快捷键,ctrl+shit+i

打开后显示如下:

位置选择:

 

如果是新手那么暂时只需要用到:

一、1.选择功能

一、2.手机/电脑 显示切换功能

一、4.元素

一、5.控制台

一、7.网络

二、3...更多功能

下面我们分区介绍一下所有功能:

一、上左侧菜单功能

上左侧共有13个按钮下面依次介绍一下:

1.选择功能

当我们点击这个按钮后,点击页面中我们想查看元素的地方,调试工具就会跳转到元素功能,显示出当前选择区域的元素。

项目网页选择(我以百度项目网页为例):

调试工具显示:

2.手机/电脑 显示切换功能

在做项目时,有时是webPC端,有时是web移动端,这时就需要使用这个切换功能。

默认是电脑端项目:

如果是移动端项目,我们点击按钮:

此时项目网页显示:

3.内存

清空数据按钮:

  1. 堆快照: 堆快照工具可以捕获网页的内存快照,并提供详细的内存信息和统计数据。通过分析堆快照,开发人员可以了解对象的内存占用情况、对象之间的引用关系以及潜在的内存泄漏问题。开发人员可以使用快照对比功能,比较不同时间点的快照,以便追踪内存变化和检测内存泄漏。

  2. 内存分配(Allocation)面板: 内存分配面板提供了对网页内存分配情况的实时监测和分析。开发人员可以查看每个 JavaScript 对象的内存使用量,并按照构造函数或原型进行分组。这样可以快速找到内存占用较高的对象,并识别潜在的内存问题。

  3. 时间轴上的分配插桩: 内存时间轴工具可以显示网页在时间轴上的内存使用情况。开发人员可以通过查看内存时间轴,找出内存使用量过高的时间段,并分析导致内存增长的原因。这有助于定位内存泄漏和优化内存使用的关键代码片段。

  4. 内存分析技巧:

  • 关注对象生命周期:注意对象的创建和销毁过程,确保不会产生无用的对象引用,从而减少内存占用。
  • 避免循环引用:当对象之间存在循环引用时,会导致内存泄漏。及时清除不再使用的引用,以避免这种情况的发生。
  • 优化大对象:大对象占用过多的内存资源。优化大对象的创建和使用方式,可以减少内存占用和提升性能。
  • 使用缓存和释放资源:对于一些需要频繁创建和销毁的资源,可以使用缓存来避免重复创建,同时在不需要时及时释放资源。

通过结合使用上述内存分析工具和技巧,开发人员可以更好地定位和解决内存问题,提升网页的性能和响应速度。同时,内存优化也有助于减少功耗和提高设备的电池寿命。

4.元素

显示当前页面元素,可以和按钮1配合使用,显示想找到的元素。

5.控制台

可以使用代码在控制台输出一些内容,方便调试。

let name = "孙悟空"
console.log("name",name)

此时控制台输出:name孙悟空

6.源代码/来源

当控制台显示哪部分代码报错,我们点击代码提示,就会跳到源代码,可以定位报错位置,方便我们查找错误。

7.网络

发送的请求,都是在这里查看,还可以自己设置网速。

点击任意一个请求后:

8.应用

9.性能

点击录制,进行性能分析:

分析报告:

10.安全

HTTPS为您的网站提供关键安全和数据完整以及用户的隐私数据信息。使用Chrome DevTools中的Security(安全)面板可以调试安全隐患,并确保您已在网站上正确实施HTTPS。

11.Lighthouse

Lighthouse 用于分析网络应用和网页,收集现代性能指标并提供对开发人员最佳实践的意见。为 Lighthouse 提供一个需要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。


①导航模式(默认)    

用处:获取性能分数和所有性能指标。评估渐进式 Web 应用功能。在页面加载后立即分析可访问性。    

局限性:无法分析表单提交或单页应用转换。无法分析在页面加载时无法立即提供的内容。

②时间跨度模式    

用处:测量某个时间范围内的布局偏移和 JavaScript 执行时间,包括交互。发现性能机会,以改善长期存在的页面和 SPA 的体验。    

局限性:不提供总体性能分数。无法分析基于时刻的性能指标(如:最大内容绘制)。无法分析页面状态问题(如:没有无障碍功能类别)

③快照模式    

用处:分析当前状态的页面。查找 SPA 或复杂表单深处的可访问性问题。评估隐藏在交互后面的菜单和 UI 元素的最佳实践。    不

局限性:提供总体性能分数或指标。无法分析当前 DOM 之外的任何问题(如:没有网络、主线程或性能分析)。

报告:

12.记录器

实现 录制、重播和分享 你在浏览器触发的行为

  • 记录用户在浏览器中的操作,包括点击、输入、滚动等。
  • 生成可交互的回放脚本,可以在 DevTools 中回放。
  • 支持多种回放速度,方便开发者快速定位问题。
  • 可以导出记录的数据,以便于分享和存档。

13.性能数据分析

二、上右侧菜单功能

1.警告

当前页面有警告就会显示在这里

2.设置

可以自行设置偏好或快捷键等。

3....更多功能

如图所示可以设置调试工具网页位置或者其他内容。

以上就是本文内容,大致讲解了一下谷歌调试,不够细致,后期会针对主要功能出一篇文章详细讲解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/23577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Google Guice超轻量级依赖注入容器

Google Guice是Goolge开源的一款超轻量级依赖注入容器,超轻量的特点主要体现在:可与其它依赖注入容器混合使用,例如和Spring/Spring Boot的IOC容器混合使用;不需要任何配置信息,只需要引入几个有限的依赖包即可以使用&…

无线和移动网络

背景 两个重要的挑战 无线:通过无线链路通信移动:需要网络处理移动(不同变换所接入的网络)用户 无线网络中的组件 无线主机(无线并不总是意味着移动的)基站(base station 或者叫AP&#xff0…

知乎知+广告推广开户充值的返点政策是怎样?

如何让您的品牌精准触达目标受众,实现高效传播与转化,成为了每一位市场人面临的挑战。为此,云衔科技作为业界领先的数字营销解决方案提供商,正式宣布全面支持知乎知广告开户及一站式代运营服务,旨在帮助各行业客户在知…

网鼎杯 2020 玄武组 SSRFMe

复习一下常见的redis主从复制 主要是redis伪服务器的选择和一些小坑点 <?php function check_inner_ip($url) { $match_resultpreg_match(/^(http|https|gopher|dict)?:\/\/.*(\/)?.*$/,$url); if (!$match_result) { die(url fomat error); } try { …

【iOS】——Runtime学习

文章目录 一、Runtime介绍二、Runtime消息传递三、实例对象、类对象、元类对象四、isa_t结构体的具体实现五、cache_t的具体实现六、class_data_bits_t的具体实现七、Runtime消息转发动态方法解析备用接收者完整消息转发 一、Runtime介绍 iOS的Runtime&#xff0c;通常称为Obj…

带你了解消防安全与应急救援,2024北京消防展6月盛大开启

带你了解消防安全与应急救援&#xff0c;2024北京国际消防展6.26盛大开启 在日益关注安全问题的今天&#xff0c;消防安全与应急救援已经成为社会发展的重要一环。为了提高全民消防安全意识&#xff0c;推动应急救援技术的发展&#xff0c;2024年北京国际消防展将于6月26日盛大…

纷享销客安全体系:物理与环境安全

纷享销客的物理设备托管在经过严格准入制度授权的TIER3级别以上的专业数据中心&#xff0c;这些数据中心均通过了等保三级与IS027001安全认证&#xff0c;确保电力、制冷等基础设施提供相应级别的冗余&#xff0c;以增强IDC环境的安全性。 业务操作系统平台采用当前广泛使用的…

点云获取pcl点云以某个点云的已经分块得区域的交集

首先将点云分块得到区域后&#xff0c;获取每个块的box的最大最小点云&#xff0c;然后提取box内的点云。 pcl::IndicesPtr indexes(new pcl::Indices());pcl::getPointsInBox(*cloud_1, min_pt, max_pt, *indexes);// --------------------------取框内和框外点--------------…

手持终端RFID电子标签读写器超高频手持机

RFID手持机具备RFID读写功能&#xff0c;可以对RFID标签进行识读&#xff0c;是有特定功能的PDA(便携式移动终端)。 作为现代化信息管理工具的重要组成部分&#xff0c;其强大的功能和便捷的操作性正在越来越多的领域得到应用。从物流仓储到零售管理&#xff0c;从生产制造到医…

OZON海关税费是多少,OZON要交关税吗

在跨境电商领域&#xff0c;OZON作为俄罗斯知名的电商平台&#xff0c;吸引了众多国内外商家的目光。然而&#xff0c;当商家考虑在OZON平台上开展业务时&#xff0c;一个不可回避的问题就是海关税费和关税问题。本文将详细探讨OZON海关税费的相关内容&#xff0c;帮助商家更好…

使用C++实现YOLO图像分类:从环境搭建到性能评估的完整指南

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

面试题------>JVM虚拟机!!!

一、Java对象内存布局 二、JVM 内存结构 程序计数器: 线程私有的(每个线程都有一个自己的程序计数器),是一个指针.代码运行,执行命令.而每个命令都是有行号的,会使用程序计数器来记录命令执行到多少行了.记录代码执行的位置. Java虚拟机栈: 线程私有的(每个线程都有一个自己…

Vitis HLS 学习笔记--接口聚合与解聚-AXI主接口

目录 1. 简介 2. 用法及语法 3. 详细解读 4. 总结 1. 简介 在使用 Vitis HLS 工具进行硬件设计时&#xff0c;如果你在接口上使用了结构体&#xff0c;工具会自动把结构体里的所有元素组合成一个整体。就像把一堆零件组装成一个玩具一样。这样做的好处是&#xff0c;数据可…

mysql中 redo日志(上)

大家好。我们知道InnoDB 存储引擎是以页为单位来管理存储空间的&#xff0c;我们进行的增删改查操作其实本质上都是在访问页面。而在真正访问页面之前&#xff0c;需要把在磁盘上的页缓存到内存中的Buffer Pool之后才可以访问。那么我们思考一个问题&#xff1a;如果我们只在内…

沃通CA参与《证书透明规范》及《自动化证书管理规范》两项商密标准制定

沃通CA加入由零信技术牵头的两项商密标准《证书透明规范》及《自动化证书管理规范》编制工作。沃通CA作为国内依法设立的电子认证服务机构与领先的SSL证书服务商&#xff0c;很荣幸参与到两项商密标准的编制工作中&#xff0c;不仅提供多年SSL证书领域的应用经验&#xff0c;还…

AUTOSAR网络管理报文(学习笔记)

文章分为三个部分来 简绍AUTOSAR的网络管理的优点或缺点 AUTOSAR全称AUTomotive Open System ARchitecture&#xff08;汽车开放系统架构&#xff09;。有一点需要注意 注意看全称中的英文大写部分&#xff0c;写全称时必须要按照上面的格式写&#xff0c;不能只写首字母大写…

--- JAVA 多态 ---

多态&#xff0c;顾名思义就时有多种形态&#xff0c;那咋样才嫩共有多种形态呢&#xff0c;再java中就是用不同的对象去调用同一个方法&#xff0c;产生了不同的结果。 看这段代码&#xff0c;我调用的是同一个方法&#xff0c;且只是传入的对象的不同&#xff0c;但是产生了不…

Linux网络服务之SSH(远程访问及控制)

ssh远程管理&#xff1a; ssh是一种安全通道协议&#xff0c;用来实现字符界面的远程登录。远程复制&#xff0c;远程文本传输。 ssh对通信双方的数据进行了加密 用户名和密码登录 密钥对认证方式&#xff08;可以实现免密登录&#xff09; ssh 22 网络层 传输层 数据传输…

【成品设计】基于红外线的目标跟踪无线测温系统设计

《基于红外线的目标跟踪无线测温系统设计》 整体功能&#xff1a; A端&#xff1a;无线跟踪端 主控&#xff1a;采用STM32F103C8T6单片机作为核心控制。360度编码模块数字脉冲输出红外解码编码模块OLED屏幕。 B端&#xff1a;无线待测端 主控&#xff1a;采用STM32F103C8T…

C语言杂谈:函数栈帧,函数调用时到底发生了什么

我们都知道在调用函数时&#xff0c;要为函数在栈上开辟空间&#xff0c;函数后续内容都会在栈帧空间中保存&#xff0c;如非静态局部变量&#xff0c;返回值等。这段空间就叫栈帧。 当函数调用&#xff0c;就会开辟栈帧空间&#xff0c;函数返回时&#xff0c;栈帧空间就会被释…