Chrome开发者工具学习

  1. 打开开发者工具

    • 可以通过在网页上点击右键并选择“检查”来打开。

    • 或者使用快捷键Ctrl + Shift + I(在Windows/Linux上)或Command + Option + I(在Mac上)。
  2. 界面概览

    • 熟悉DevTools的基本面板,如“Elements”(元素)、“Console”(控制台)、“Sources”(源代码)、“Network”(网络)、“Performance”(性能)、“Memory”(内存)、“Application”(应用)、“Security”(安全)和“Audits”(审计)等。
  3. Elements(元素)面板

    • 用于检查和编辑DOM元素。
    • 可以实时看到对HTML和CSS的更改.
  4. Console(控制台)面板

    • 用于打印日志、错误和警告信息。
    • 可以执行JavaScript代码。
  5. Sources(源代码)面板

    • 用于查看和编辑网页的JavaScript文件。
    • 设置断点和调试代码。
  6. Network(网络)面板

    • 监控网页的网络请求和响应。
    • 分析加载资源的性能。

  7. Performance(性能)面板

    • 记录和分析网页的性能,如加载时间、渲染时间等。
  8. Memory(内存)面板

    • 用于检测内存泄漏和分析内存使用情况。
  9. Application(应用)面板

    • 查看和管理存储在本地的应用程序数据,如Cookies、本地存储等。
  10. Security(安全)面板

    • 检查网页的安全问题,如HTTPS证书、混合内容等。
  11. Audits(审计)面板

    • 用于对网页进行性能、安全性和可访问性等方面的审计。
  12. 移动设备模拟

    • 使用DevTools模拟移动设备,测试响应式设计。
  13. 性能分析

    • 使用Performance面板记录网页的运行情况,分析性能瓶颈。
  14. 断点和调试

    • 在Sources面板中设置断点,逐步执行代码,调试JavaScript。
  15. 代码调试技巧

    • 学习如何使用DevTools的各种调试功能,如监视表达式、调用栈、作用域变量等。
  16. 网络条件模拟

    • 在Network面板中模拟不同的网络条件,如2G、3G等,测试网页在不同网络环境下的表现。
  17. 跨设备测试

    • 使用Remote Devices功能测试网页在不同设备上的表现。
  18. 自定义和快捷操作

    • 学习如何自定义DevTools的设置,以及使用快捷键提高效率。
  19. 访问性检查

    • 使用Lighthouse等工具检查网页的访问性。
  20. 持续学习和实践

    • 随着Web技术的发展,持续学习新的工具和技巧。

        通过实践和不断探索,你可以更深入地了解和掌握Chrome开发者工具的各种功能。此外,官方文档和在线教程也是学习的好资源。

Application(应用)面板的重点内容

Chrome的"Application"(应用)面板提供了对网页应用的深入洞察,包括对存储、数据库、缓存、服务工作者、APIs等的访问和操作。以下是"Application"面板的一些重点内容:

  1. 存储(Storage):

    • 显示和管理Web Storage,包括localStorage和sessionStorage。
    • 可以查看、添加、修改或删除存储条目。
  2. Cookies:

    • 查看和管理文档的Cookies。
    • 可以查看每个Cookie的详细信息,包括名称、值、域、路径、过期时间等。
  3. 数据库(Databases):

    • 访问和操作IndexedDB数据库。
    • 可以查看数据库内容、执行事务、查询数据等。
  4. 缓存(Cache):

    • 检查和分析Service Workers创建的缓存。
    • 可以查看缓存条目、大小和状态。
  5. 服务工作者(Service Workers):

    • 管理服务工作者的生命周期,包括注册、注销和调试。
    • 查看服务工作者的状态(如激活、等待、运行)和相关事件。
  6. APIs:

    • 访问和管理网页使用的Web APIs,如Web Audio API、Web MIDI API等。
    • 可以查看API的使用情况和状态。
  7. 后台同步(Background Sync):

    • 查看和管理后台同步事件。
    • 可以查看同步注册的详细信息和状态。
  8. 清除存储(Clear Storage):

    • 提供了一键清除所有网站数据的选项,包括Cookies、本地存储、IndexedDB等。
  9. 应用信息(Application Information):

    • 显示当前网页的详细信息,如URL、协议、安全状态等。
  10. 权限(Permissions):

    • 查看和管理网页请求的权限,如地理位置、通知等。
  11. 支付处理程序(Payment Handlers):

    • 管理网页使用的支付处理程序。
  12. 协议处理程序(Protocol Handlers):

    • 管理网页注册的协议处理程序。
  13. WebAuthn 重放攻击防护(WebAuthn Relying Party):

    • 管理WebAuthn的身份验证请求和响应。
  14. 帧(Frames):

    • 列出当前页面的所有iframe和其他框架元素,可以切换上下文查看不同帧的存储和缓存信息。
  15. 拦截和管理(Interception and Management):

    • 可以拦截和管理网络请求,查看请求和响应的详细信息。

        "Application"面板是开发者调试和管理网页应用的重要工具,通过这个面板,开发者可以深入了解网页应用的行为和状态,优化应用性能和用户体验。

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

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

相关文章

【精品案例】数字孪生技术与数字工厂案例(59页PPT)

引言:随着工业4.0和智能制造的快速发展,数字孪生技术和数字工厂已成为制造业转型升级的重要趋势。数字孪生技术通过构建虚拟的数字模型,实现对物理实体全生命周期的映射与仿真,为企业的产品研发、设计、制造等提供有力支持。而数字…

【AI大模型应用开发】3. RAG初探 - 动手实现一个最简单的RAG应用

0. 什么是RAG 大模型也不是万能的,也有局限性。 LLM 的知识不是实时的LLM 可能不知道你私有的领域/业务知识 RAG(Retrieval Augmented Generation)顾名思义:通过检索的方法来增强生成模型的能力。你可以把这个过程想象成开卷考…

MATLAB算法实战应用案例精讲-【数模应用】线性判别分析(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 什么是判别分析 线性判别分析(LDA) 数学模型 二分类 多分类LDA ​编辑 算法思想: 费歇(FISHER)判别思想 贝叶斯(BAYES)判别思想 LDA算法流程 LDA与PCA对比 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 …

VC++开发积累——vc++6.0中删除函数的方法,右键,Delete

目录 引出插曲:删除函数的方法多行注释的实现代码输入的自动提示搜索出来,标记和取消标记跳转到上一步的位置 ctrl TAB 总结其他规范和帮助文档创建第一个Qt程序对象树概念信号signal槽slot自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自…

DM达梦数据库字符串函数整理

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

python基础篇(5):None类型

1 None类型 Python中有一个特殊的字面量&#xff1a;None&#xff0c;其类型是&#xff1a;<class NoneType> 无返回值的函数&#xff0c;实际上就是返回了&#xff1a;None这个字面量 None表示&#xff1a;空的、无实际意义的意思 函数返回的None&#xff0c;就表示…

Avue-data数据大屏显示饼图(附Demo)

目录 前言1. Sql查询2. 颜色细节 前言 对于这部分知识&#xff0c;原先有过柱状图实战&#xff1a;Avue-data数据大屏显示柱状图&#xff08;附Demo讲解&#xff09; 以下直奔主题&#xff0c;以Sql数据库数据为主 1. Sql查询 以饼图为例&#xff0c;需要返回的形式如下&am…

Kafka基本架构

「kafka设计思想」 一个最基本的架构是生产者发布一个消息到Kafka的一个Topic &#xff0c;该Topic的消息存放于的Broker中&#xff0c;消费者订阅这个Topic&#xff0c;然后从Broker中消费消息&#xff0c;下面这个图可以更直观的描述这个场景&#xff1a; 「消息状态&#x…

嵌入式通信协议-----UART协议详解(基于智芯Z20k11X)

目录 一、简介 1.概念 2.结构 3.特点 4.优缺点 二、协议帧组成 1.起始位 2.数据位 3.奇偶校验位 4.停止位 三、UART通信过程 四、USART与UART区别 五、代码实现 1.硬件框图 2.软件实现 一、简介 1.概念 USART&#xff08;Universal Synchronous Asynchronous R…

2024年最新机动车签字授权人考试题库。

31."简易瞬态工况法"所使用的五气分析仪的温度范图:分析系统及相关部件应在&#xff08; &#xff09;。 A.0-40℃ B.0-50℃ C.0-60℃ D.-10-40℃ 答案:A 32.稀释氧传感器环境空气量程检测时的读数值位于&#xff08; &#xff09;%vol范围之外时&#xff0c;应…

成都百洲文化传媒有限公司助力电商品牌乘风破浪

在当今数字化时代&#xff0c;电商行业风起云涌&#xff0c;竞争异常激烈。成都百洲文化传媒有限公司凭借其对电商行业的深刻理解与实战经验&#xff0c;已然成为行业中的佼佼者。公司专注于电商服务领域&#xff0c;通过创新的营销模式和精准的市场策略&#xff0c;助力众多品…

北京互动阅读app开发,“身”临其境,阅读精彩

随着大数据与智能化的不断发展进步&#xff0c;线上阅读软件也越来越多&#xff0c;为了缓解对传统翻页阅读方式产生的疲劳&#xff0c;人们对线上阅读提出了新的要求。对此&#xff0c;与智能科技相结合的北京互动阅读app开发&#xff0c;以高互动、高体验感的优势&#xff0c…

类的默认成员函数——构造与析构函数

如果一个类中什么成员都没有&#xff0c;简称为空类。但是空类中真的什么都没有吗&#xff1f; 当然不是&#xff0c;任何类在什么都不写的情况下&#xff0c;编译器会自动生成6个默认成员函数 1.构造函数 1.1概念引入 对于以下这个Date类&#xff0c;可以通过Init公有方法给…

食品供应链管理商城系统的设计、实现和代码

上线食品供应链管理商城系统的设计与实现是一项复杂且重要的任务&#xff0c;它不仅涉及到技术层面的具体实现&#xff0c;还包括业务流程的优化和用户体验的提升。本文将从系统设计、功能模块、技术选型以及实现步骤等方面进行详细探讨。 ### 系统设计 在设计食品供应链管理…

从单一到多元:EasyCVR流媒体视频汇聚技术推动安防监控智能升级

随着科技的飞速发展&#xff0c;视频已成为我们日常生活和工作中的重要组成部分。尤其在远程办公、在线教育、虚拟会议等领域&#xff0c;视频的应用愈发广泛。为了满足日益增长的视频需求&#xff0c;流媒体视频汇聚融合技术应运而生&#xff0c;它不仅改变了传统视频的观看和…

第二天的课根本跟不上啊 难难难啊

编程实现三个数求最大 编程实现求解一元二次方程 传参问题 直接使用返回值 复制控制 复制控制是指在C中控制对象复制行为的机制&#xff0c; 包括拷贝构造函数&#xff08;copy constructor&#xff09;、 赋值操作符&#xff08;copy assignment operator&#xff09;、 …

mysql workbench使用schema视图导出表和列结构到excel

目的&#xff1a;导出所有表和列的名字和注释 很多时候没有正规的数据库文档&#xff0c;为了快速交流啊&#xff0c;需要一个快捷的基础。数据库建表的时候可能有注释&#xff0c;也可能没有注释。有当然好&#xff0c;查看注释就能清楚很多&#xff0c;没有的话最好一个一个补…

零基础如何制作一个GIS可视化大屏?免费无难度!

一.GIS是什么&#xff1f; GIS&#xff08;地理信息系统&#xff09;开发是一种利用计算机技术对地理信息进行处理、分析、存储和展示的技术。GIS开发可以应用在很多领域&#xff0c;如城市规划、环境保护、交通管理、农业生产等。 二.如何将GIS与数字孪生结合起来&#xff1f…

Verilog的逻辑系统及数据类型(二):参数和参数重载

目录 3.参数&#xff08;parameters)3.1 参数重载&#xff08;overriding)3.2 参数重载举例 微信公众号获取更多FPGA相关源码&#xff1a; 3.参数&#xff08;parameters) 用参数声明一个可变常量&#xff0c;常用于定义延时及宽度变量。参数定义的语法&#xff1a;paramete…

安卓应用开发学习:获取经纬度及地理位置描述信息

前段时间&#xff0c;我在学习鸿蒙应用开发的过程中&#xff0c;在鸿蒙系统的手机上实现了获取经纬度及地理位置描述信息&#xff08;鸿蒙应用开发学习&#xff1a;手机位置信息进阶&#xff0c;从经纬度数据获取地理位置描述信息&#xff09;。反而学习时间更长的安卓应用开发…