Chrome开发者工具学习

简介: Chrome开发者工具学习

打开开发者工具:

  • 可以通过在网页上点击右键并选择“检查”来打开。
  • 或者使用快捷键Ctrl + Shift + I(在Windows/Linux上)或Command + Option + I(在Mac上)。

界面概览:

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

  1. Elements(元素)面板:
  • 用于检查和编辑DOM元素。
  • 可以实时看到对HTML和CSS的更改.
  1. Console(控制台)面板:
  • 用于打印日志、错误和警告信息。
  • 可以执行JavaScript代码。
  1. Sources(源代码)面板:
  • 用于查看和编辑网页的JavaScript文件。
  • 设置断点和调试代码。
  1. Network(网络)面板:
  • 监控网页的网络请求和响应。
  • 分析加载资源的性能。
  1. Performance(性能)面板:
  • 记录和分析网页的性能,如加载时间、渲染时间等。
  1. Memory(内存)面板:
  • 用于检测内存泄漏和分析内存使用情况。
  1. Application(应用)面板:
  • 查看和管理存储在本地的应用程序数据,如Cookies、本地存储等。
  1. Security(安全)面板:
  • 检查网页的安全问题,如HTTPS证书、混合内容等。
  1. Audits(审计)面板:
  • 用于对网页进行性能、安全性和可访问性等方面的审计。
  1. 移动设备模拟:
  • 使用DevTools模拟移动设备,测试响应式设计。
  1. 性能分析:
  • 使用Performance面板记录网页的运行情况,分析性能瓶颈。
  1. 断点和调试:
  • 在Sources面板中设置断点,逐步执行代码,调试JavaScript。
  1. 代码调试技巧:
  • 学习如何使用DevTools的各种调试功能,如监视表达式、调用栈、作用域变量等。
  1. 网络条件模拟:
  • 在Network面板中模拟不同的网络条件,如2G、3G等,测试网页在不同网络环境下的表现。
  1. 跨设备测试:
  • 使用Remote Devices功能测试网页在不同设备上的表现。
  1. 自定义和快捷操作:
  • 学习如何自定义DevTools的设置,以及使用快捷键提高效率。
  1. 访问性检查:
  • 使用Lighthouse等工具检查网页的访问性。
  1. 持续学习和实践:
  • 随着Web技术的发展,持续学习新的工具和技巧。

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

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

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

  1. 存储(Storage):
  • 显示和管理Web Storage,包括localStorage和sessionStorage。
  • 可以查看、添加、修改或删除存储条目。
  1. Cookies:
  • 查看和管理文档的Cookies。
  • 可以查看每个Cookie的详细信息,包括名称、值、域、路径、过期时间等。
  1. 数据库(Databases):
  • 访问和操作IndexedDB数据库。
  • 可以查看数据库内容、执行事务、查询数据等。
  1. 缓存(Cache):
  • 检查和分析Service Workers创建的缓存。
  • 可以查看缓存条目、大小和状态。
  1. 服务工作者(Service Workers):
  • 管理服务工作者的生命周期,包括注册、注销和调试。
  • 查看服务工作者的状态(如激活、等待、运行)和相关事件。
  1. APIs:
  • 访问和管理网页使用的Web APIs,如Web Audio API、Web MIDI API等。
  • 可以查看API的使用情况和状态。
  1. 后台同步(Background Sync):
  • 查看和管理后台同步事件。
  • 可以查看同步注册的详细信息和状态。
  1. 清除存储(Clear Storage):
  • 提供了一键清除所有网站数据的选项,包括Cookies、本地存储、IndexedDB等。
  1. 应用信息(Application Information):
  • 显示当前网页的详细信息,如URL、协议、安全状态等。
  1. 权限(Permissions):
  • 查看和管理网页请求的权限,如地理位置、通知等。
  1. 支付处理程序(Payment Handlers):
  • 管理网页使用的支付处理程序。
  1. 协议处理程序(Protocol Handlers):
  • 管理网页注册的协议处理程序。
  1. WebAuthn 重放攻击防护(WebAuthn Relying Party):
  • 管理WebAuthn的身份验证请求和响应。
  1. 帧(Frames):
  • 列出当前页面的所有iframe和其他框架元素,可以切换上下文查看不同帧的存储和缓存信息。
  1. 拦截和管理(Interception and Management):
  • 可以拦截和管理网络请求,查看请求和响应的详细信息。

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

相关文章
|
9月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
76 1
|
9月前
|
Web App开发 安全 网络安全
关于 Chrome 开发者工具 Network 面板里观察到的 net ERR_CERT_AUTHORITY_INVALID 错误
关于 Chrome 开发者工具 Network 面板里观察到的 net ERR_CERT_AUTHORITY_INVALID 错误
|
1月前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
32 0
|
2月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
48 0
|
2月前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
|
2月前
|
Web App开发 缓存 JavaScript
Chrome 开发者工具 Request content was evicted from inspector cache
Chrome 开发者工具 Request content was evicted from inspector cache
|
2月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
|
2月前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
|
2月前
|
Web App开发 前端开发 JavaScript
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
|
2月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法