前端_调试工具_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....更多功能

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TPC-H建表语句(MySQL语法)

TPC-H测试集介绍 TPC-H(Transaction Processing Performance Council, Standard Specification, Decision Support Benchmark, 简称TPC-H)是一个非常权威数据库基准测试程序,由TPC组织制定。 TPC-H定义了一个包含8个表的模式(Sc…

亮数据代理IP助力高效数据采集

文章目录 📑前言一、爬虫数据采集痛点二、代理IP解决爬虫痛点2.1 为什么可以2.2 本篇采用的代理IP 四、零代码获取数据4.1 前置背景4.2 亮数据浏览器自动抓取数据4.3 使用步骤: 五、数据集5.1 免费样本5.2 定制数据集 🌤️个人小结 &#x1f…

力扣 503. 下一个更大元素 II

题目来源:https://leetcode.cn/problems/next-greater-element-ii/description/ C题解:因为是循环数组,所以对数组进行了两次遍历,相当于循环。使用了栈,一个存放元素,一个存放索引,用来更新res…

龙迅LT8712X TYPE-C或者DP转HDMI加VGA输出,内置MCU,只是IIS以及4K60HZ分辨率

龙迅LT8712X描述: LT8712X是一种高性能的Type-C/DP1.2到HDMI2.0和VGA转换器,设计用于将USB Type-C源或DP1.2源连接到HDMI2.0和VGA接收器。LT8712X集成了一个DP1.2兼容的接收器,一个HDMI2.0兼容的发射机和一个高速三角机窝视频DAC。此外&…

AppInventor2有没有删除后的撤销功能?

问:不小心删除了组件,能撤回吗? 答:界面(组件)设计界面,没有撤销功能。代码(逻辑)设计视图,可以使用 CtrlZ 撤销,CtrlY 反撤销。 界面设计没有撤…

关于2024中国海洋装备博览会(福州)的参展通知

2024中国航洋装备博览会 2024世界航海装备大会 2024中国船舶供应链大会 2024中国航洋装备博览会2024世界航海装备大会 时间地点、规模、主题、定位 1.时间:2024年11月15日至18日 2.地点:福州海峡国际会展中心、冠城大通游艇码头 3.规模&#xff1…

【ROS2大白话】三、给turtlebot3安装realsense深度相机

系列文章目录 【ROS2大白话】一、ROS2 humble及cartorgrapher安装 【ROS2大白话】二、turtlebot3安装 【ROS2大白话】三、给turtlebot3安装realsense深度相机 【ROS2大白话】四、ROS2非常简单的传参方式 文章目录 系列文章目录效果展示一、修改model.sdf文件1. 路径位置2. 修改…

Day25 首页待办事项及备忘录添加功能

​ 本章节,完成首页待办事项及备忘录添加功能 一.修改待办事项和备忘录逻辑处理类,即AddMemoViewModel和AddTodoViewModel 在 AddMemoViewModel逻辑处理类中,为了支持与其关联的View视图文件的数据绑定,需要定义一个与视图文件相匹配的实体类 Model。这个Model将包含 View中…

冯喜运:6.6外汇黄金原油晚间行情预测及独家操作建议

【黄金消息面分析】:周三(6月5日),黄金价格继续区间波动并上涨,与周二的价格走势形成鲜明对比,此前美国公布的经济数据好坏参半,可能促使美联储降低借贷成本。美国国债收益率下降,美…

支付宝小众玩法 爱溜达的人不容错过

创建一个简单的程序来帮助用户管理他们的图片,例如筛选分辨率合适、尺寸适中的图片来准备上传,这是一个技术上合理且有益的方向。例如,一个Python脚本使用Pillow库来检查文件夹中图片的尺寸: from PIL import Image import os# 根…

深圳比创达EMC|EMC电磁兼容性行业:技术前沿与市场挑战

在当今高度信息化的社会,电磁兼容性(EMC)技术已成为各行各业不可或缺的一部分。随着电子设备的日益增多和复杂化,电磁环境日益复杂,电磁兼容性行业面临着前所未有的挑战和机遇。 一、EMC电磁兼容性行业的技术基础 电…

Qt图像处理技术十一:得到QImage图像的马赛克图像

效果图 指数5 指数15 指数40 原理 马赛克的原理很简单,就是取一个值,让这个值作为一个方格子的长宽,如40*40px的格子,取这个区域的平均R G B值,然后这个区域的所有像素点都是这个RGB值即可 源码 QImage applyM…

新能源管理系统主要包括哪些方面的功能?

随着全球对可持续发展和环境保护的日益重视,新能源管理系统已成为现代能源领域的核心组成部分。这一系统不仅涉及对新能源的收集、存储和管理,还包括对整个能源网络进行高效、智能的监控和控制。以下是新能源管理系统主要包含的几方面功能: 一…

STM32 HAL库USART的接收数据方法实现

目录 概述 1 使用STM32Cube生成项目 1.1 软件版本信息 1.2 配置串口相关参数 1.3 生成工程 2 问题描述 3 解决问题 3.1 修改代码 3.2 编写新的回调函数 4 测试 概述 本文主要介绍STM32 HAL库USART的接收数据方法实现,笔者使用的HAL库为STM32Cube_FW_F1_V1.…

鸿蒙开发 之 Stage模型

1.介绍 2.工程目录以及配置文件说明 配置文件 3.UIAbility创建流程 注意:退出应用先销毁的是windowStage之后是ability 4.页面及生命周期 5.UIAbility启动模式

【Mybatis】INSERT INTO 遇到NULL怎么处理?

目录标题 背景-使用Mybatis手写批量插入Insert方法测试核心代码,author字段为null,插入条件怎么写? MybatisPlus解决方案自动填充字段 Mybatis解决方案if标签处理 问题:如果不在工程里面设置默认值?如何直接使用数据库…

Qt窗口与对话框

目录 Qt窗口 1.菜单栏 2.工具栏 3.状态栏 4.滑动窗口 QT对话框 1.基础对话框QDiaog 创建新的ui文件 模态对话框与非模态对话框 2.消息对话框 QMessageBox 3.QColorDialog 4.QFileDialog文件对话框 5.QFontDialog 6.QInputDialog Qt窗口 前言:之前以上…

Java Logback 基本操作

一、环境搭建 配置 maven : JavaWeb开发中的Maven使用_javaweb项目中如何使用manven项目-CSDN博客 配置 eclipse : eclipse新建Maven web项目全过程-CSDN博客 二、下载Logback 下载地址: Maven Repository: ch.qos.logback logback-clas…

系统架构设计师【补充知识】: 应用数学 (核心总结)

24.1 图论之最小生成树 (1)定义: 在连通的带权图的所有生成树中,权值和最小的那棵生成树(包含图中所有顶点的树),称作最小生成树。 (2)针对问题: 带权图的最短路径问题。 (3)最小生成树的解法有普里姆(Prim)算法和克鲁斯卡尔(Kruskal)算法,我…

智能管理,无忧报修——高校校园报事报修系统小程序全解析

随着数字化、智能化的发展,高校生活也迎来了前所未有的变革。你是否还在为宿舍的水龙头漏水、图书馆的灯光闪烁而烦恼?你是否还在为报修流程繁琐、等待时间长而焦虑?今天,这一切都将成为过去式!因为一款震撼高校圈的新…