Chrome开发者模式

学习笔记
, ,
1

一、Chrome开发者模式（DevTools）

1.1 主要面板选项

  • Elements：查看和编辑 HTML 结构及 CSS 样式。
  • Console：查看日志、调试 JavaScript 代码。
  • Sources：管理源文件，设置断点调试 JavaScript 代码。
  • Network：监控网络请求，分析页面加载性能。
  • Performance：记录和分析页面性能。
  • Memory：分析内存使用，查找内存泄漏。
  • Application：管理和查看存储在浏览器中的数据。
  • Security：查看页面的安全信息。
  • Lighthouse：生成网站性能、可访问性和 SEO 报告。

1.2 各面板详解

1.2.1 Elements

用途

  • 检查和编辑HTML：查看和实时编辑页面的HTML结构。
  • 检查和编辑CSS：查看和修改CSS样式，实时预览更改效果。
  • DOM断点：在DOM节点变化（如属性变化、节点移除等）时触发断点，帮助调试动态内容。

常见操作

  • Inspect Element：右键点击页面元素，选择“Inspect”以在Elements面板中查看该元素的HTML和CSS。
  • Styles面板：查看和修改选中元素的CSS样式。
  • Event Listeners面板：查看选中元素绑定的事件监听器。

子菜单和功能

  • Styles：查看和编辑选中元素的 CSS 样式。
    • 可以添加、修改、删除 CSS 规则，实时预览效果。
  • Computed：显示选中元素的所有计算后的 CSS 属性。
    • 可以查看元素最终的样式值，包括从多个 CSS 规则中继承的值。
  • Event Listeners：查看选中元素绑定的事件监听器。
    • 列出所有与该元素相关的 JavaScript 事件。
  • DOM Breakpoints：设置 DOM 节点变化的断点。
    • 可以在属性变化、节点移除、子节点变化时触发断点，帮助调试动态内容。
  • Properties：查看选中元素的 JavaScript 属性。
    • 显示该元素的所有属性及其值，便于调试。
  • Accessibility：查看选中元素的无障碍属性。
    • 帮助确保页面符合无障碍标准，提升用户体验。

1.2.2 Console

用途

  • 调试JavaScript：执行和测试JavaScript代码，打印输出和错误信息。
  • 查看日志：显示应用运行时的日志、警告和错误信息。
  • 命令行API：提供多种命令行API用于快速操作DOM、调试和测试代码。

常见操作

  • 执行代码：在Console中输入并执行JavaScript代码。
  • 查看日志：通过console.log()、console.error()等方法查看日志信息。
  • 使用命令行API：如$0、$1用于快速访问最近选择的元素。

子菜单和功能

  • Console API：提供多种命令行 API，用于快速操作 DOM、调试和测试代码。
    • 如 $0 获取最近选中的元素，$ 执行 CSS 选择器，console.log() 打印日志。
  • Logging：查看应用运行时的日志、警告和错误信息。
    • 日志等级包括：log、info、warn、error。
  • Commands：执行和测试 JavaScript 代码。
    • 可以在控制台中输入并执行 JavaScript 代码，实时查看结果。

1.2.3 Sources

用途

  • 调试JavaScript：设置断点、单步执行代码、查看变量和调用堆栈。
  • 工作区（Workspace）：将本地文件夹映射到DevTools中，实时编辑和保存文件。
  • 网络请求捕获：查看和编辑JavaScript代码中的网络请求。

常见操作

  • 设置断点：点击行号设置断点，调试代码执行。
  • 逐步执行代码：使用“Step over”、“Step into”、“Step out”等按钮逐步执行代码。
  • 查看变量：在Scope面板中查看当前作用域的变量和对象。

子菜单和功能

  • File Navigator：浏览和打开页面中的所有资源文件。
    • 包括 HTML、CSS、JavaScript 文件等。
  • Editor：查看和编辑源文件。
    • 可以实时编辑 JavaScript 代码，并保存到本地文件。
  • Breakpoints：设置和管理代码断点。
    • 包括行断点、条件断点、DOM 断点、XHR 断点等。
  • Watch：监控变量和表达式的值。
    • 可以添加变量或表达式，实时查看其值变化。
  • Call Stack：查看当前执行的调用堆栈。
    • 帮助了解代码执行路径和上下文。
  • Scope：查看当前作用域中的变量和对象。
    • 包括全局作用域、本地作用域等。

1.2.4 Network

用途

  • 监控网络请求：查看页面加载时的所有网络请求，包括XHR、Fetch、资源文件等。
  • 分析性能：查看请求的详细信息，如请求头、响应头、数据负载、加载时间等。
  • 模拟网络条件：模拟不同的网络速度和离线状态，测试应用在各种网络条件下的表现。

常见操作

  • 查看请求详情：点击请求条目，查看其详细信息。
  • 过滤请求：使用过滤器只显示特定类型的请求（如XHR）。
  • 模拟网络条件：在Throttling菜单中选择模拟的网络条件（如“Slow 3G”）。

子菜单和功能

  • Overview：查看页面加载过程中所有网络请求的时间轴。
    • 直观显示各请求的开始和结束时间。
  • Headers：查看请求和响应的头信息。
    • 包括请求 URL、方法、状态码、服务器等。
  • Payload：查看 POST 请求的负载数据。
    • 通常是表单数据或 JSON 数据。
  • Preview：预览响应的数据。
    • 适用于 JSON、HTML 等可读格式。
  • Response：查看完整的响应数据。
    • 显示服务器返回的全部内容。
  • Timing：查看请求的时间分段信息。
    • 包括 DNS 查询、连接、等待、接收等各阶段的耗时。
  • Cookies：查看请求和响应的 Cookie 信息。
    • 列出所有相关的 Cookie 及其详细信息。

1.2.5 Performance

用途

  • 性能分析：记录和分析页面的性能表现，包括加载时间、脚本执行时间、渲染时间等。
  • 帧率分析：查看页面在运行时的帧率，识别性能瓶颈。
  • 内存快照：查看和分析内存使用情况，查找内存泄漏和性能问题。

常见操作

  • 记录性能：点击“Record”按钮记录页面性能。
  • 查看分析结果：分析记录的性能数据，查看各阶段的耗时。
  • 内存快照：通过“Heap Snapshot”捕获内存快照，分析内存使用情况。

子菜单和功能

  • Record：记录页面性能数据。
    • 包括加载时间、脚本执行时间、渲染时间等。
  • Frames：查看页面在运行时的帧率。
    • 识别性能瓶颈，优化动画和交互效果。
  • Flame Chart：查看和分析性能数据。
    • 以火焰图形式展示各阶段的耗时，直观显示性能瓶颈。
  • Summary：总结性能数据。
    • 显示各阶段的总体耗时，帮助识别性能问题。
  • Bottom-Up：从底层向上分析性能数据。
    • 显示各函数调用的总耗时，帮助优化代码。
  • Call Tree：查看函数调用树。
    • 展示函数调用的层级关系和各函数的耗时。

1.2.6 Memory

用途

  • 内存分析：分析页面的内存使用情况，查找和解决内存泄漏问题。
  • 三种快照模式：包括Heap Snapshot、Allocation Instrumentation on Timeline、Allocation Sampling，帮助深入分析内存问题。

常见操作

  • 捕获快照：选择一种快照模式并点击“Take snapshot”按钮捕获内存快照。
  • 分析快照：查看和分析内存快照，查找不必要的内存占用。
子菜单和功能
  • Heap Snapshot：捕获内存快照。
    • 分析内存中所有对象及其引用关系，查找内存泄漏。
  • Allocation Instrumentation on Timeline：记录内存分配情况。
    • 分析内存分配和回收的时间轴，识别内存泄漏。
  • Allocation Sampling：采样内存分配。
    • 提供内存分配的采样数据，帮助优化内存使用。

1.2.7 Application

用途

  • 查看应用数据：管理和查看存储在浏览器中的数据，如Cookies、Local Storage、Session Storage、IndexedDB等。
  • 管理缓存：查看和管理应用的缓存，包括Service Workers和Cache Storage。
  • 安全性检查：查看应用的安全性信息，如HTTPS证书和混合内容警告。

常见操作

  • 管理存储数据：查看和编辑Local Storage、Session Storage、IndexedDB等数据。
  • 管理Cookies：查看、添加、删除Cookies。
  • 查看Service Workers：查看和管理Service Workers，检查其状态和注册情况。

子菜单和功能

  • Local Storage：查看和管理 Local Storage 数据。
    • 本地存储的键值对数据。
  • Session Storage：查看和管理 Session Storage 数据。
    • 会话存储的键值对数据。
  • IndexedDB：查看和管理 IndexedDB 数据库。
    • 复杂结构化数据的本地存储。
  • Cookies：查看和管理 Cookies。
    • 列出所有相关的 Cookie 及其详细信息。
  • Cache Storage：查看和管理 Cache Storage 数据。
    • 缓存存储的数据，通常由 Service Worker 使用。
  • Service Workers：查看和管理 Service Workers。
    • 检查其状态和注册情况，调试离线缓存等功能。
  • Web SQL：查看和管理 Web SQL 数据库。
    • 已过时的客户端存储技术，但仍有部分旧应用使用。
  • Application Cache：查看和管理应用缓存。
    • 已废弃的缓存机制，使用现代缓存 API 替代。

1.2.8 Security

用途

  • 安全性检查：查看页面的安全性信息，包括HTTPS证书、混合内容、内容安全策略（CSP）等。
  • 问题提示：显示页面存在的安全问题，提供解决建议。

常见操作

  • 查看HTTPS信息：查看证书的详细信息和有效性。
  • 检查混合内容：识别页面中不安全的资源请求。

子菜单和功能

  • Overview：显示页面的总体安全状态。
    • 包括 HTTPS 证书、混合内容、安全性警告等。
  • Certificate：查看 HTTPS 证书的详细信息。
    • 包括证书颁发者、有效期等。
  • Mixed Content：检查页面是否存在不安全的混合内容。
    • 列出所有通过 HTTP 加载的资源，建议全部改为 HTTPS。

1.2.9 Lighthouse

用途

  • 网站性能和优化建议：生成网站性能、可访问性、最佳实践、SEO和PWA的报告，提供优化建议。
  • 综合评估：帮助开发者全面评估和优化Web应用。

常见操作

  • 生成报告：选择需要评估的指标，点击“Generate report”生成报告。
  • 查看优化建议：分析报告中的各项指标和优化建议，改进网站性能和用户体验。

子菜单和功能

  • Audit：选择需要评估的指标，点击“Generate report”生成报告。
    • 评估包括性能、可访问性、最佳实践、SEO 和 PWA 等方面。
  • Reports：查看生成的评估报告。
    • 分析各项指标的得分和改进建议，优化网站表现。

1.2.10 Console Drawer

用途

  • 快速访问工具：提供对多种工具的快速访问，如Console、Network conditions、Rendering等。
  • 命令面板：通过命令面板快速执行各种操作。

常见操作

  • 切换工具：按 Esc 打开/关闭Console Drawer，快速切换到需要的工具。
  • 命令面板：按 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac) 打开命令面板，输入命令快速执行操作。

1.2.11 Sources Drawer

用途

  • 文件管理：快速访问和管理源文件，包括页面脚本、样式表和图片等资源。
  • 断点管理：管理和查看所有设置的断点。

常见操作

  • 打开文件：按 Ctrl+P (Windows) 或 Cmd+P (Mac) 打开文件，快速定位和查看源文件。
  • 管理断点：在“Breakpoints”面板中查看和管理所有断点。

1.2.12 More Tools

用途

  • 附加工具：访问和使用更多开发者工具，如Performance Monitor、Coverage、Sensors等。
  • 自定义工具栏：根据需要添加或移除工具，定制DevTools工具栏。

常见操作

  • 添加工具：点击菜单栏中的“三点图标”，选择“More Tools”，添加需要的工具。
  • 使用附加工具：根据需求使用Performance Monitor监控性能、使用Coverage分析代码覆盖率、使用Sensors模拟不同的设备和环境。