当前位置: 首页 > news >正文

Chrome DevTools开发者调试工具

Chrome DevTools 是一个功能强大的网页开发工具,集成在谷歌浏览器中,帮助开发者调试和优化网页应用。以下是详细的功能说明和使用技巧:

1. 打开 DevTools

  • 快捷键:按下 F12Ctrl+Shift+I(Windows/Linux)或 Cmd+Opt+I(Mac)。
  • 右键菜单:右键点击网页元素,选择“检查”或“Inspect”。

2. Elements 面板

  • 查看和编辑 HTML
    • 可以查看网页的 HTML 结构。
    • 双击标签可以编辑元素内容。
    • 右键点击元素可以添加、删除或编辑节点。
  • 查看和编辑 CSS
    • 查看应用在元素上的所有 CSS 样式。
    • 直接在面板中修改 CSS 属性,实时预览效果。
    • 支持启用/禁用单个 CSS 属性。
  • DOM 断点
    • 右键点击 DOM 元素,可以设置断点,在元素变化时自动暂停脚本执行。
    • 三种断点类型:子树修改、属性修改、节点移除。

3. Console 面板

  • 执行 JavaScript 代码
    • 直接输入并执行 JavaScript 代码。
    • 支持多行代码编辑。
  • 查看日志
    • 所有通过 console.logconsole.error 等输出的信息都会显示在这里。
    • 支持过滤和搜索日志。
  • 调试
    • 可以在控制台中调试代码,查看变量的值和执行结果。
    • 支持查看对象和数组的详细信息。

4. Sources 面板

  • 查看和编辑源代码
    • 查看项目的所有源文件,包括 HTML、CSS、JavaScript 等。
    • 可以直接在 DevTools 中编辑代码。
  • 断点调试
    • 在源代码中设置断点,逐行调试代码,查看变量和调用堆栈。
    • 支持条件断点和 Logpoint。
  • Watch 变量
    • 添加变量到 Watch 窗格,实时监控它们的值。
  • Call Stack
    • 查看当前执行的调用堆栈,帮助追踪函数调用顺序。

5. Network 面板

  • 查看网络请求
    • 查看所有的网络请求,包括 XHR 和 Fetch 请求。
    • 请求分为:文档、CSS、JavaScript、图片、媒体、字体等类别。
  • 请求详细信息
    • 点击请求可以查看详细信息,包括 Headers、Preview、Response 等。
    • 支持查看请求的 Timeline,分析加载时间。
  • 过滤和搜索
    • 通过各种条件过滤请求,帮助快速定位需要的请求。
    • 支持按名称、状态码、类型等进行过滤。

6. Performance 面板

  • 记录性能数据
    • 点击录制按钮,执行操作,然后停止录制,可以查看性能数据。
  • 分析帧率
    • 帮助发现页面卡顿的原因,优化渲染性能。
  • 查看堆栈图
    • 显示 JavaScript 的调用堆栈,帮助分析性能瓶颈。
    • 包含 CPU 样本、帧渲染时间、GPU 负载等信息。

7. Memory 面板

  • 内存快照
    • 捕获内存快照,查看内存使用情况。
    • 支持三种类型的快照:堆快照、分配仪表盘、分配时间线。
  • 内存泄漏检测
    • 通过比较不同快照,发现和修复内存泄漏问题。
    • 通过颜色编码显示对象的生命周期,帮助识别长时间存在的对象。

8. Application 面板

  • 查看存储
    • 查看 Local Storage、Session Storage、IndexedDB、Cookies 等存储数据。
    • 支持清除各类存储数据。
  • 查看 Service Workers
    • 查看和管理注册的 Service Workers。
    • 支持强制更新和删除 Service Workers。
  • 查看缓存
    • 查看应用的缓存数据,包括 Application Cache 和 Cache Storage。
    • 支持清除缓存,确保测试最新版本。

9. Security 面板

  • 查看安全状态
    • 检查页面的安全状态,确保使用 HTTPS 加密。
    • 查看证书信息,包括有效期、颁发者等。
  • 混合内容
    • 检查页面是否包含混合内容(HTTP 和 HTTPS 混合使用),提供修复建议。

10. Lighthouse 面板

  • 生成报告
    • 可以生成网页的性能、可访问性、SEO 等方面的报告。
  • 优化建议
    • 提供优化建议,帮助提升网页质量。
    • 包含性能评分、可访问性评分、最佳实践评分和 SEO 评分。

11. Accessibility 面板

  • 检查可访问性
    • 检查页面是否符合可访问性标准,改善用户体验。
    • 提供修复建议,帮助提高可访问性分数。
    • 支持模拟不同的屏幕阅读器体验。

使用技巧

  • 快捷键使用:熟练使用快捷键可以大大提高效率。例如,Ctrl+P(Windows/Linux)或 Cmd+P(Mac)可以快速打开文件。
  • 实时编辑和预览:利用 Elements 面板和 Sources 面板,可以直接在浏览器中编辑代码并实时预览效果,方便快速迭代和调试。
  • 断点调试:充分利用断点、条件断点和 Logpoint,精确调试代码,快速定位问题。
  • 性能分析:通过 Performance 和 Memory 面板,详细分析页面性能和内存使用情况,发现和解决性能瓶颈。

相关文章:

Chrome DevTools开发者调试工具

Chrome DevTools 是一个功能强大的网页开发工具,集成在谷歌浏览器中,帮助开发者调试和优化网页应用。以下是详细的功能说明和使用技巧: 1. 打开 DevTools 快捷键:按下 F12 或 CtrlShiftI(Windows/Linux)或…...

产品创新管理:从模仿到引领,中国企业的创新之路

一、引言 在全球化竞争日益激烈的今天,科技创新已成为推动国家经济增长和社会进步的关键动力。中国自改革开放四十年来,在科技创新领域取得了举世瞩目的成就,从跟踪模仿到自主研发,再到自主创新、开放创新和协同创新并举&#xf…...

Android 日志实时输出

开发中如果只是单纯的应用开发,Android studio基本上可以满足,但是如果应用和系统联调那就得用logcat实时输出了,我这里都是总结的实用经验,没那么多花里胡哨 Android 日志实时输出 1、输出 android log //分步,进入s…...

JavaEE初阶---多线程编程(一.线程与进程)

目录 🤣一.线程与进程的概念与联系: 进程的基本概念: 线程的基本概念: 进程和线程的区别与联系: 🙃代码执行实列: 1.通过继承Thread父类来实现多线程 2.通过实现Runnable接口来实现多线程…...

react+vite创建

要在本地初始化一个结合了React和Vite的项目,你可以遵循以下步骤: 1、安装Node.js: 确保你的机器上已安装了Node.js。如果未安装,请前往Node.js官网下载并安装。 2、使用终端或命令提示符: 打开你的终端(…...

软考 系统架构设计师系列知识点之杂项集萃(29)

接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(28) 第46题 以下描述中,( )不是嵌入式操作系统的特点。 A. 面向应用,可以进行裁剪和移植 B. 用于特定领域,不需要支持多任…...

[Qt开发]当我们在开发兼容高分辨率和高缩放比、高DPI屏幕的软件时,我们在谈论什么。

前言 最近在开发有关高分辨率屏幕的软件,还是做了不少尝试的,当然我们也去网上查了不少资料,但是网上的资料也很零碎,说不明白,这样的话我就做个简单的总结,希望看到这的你可以一次解决你有关不同分辨率下…...

uniapp视频组件层级太高,解决方法使用subNvue原生子体窗口

目录 前言 先看一下uniapp官网的原话: subNvue的一些参数介绍 subNvues使用方法: 绑定id 显示 subNvue 弹出层 subNvue.show() 参数信息 subNvue.hide() 参数信息 在使用subNvue 原生子体窗口 遇到的一些问题 前言 nvue 兼容性 以及使用方式 控…...

java项目使用jsch下载ftp文件

pom <dependency><groupId>com.jcraft</groupId><artifactId>jsch</artifactId><version>0.1.55</version> </dependency>demo1&#xff1a;main方法直接下载 package com.example.controller;import com.jcraft.jsch.*; im…...

指针(初阶1)

一.指针是什么 通俗的讲&#xff0c;指针就是地址&#xff0c;其存在的意义就像宾馆房间的序号一样是为了更好的管理空间。 如下图&#xff1a; 如上图所示&#xff0c;指针就是指向内存中的一块空间&#xff0c;也就相当于地址 二.一个指针的大小是多少 之前我们学习过&#x…...

MySQL实体类框架

实现mysql数据库的增删改查功能 import com.mchange.v2.collection.MapEntry; import lombok.Data; import org.junit.jupiter.api.Test;import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.lang.reflect.*; import java.sql.*; …...

数据结构之初始泛型

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 目录 深入了解包装类 包装类的由来 装箱与拆箱 面试题 泛型 泛型的语法与使用…...

【网络编程开发】7.TCP可靠传输的原理

7.TCP可靠传输的原理 TCP实现可靠传输的原理主要基于序列号和确认应答、超时重传、滑动窗口、连接管理机制以及拥塞控制等多重机制。 TCP&#xff08;Transmission Control Protocol&#xff09;&#xff0c;即传输控制协议&#xff0c;是网络通信中的一种重要协议&#xff0…...

视觉SLAM十四讲:从理论到实践(Chapter8:视觉里程计2)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 一、目标 1.理解光流法跟踪特征点的原理。 2.理解直接法是如何估计相机位姿的。 3.实现多层直接法的计算。 特征点法存在缺陷&#xff1a; 二、光流(Optical Flow) …...

C语言过度C++语法补充(面向对象之前语法)

目录 1. C相较于C语言新增的语法 0. C 中的输入输出 1. 命名空间 1. 我们如何定义一个命名空间&#xff1f; 2. 如何使用一个命名空间 3. 命名空间中可以定义什么&#xff1f; 4. 在 相同或者不同 的文件中如果出现 同名的命名空间 会如何&#xff1f; 5. 总结~~撒花~~…...

类和对象(二)(C++)

初始化列表 class Date{public:Date(int year, int month, int day){_year year;_month month;_day day;}private:int _year;int _month;int _day;}; 虽然上述构造函数调用之后&#xff0c;对象中已经有了一个初始值&#xff0c;但是不能将其称为对对象中成员变量的初始化…...

Chrome DevTools解密:成为前端调试大师的终极攻略

Chrome DevTools是一套内置于Google Chrome浏览器中的开发者工具&#xff0c;它允许开发者对网页进行调试、分析和优化。本文将全面介绍DevTools的功能、使用方法以及注意事项&#xff0c;帮助开发者更好地利用这些工具来提升开发效率和网页性能。 一、简介 1. DevTools是什么…...

【python】OpenCV—Cartoonify and Portray

参考来自 使用PythonOpenCV将照片变成卡通照片 文章目录 1 卡通化codecv2.medianBlurcv2.adaptiveThresholdcv2.kmeanscv2.bilateralFilter 2 肖像画cv2.divide 1 卡通化 code import cv2 import numpy as npdef edge_mask(img, line_size, blur_value):gray cv2.cvtColor(…...

制作AI问答机器人:从0到1的完整指南

在数字化转型的浪潮中&#xff0c;企业正追求更高效、智能的客户服务解决方案。AI问答机器人以其快速响应、全天候服务和持续学习的能力&#xff0c;成为了提升客户满意度和加速业务发展的关键工具。本文将深入探讨如何制作一个企业级的AI问答机器人&#xff0c;并强调其功能体…...

mysql 数据库datetime 类型,转换为DO里面的long类型后,只剩下年了,没有了月和日

解决方法也简单&#xff1a; 自定义个一个 Date2LongTypeHandler <resultMap id"BeanResult" type"XXXX.XXXXDO"><result column"gmt_create" property"gmtCreate" jdbcType"DATE" javaType"java.lang.Long&…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...