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

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

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

相关文章

浊度传感器设备的监测控制和智慧运维

浊度传感器是一种用于测量液体中悬浮颗粒浓度从而反映液体浊度的设备。 其工作原理主要基于以下几种常见方式: 1. 散射光测量原理:当光线穿过含有悬浮颗粒的液体时,颗粒会使光线发生散射。传感器通过测量特定角度的散射光强度来确定浊度。散…

【OpenCV 图像处理 Python版】OpenCV 简介及安装

文章目录 1.OpenCV 介绍1.1 OpenCV 的特点1.2 OpenCV 的主要模块1.3 OpenCV 的应用场景 2.OpenCV-Python 库3.OpenCV 安装 1.OpenCV 介绍 OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和机器学习软件库。它由英特尔公司于1999年…

java版CRM客户关系管理系统Spring Cloud alibaba Spring Boot成长型企业必备的客户关系管理系统

鸿鹄CRM客户关系管理系统是一款基于Java语言开发的CRM系统,采用了Spring Cloud Alibaba、Spring Boot、MybatisPlus、Redis和VUE3 ElementUI等技术,构建了一个微服务架构。该系统具有以下功能模块: 一、待办事项 1、今日需联系客户&#xf…

QT学习积累——float 接收 两个 int类型的值相除的结果,即 float f = int(1)/ int(2)= 0

目录 引出除法的一个坑 总结自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式返回值mutable修饰案例 引出 QT学习积累——float 接收 两个 int类型的值相除的结果,即 float f int&#xf…

数据库管理-第213期 HaloDB-Oracle兼容性测试03(20240625)

数据库管理213期 2024-06-25 数据库管理-第213期 HaloDB-Oracle兼容性测试03(20240625)1 索引1.1 B-Tree索引1.2 Hash索引1.3 复合索引1.4 唯一索引1.5 表达式索引1.6 部分索引 2 视图3 表连接3.1 内连接3.2 左/右外连接3.3 全连接清理环境: …

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

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

JavaWeb系列十九: jQuery的DOM操作 上

查找节点, 修改属性 查找属性节点: 查找到所需要的元素之后, 可以调用jQuery对象的attr()方法用来 设置/返回 它的各种属性值 设置属性值 $(“img”).attr(“width”, “300”);返回属性值 $(“img”).attr(“width”); 创建节点 创建节点: 使用jQuery的工厂函数$(): $(html标…

CNN-O-ELMNet: 优化的轻量化通用模型,用于肺部疾病分类和严重性评估| 文献速递-先进深度学习疾病诊断

Title 题目 CNN-O-ELMNet: Optimized Lightweight andGeneralized Model for Lung DiseaseClassification and Severity Assessment CNN-O-ELMNet: 优化的轻量化通用模型,用于肺部疾病分类和严重性评估 01 文献速递介绍 肺部疾病是全球主要的致残和死亡原因。根…

七天速通javaSE:第一天 入门:Hello,Word与程序运行机制

文章目录 前言一、Hello,Word!1.新建一个文件夹存放代码2.新建一个.java文件3.编写代码 二、编译与运行1.在控制台编译java文件2.运行class文件 三、java程序运行机制1.高级语言的分类1.1 编译型语言1.2 解释型语言 2.程序运行机制 四、IDEA五、代码规范…

uni-app的showModal提示框,进行删除的二次确认,可自定义确定或取消操作

实现效果: 此处为删除的二次确认示例,点击删除按钮时出现该提示,该提示写在js script中。 实现方式: 通过uni.showModal进行提示,success为确认状态下的操作自定义,此处调用后端接口进行了删除操作&#…

APP软件系统的开发流程

APP软件系统的开发是一个复杂的过程,需要多方面的知识和技能。建议选择专业的开发团队进行开发,以确保APP的质量和成功。APP软件系统的开发流程通常包括以下几个阶段。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合…

指针(一)

指针基础 在C中,指针是至关重要的组成部分。它是C语言最强大的功能之一,也是最棘手的功能之一。 指针具有强大的能力,其本质是协助程序员完成内存的直接操纵。 指针:特定类型数据在内存中的存储地址,即内存地址。 …

会声会影2024永久激活码序列号注册机分享

大家好呀,今天我想给大家安利一款我最近超级喜欢的软件——会声会影2024!🌟 作为一个视频编辑爱好者,我尝试过很多视频编辑软件,但总感觉少了那么一点点“火花”。直到我遇到了会声会影2024,它完全改变了我…

如何解决远距离传输大文件慢的问题?

在数字化时代,无论是企业还是个人,经常需要处理跨越长距离的大规模文件传输任务。这种传输的效率和安全性对业务流程的顺畅至关重要。然而,我们经常遇到网络延迟、数据丢失、带宽限制等问题,这些都可能影响文件传输的效率。小编将…

Linux环境下安装MySQL5.7.20(源码安装)

📣📣📣 哈喽!大家好,本专栏主要发表mysql实战的文章,文章主要包括: 各版本数据库的安装、备份和恢复,性能优化等内容的学习。。 📣 ***如果需要观看配套视频的小伙伴们,请…

vue+three.js渲染3D模型

安装three.js: npm install three 页面部分代码&#xff1a; <div style"width: 100%; height: 300px; position: relative;"><div style"height: 200px; background-color: white; width: 100%; position: absolute; top: 0;"><div id&…

大学网页制作作品1

作品须知&#xff1a;1.该网页作品预计分为5个页面&#xff08;其中1个登录页面&#xff0c;1个首页主页面&#xff0c;3个分页面&#xff09;&#xff0c;如需要可自行删改增加页面。&#xff08;总共约800行html,1200行css,100行js&#xff09; 2.此网页源代码只用于学习和模…

宣告 adsb.exposed - 基于 ClickHouse 的 ADS-B 航班数据交互式可视化和分析

本文字数&#xff1a;10340&#xff1b;估计阅读时间&#xff1a;26 分钟 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 Meetup活动 ClickHouse 上海首届 Meetup 讲师招募中&#xff0c;欢迎讲师在文末扫码报名&#xff01; 也许你已…

秒空!西圣Mike无线麦克风新晋断货王!引爆抢购潮,618全平台售罄

在数字音频技术飞速发展的今天&#xff0c;一款能够满足专业需求同时兼具高性价比的无线麦克风无疑是市场上的稀缺品。自西圣Mike无线麦克风上市以来&#xff0c;凭借其卓越的机皇性能和百元的亲民价格&#xff0c;迅速在消费者中引起轰动&#xff0c;连月斩获99%高好评&#x…

让我们聊聊网络安全中会涉及到的IP地址(IP协议)、MAC地址、路由、DNS协议(域名系统)、NAT技术(协议)、以太网帧、ARP协议

网络安全中会涉及到的IP地址&#xff08;IP协议&#xff09;、MAC地址、路由、DNS协议&#xff08;域名系统&#xff09;、NAT技术&#xff08;协议&#xff09;、以太网帧、ARP协议 一.IP地址&#xff08;IP协议&#xff09;1.IP地址&#xff08;IP协议&#xff09;的作用2.IP…