Chrome开发者模式

一、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:查看应用运行时的日志、警告和错误信息。
    • 日志等级包括:loginfowarnerror
  • 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模拟不同的设备和环境。