网页编辑模式
启用设计模式将使整个网页可编辑，只需单击并键入即可。
要使用它，请打开控制台并运行：
document.designMode = 'on'
动图
格式化代码
原始文件通常被缩小，因此难以阅读。使用 Pretty Print 选项对其进行格式化
在后台，Chrome 正在创建一个新文件 (names filename.js:格式化)，关闭该文件将撤消格式设置。
如果每次都这样做变得无聊，那么有一个实验性设置可以为所有来源自动启用漂亮的打印。
在⋮→ 设置→实验选择Automatically pretty print in the Sources Panel。
动图
命令盘和超级搜索
命令颗粒使您可以完全访问开发工具中可用的每个命令，对于快速导航非常有用。
键入Ctrl+ Shift+P打开命令菜单，然后开始键入以过滤命令并按回车键执行。
同样的，如果你只是想找一个函数名，你可以使用Ctrl+Shift+O来跨文件过滤方法。
动图
在同一菜单中，您还可以按文件名或代码（HTML、CSS、JS 等）、所有网络请求、可见组件、内存配置文件、片段等搜索所有加载的资源。支持 RegEx 等高级功能。
对于使用框架构建的应用程序，您可能会看到很多不相关的文件（如 node_modules、webpack 输出等）。您可以在⋮→隐藏忽略列表源下隐藏它。默认情况下，这使用智能x_google_ignorelist来检测可能不相关的内容，但您也可以添加自己的自定义源，由设置下的正则表达式指定。
代码片段
因此，您花了一些时间在控制台中制作一个函数，并计划稍后在各种站点上重复使用它。这就是片段的用武之地，它们是从命令托盘调用的，让您保存代码以备后用，并使用 bang！运算符执行它。
动图
实时表达式
无需重复执行命令来监视更改，您可以使用Live Expressions实时观察值。只需执行一个命令，然后使用眼睛图标将其固定以查看自动反映的更改。
这有很多用例，但我经常使用的一个是在测试应用程序的键盘导航时，固定命令document.activeElement将打印焦点元素更改的日志，即使它已从 GUI 中删除。
跟踪更改
我们都去过那里，您一直在通过开发工具编辑应用程序的 HTML、CSS 和 JS，并且一切正常，但您不记得到底更改了什么。这就是Changes 选项卡出现的地方。通过命令面板（使用 Control+Shift+P，然后键入“Show Changes”）或通过下方绘图访问它。
然后您将能够看到所有更改的差异输出。从这里您可以将更改复制到剪贴板，或还原某些更改。
控制台速记
- $()- 简写
Document.querySelector()（选择 DOM 元素，jQuery 风格！） $$()- 同上，但用于全选返回数组中的多个元素时- $_- 返回最后计算的表达式的值
- $0- 返回最近选择的 DOM 元素（在检查器中）
$1...$4也可用于抓取先前选择的 UI 元素- $x()- 允许您使用 Xpath 查询选择 DOM 元素
- keys()和values()- Object.getKeys() 的简写，将返回 obj 键或值的数组
- copy()- 将内容复制到剪贴板
- monitorEvents() 每次触发给定事件时运行命令
- 对于某些常见的控制台命令（如console.table()），您无需键入前面的console.，只需运行table()
您可以随时使用Ctrl+ L、清除按钮或运行来清除控制台clear()
还有更多的控制台速记命令，这里是完整列表。
警告这些技巧仅在开发工具控制台中有效，在您的代码中无效！
查找未使用的代码
使用Coverage工具轻松识别哪些包最大，实际使用了多少代码，以及每个文件的负载影响是什么。这准确说明了哪些代码正在加载但从未使用过，以及它的成本是多少。
单击三个点，选择覆盖范围并重新加载页面。任何红色条表示未使用的代码，并且可能会使您的应用变慢。单击单个文件可让您具体查看未使用的代码。
渲染面板
这个工具对于识别被编辑得比可能需要的更频繁并且可能对性能和用户体验产生负面影响的元素非常有用。
帧渲染统计数据特别有用，可用于监控 CPU 和 GPU 使用情况，帮助您在问题成为问题之前识别它们。
网络绘画时间
您可能熟悉“网络”选项卡呈现的瀑布图，以及它对于检测较慢的请求有多大用处。但从这里，您还可以启用屏幕截图，以准确查看您网站的哪些部分将以视觉方式加载给连接速度较慢的最终用户。
网络时序
单击一个项目会显示标头和响应，但转到“时间”选项卡，您将能够看到请求在哪个阶段被阻止，以及特定的服务器时间。使用Server-Timing API，您可以将更多详细信息从您的 API 传递到您的客户端应用程序，并在浏览器开发工具的 Timings 选项卡中查看数据。要使用它，只需将服务器计时标题添加到您的响应数据中，详细的图表将在开发工具中可见。
要查看网页的总大小，请在“网络”面板下，选中“禁用缓存”，重新加载页面，底部的信息栏将显示总大小、总时间、总请求数和其他关键统计信息。
检查网络请求
您可能已经知道这一点，但您还可以查看您网站发出的任何 HTTP 请求的请求和响应，以及查看加载时间和代码中触发它的位置。
性能
探索性能面板及其所提供的一切真的很值得。只需点击录制按钮，然后像最终用户那样与您的站点进行交互。完成后，您将获得 CPU 使用率、FPS 和分配给堆的内存的详细分类。时间线中出现尖峰的地方通常表示需要优化的代码区域。然后，您可以通过向下钻取火焰图来进一步调查这一点，以查看主线程上发生的所有事情的完整堆栈跟踪。
识别内存泄漏
现代浏览器会自动垃圾收集任何不再被引用的数据。但是写得不好的代码可能意味着您拥有过时的代码引用，这些引用会随着时间的推移而累积，从而导致内存泄漏。这可能不利于性能并大大降低用户体验。
值得庆幸的是，它们并不像您想象的那样难以查找或调试。在 Memory 选项卡下，选择“Allocation instrumentation on timeline”，然后点击记录。
蓝色条表示仍在使用的内存，灰色条表示垃圾收集的内容。因此，一个快速增长的蓝色条将是内存泄漏发生的地方，然后您可以单击该条以准确查看它们包含哪些数据对象，并轻松找出原因。
还值得注意的是，网页并不是内存泄漏的唯一来源。它们也可能是由加载项、浏览器引擎本身甚至数据缓存引起的。使用“统计信息”视图查看哪些数据正在使用内存的细目分类。
原始内存检查
如果您正在构建 Web 程序集应用程序，这对您来说尤为重要。在内存检查器中，您可以向下钻取范围，并检查 ArrayBuffer、TypedArray、DataView 和 Wasm Memory。这是一个 WASM 演示：
动图
测试bfcache缓存
bfcache是一种支持即时向后和向前导航的浏览器功能，它与 HTTP 缓存的工作方式不同，因为它在内存中存储整个页面的快照，这是用户在导航发生时将看到的内容。
为了使 bfcache 功能在您的站点上有效运行，您需要对其进行优化。这就是Back/Forward Cache Tester 的用武之地。在 Application → Back/forward cache 选项卡下，单击“Test back/forward cache”，您将看到列出每帧问题的结果。单击每个结果还会为您提供有关如何修复它的说明。
清空缓存和完全重新加载
有些错误是由缓存内容引起的，对于这些错误，普通刷新是不够的。打开开发工具后，您可以按住刷新按钮（2 秒），您会看到一些额外的刷新选项，包括“清空缓存和完全重新加载”。
这对于测量新用户的首次负载指标也很有用，因为之前没有缓存任何内容。
要一次刷新所有选项卡，只需铬：//重启在地址栏中重新打开即可。
灯塔lighthouse
Lighthouse是一个非常有用（而且简单！）的工具，用于衡量核心网络生命力- 可访问性、SEO、响应性、性能、安全性、PWA 兼容性、最佳实践和整体用户体验。
只需打开 Lighthouse 选项卡，然后单击“开始扫描”。
Lighthouse 结果可以多种格式导出，您可以使用各种外部查看器来获得更多见解（例如这个）。
Lighthouse 扫描也可以合并到您的 CI/CD 系统中，这样您就可以持续了解您的应用程序的核心生命力。
页面大小细分
了解哪些数据正在加载到您的站点将帮助您减少整体包大小。这可以通过“内存”和“网络”选项卡完成，但有时更直观的视图有助于将事物置于上下文中。
Chrome 内存树图对此非常有用——要使用，只需运行 Lighthouse 扫描，将结果导出为 JSON，然后将其导入googlechrome.github.io/lighthouse/…。
您可以单击任何元素以放大并检查其他信息。
记录用户流量
注意 （此功能仍处于测试阶段，目前需要 Chrome 开发版）
在审核面板下记录、回复和审核用户流量。只需单击“开始新录制”，输入名称并点击开始。用户所做的一切，包括鼠标移动、按键、暂停等都将被记录下来。然后，您可以使用 Replay 来回顾用户的旅程。
在回放设置中，每个步骤都可以展开查看详细信息，还可以实时编辑、添加和删除步骤。还有其他选项可用于模拟慢速网络连接环境等情况。这对于用户测试非常有用。
您还可以将用户流导入和导出为 Pupateer 脚本，以便与他人共享。
高级用户流程操作
Record记录器工具还有许多其他经常未被充分利用的有价值的功能。了解您可以做什么，将帮助您加强用户测试。
这在何时有用的?
示例包括：将重新创建错误的确切步骤发送给其他开发人员，向分析师准确演示用户在测试会话期间的行为方式，或放慢速度以调试复杂问题。
记录用户流程后，您可以：
- 重播它（很明显！）
- 查看一段时间内的详细性能指标
- 将其导出（作为 JSON、Puppeteer 或 Puppeteer 回复脚本）
- 编辑流程（然后重新导入）
- 与他人共享用户流（用于测试或演示）
- 配置重播设置，例如应用限制或设备限制
- 慢速回放，详细调试
- 应用断点，在某些步骤暂停和检查
- 导入其他工具生成的用户流
- 添加其他步骤或删除步骤
有几个第三方工具可以让您做更多事情，以及以其他格式导入/导出，例如Cypress 插件、Nightwatch 插件、Jest 插件、WebDriver 插件等。
使用断点暂停执行
断点对于调试来说是绝对必要的。它们使您能够在某个点暂停一切以检查状态并发现问题。您可能已经意识到可以在某个点触发断点，可以使用调试器语句语句，也可以通过单击边距（在源面板中，或使用兼容的 IDE）。但是还有其他几种类型的断点，包括：
- 条件代码行 - 在代码的确切区域，但仅当其他条件为真时。
- DOM - 在更改或删除特定 DOM 节点或其子节点的代码上。
- XHR - 当 XHR URL 包含字符串模式时。
- 事件侦听器 - 在触发事件（例如单击）后运行的代码。
- Exception - 在抛出已捕获或未捕获异常的代码行上。
- 函数 - 每当调用特定函数时。
您还可以制作条件断点（表示为橙色选项卡），这只会在满足某些条件时暂停执行。为此，只需右键单击，选择编辑断点，然后使用 JavaScript 解析使用当前状态的布尔值。
如果您想暂停特定的方法，只需运行即可调试（方法名）取消调试（方法名）开始和结束。
遇到断点后，您可以通过控制台与任何当前状态进行交互。
远程调试
正如任何应用程序开发人员都会告诉您的那样，没有什么比在真实设备上进行测试更好的了。但是说到网络，浏览器的调试工具是必不可少的。这就是远程调试的用武之地——它使您能够在物理设备上进行测试，同时继续拥有浏览器工具的调试能力。
反之亦然，您可以在本地运行您的开发环境或远程托管它，但可以在外部设备上访问它。
这确实需要端口转发或自定义域映射（但都没有听起来那么可怕！）。文档提供设置说明和代理配置。
如果您正在开发具有嵌入式 Web 视图的本机 Android 应用程序，您也可以使用浏览器的开发工具来调试这些应用程序（文档）。
模拟位置和传感器
与 iOS 和 Android 模拟器类似，您可以模拟各种传感器和硬件设置。如果您开发的应用程序依赖于任何此类数据，这将非常有用。在“传感器”选项卡下，您将能够更改您的位置、时区、区域设置、屏幕锁定、方向、运动/加速度等。
如果您经常发现自己在位置或语言环境之间切换，您可以在设置 --> 位置下添加这些。
动图
不再淹没于报错提示！
如果您正在处理一个庞大的代码库或处理一个写得不好的库，并且淹没在异常中，这些异常会分散您对您实际尝试调试的内容的注意力，那么在设置下您可以选择忽略某些抛出的任何异常脚本或来自给定的框架。忽略列表可以由特定目标的正则表达式模式指定。
您可以通过前往 ⋮ → 忽略列表并选择“自动将已知的第三方源添加到忽略列表”来自动隐藏大多数主要框架的源文件。这将使控制台中的堆栈跟踪显示更少的无关信息。您仍然可以查看任何给定错误的完整堆栈，只需单击“显示更多”即可。
默认情况下，控制台将显示所有上下文的输出。这意味着如果你安装了一个扩展，它会抛出一个错误，它会弄乱你的控制台。只需右键单击文件名，然后在过滤器下选择隐藏来自 [ext name] 的消息。您可以随时从同一菜单中取消隐藏这些。
查看和编辑存储
当我们在“应用程序”选项卡中时，值得一提的是这些工具对于查看、删除和编辑存储在本地存储、会话存储、cookies、IndexedDB 等中的数据是多么重要。
从存储选项卡中，您还可以查看站点存储量的明细，并模拟自定义存储配额或禁用 cookie 等限制。
请注意，存储的数据（通常）只能从设置该数据的域访问。因此，如果您在控制台中为除默认上下文之外的任何上下文调试存储的数据，则需要使用顶部的框架下拉列表来切换域。
调试后台服务
如果您的应用程序包括通知、同步、后台获取或任何其他即使应用程序/当前选项卡不在前台也应该继续运行的东西，那么这些工具是无价的。在“应用程序”选项卡的“后台服务”部分下，您可以单击一个 API 类别，开始记录，然后将您的应用程序置于后台。当您回来时，您将能够具体查看触发了哪些事件，并检查每个事件。
旁注，您可以查看所有已注册的服务工作者，管理、调试和注销它们：chrome://serviceworker-internals
HTTPS 安全检查
安全选项卡提供了一个很好的起点，用于验证站点上的常见 HTTPS 问题。它检查并突出显示常见的 SSL 问题，包括不安全的主要来源和混合内容。您还可以更详细地检查 Web 证书链。
网页认证
这有点小众，但如果您使用软令牌或 2FA 构建任何东西，那绝对是必不可少的。WebAuthn 工具可让您使用各种协议（2FA、FIDO/CTAP）和接口类型（USB、NFC、蓝牙、内部）生成和模拟虚拟身份验证器设备，并提供用于用户验证、常驻密钥等的附加选项。
这是一个快速演示：
动图
有关 Web 身份验证的概述，请参阅WebAuthn.guide或查看W3 规范
在旁注中，有一篇有趣的文章解释了他们如何构建 webauthn 选项卡。
辅助工具
可访问性不仅对包容性很重要，它也是大多数面向公众的应用程序和服务的法律要求。如果您还不确定 Web 可访问性标准的核心概念，我推荐 Web.Dev可访问性教程，它提供了一个很好的总结。
Lighthouse 为审核可访问性提供了一个很好的起点，并且易于使用，并直接内置于开发人员工具中。
CSS 工具还有一个内置的对比工具，可以帮助您将可读的颜色应用到您的站点。检查弹出窗口将显示警告，您可以在 Styles pain 中进一步分析它。
除此之外，“辅助功能”选项卡让您可以查看元素在 DOM 树中的位置、ARIA 属性和计算的辅助功能属性，所有这些都由屏幕阅读器等辅助工具使用。
还有其他附加组件可以为您提供更强大的见解。主要是ax DevTools。这将向您显示详细的结果和如何修复的说明。
截图
您可以直接从开发工具中截取屏幕截图，包括：整页、特定区域或单节点屏幕截图。
打开命令面板并键入 screenshot，或者对于元素屏幕截图，只需在检查器中右键单击 DOM 元素并选择 Capture Screenshot。
超级复制
在元素选项卡中，右键单击一个元素，然后在复制下，有几个不同的选项。复制选择器会给你一个 CSS 选择器来定位那个元素，类似地复制 JS 路径会给你一个查询字符串来选择 JavaScript 中的元素，复制外部 HTML 会复制实际的 HTML。复制元素的样式，将为您提供给定元素的所有计算 CSS。
动画时间轴
动画面板（通过单击 3 点打开）让您可以记录任何关键帧动画，然后通过它们来检查受影响的实际 CSS 属性。
动图
强制要素状态
如果您需要预览特定状态下给定元素的样式（例如：hover、:visited、:active、:focus 等），请右键单击它并选择 Change pseudo class，或者从样式编辑器中单击:hov 图标。
动图
CSS 大小和单位
你有没有检查过一个元素，然后一直按住向上/向下箭头键直到尺寸看起来合适？那么您也可以水平拖动单位以轻松预览不同的尺寸。同样，对于角度，您可以使用时钟旋转器来预览/应用任何值。弄错单位了？只需将鼠标悬停在尺寸上，然后单击下拉菜单即可快速切换单位。
动图
彩色托盘
大多数应用程序只包含少数几种颜色，通常当您更改颜色时，它会变成这些值中的一种。这就是调色板工具如此有用的原因。默认情况下，有几个预制调色板：来自您页面的当前颜色、您的页面 CSS 变量、Material pelette 和一个空的自定义调色板。用箭头在它们之间切换。
当我们在这里时，还值得一提的是颜色工具的强大之处。从这里您可以：
- 更改颜色深浅、色调和透明度 - 使用实时预览
- 在单位之间转换（十六进制、RGB(A)、HSL(A)、HWB(A)）
- 使用滴管从屏幕上选择任何颜色
- 将颜色值复制到剪贴板
如果您还没有这样做，请尝试在整个应用程序中使用 CSS 变量（而不是 SASS 变量）。这样你就可以在一个地方更新颜色，并在所有地方预览/应用它。在开发工具中，单击一个变量名称以转到原始定义，您可以从那里修改它。
动图
简单的盒子阴影
盒子阴影是最好的实时预览之一。这就是影子编辑器如此有用的原因。只需单击任何阴影旁边的图标即可预览嵌入阴影和正常阴影的不同 X/Y 偏移、模糊、扩展和方向。
动图
简单的动画
通过单击动画选项，您可以轻松预览各种过渡和效果。
动图
响应式设计模式
使用响应式设计模式轻松检查您的网站是否在各种设备上都能很好地显示。
默认情况下只显示一些设备，但前往设置 --> 设备，您将能够从列表中启用更多设备，甚至可以创建您自己的自定义设备，包括尺寸、用户代理、平台、架构和更多的。
动图
徽章
您可能会注意到“元素”选项卡中某些元素旁边有一个小筹码/徽章。这些是Badges，可用于应用叠加层或向某些元素类型添加额外功能，包括网格、Flex 布局、广告、滚动快照、容器、插槽等。要启用徽章，请右键单击 DOM 树中的一个元素并选择徽章设置，然后选中/取消选中您希望显示的内容。
其中许多徽章打开了通往其他功能的大门，例如Flexbox 调试器和网格布局调试器
标尺
总是有这样一个前端开发人员，为了取悦设计师，他使用一把真正的尺子来测量屏幕上的元素。好吧，不需要那个，也不需要任何狡猾的标尺浏览器扩展，因为这个功能直接内置在开发工具中。在⋮→设置→首选项→元素→“悬停时显示标尺”下启用它。
动图
在 Firefox 中，有一个内置的标尺功能，可通过右上角的工具箱按钮使用。
动图
样式概览
CSS 概览选项卡可帮助您快速了解您可以进行的 CSS 改进。目标是一致性（颜色、字体、断点、样式等）。
- 调色板 - 显示您网站上使用的所有颜色。用于识别不符合您所需主题/设计的元素
- 字体 - 显示页面中使用的所有字体、大小和变体。一个好的网页将只与少数几种字体和文字样式保持一致。
- 媒体查询 - 输出站点中使用的所有断点，按出现次数最高排序。您应该致力于使它们保持一致，以使响应式测试更容易
- 未使用的声明 - 列出有关任何未使用的声明以及无效样式的关键信息。删除这些将加快加载时间，并使 CSS 更易于阅读。
动图
图层
图层面板（更多工具 → 图层）将显示屏幕外和附加图层（使用 3d 模式）上发生的情况。
从功能的角度来看，它对于可视化特定动画的工作方式特别有用，而无需费力地浏览一堆关键帧和混淆代码。
将更改保存到磁盘
有两种方法可以保存或保留您在开发工具中所做的更改。工作区和本地覆盖。
工作区使您能够将在开发工具中所做的更改直接保存到磁盘上的工作副本
工作区可以在源→文件系统→添加文件夹下设置。它们支持 HTML、CSS 和 JavaScript，并且可以直接通过源面板编辑、预览和保存内容。某些框架需要一些额外的设置才能正常工作。
本地覆盖使您能够跨会话保留更改（但不影响原始源文件）
可以在源→覆盖下设置覆盖。您可以使用“更改”菜单来预览/导出您所做更改的差异。
自动化
对于更高级的任务，开发人员工具中的所有内容都可以通过自动化 API使用WebDriver 协议（ Selenium等工具使用的）实现自动化。例如，请参阅webdriver devtools包。
熟悉的快捷方式
因此，浏览器开发人员工具中的几乎所有内容都有键盘快捷键，这是完整列表。但如果你正在努力记住它们，那么你实际上可以切换到熟悉的 VS 代码绑定。在 Settings --> Shortcuts 下，在 Match shortcuts from preset 菜单下，选择 Visual Studio Code。
深色模式
最后，但也是迄今为止最重要的提示：开发工具暗模式！
在 Settings --> Preferences --> Appearances --> Theme 下，使用下拉菜单从 Light 切换到 Dark，立即将您的开发人员体验提升 10 倍。因为就像他们说的...虫子(bug)会被光吸引 🐛🔦
如果你对默认的暗模式太酷了，你可以编写自己的样式表，然后启用 CSS 的自定义加载！这里有一些预制的样式表和一个扩展。
有用的附加组件
我们还没有完全完成……到目前为止，我们只介绍了内置的开发工具，但是还有很多非常有用的附加组件/扩展
如果您使用的是特定框架（如 React、Svelte、Vue 等），那么添加他们的开发工具可为您提供针对组件、状态等的额外调试能力。
- React Dev Tools - 检查 React 组件层次结构和配置文件数据
- Redux Dev Tools - 调试 redux 数据并监控状态变化
- GraphQL Network Inspector - 检查支持中继批处理的 GQL 请求
- Vue Dev Tools - 在 Vue 应用程序中调试组件层次结构和状态
- Svelte 开发工具- 检查 Svelte 状态和组件层次结构
- Angular Dev Tools - Angular 组件实例指令的预览状态
- Meteor Dev Tools - 调试 Meteor 应用程序
除此之外，几乎所有其他事情都可以在诞生时完成/无需额外的扩展，仍然有一些 QoL 附加组件可以提供帮助，但请记住，如果您使用其中任何一个，您应该在您的浏览器，否则它们可能会对您的隐私产生负面影响（安装的扩展程序会使您更容易被识别）。
- Visbug - 与任何网站交互并修改任何网站，无需任何 HTML 或 CSS 知识
- Lighthouse - 自动化的性能、质量和正确性检查器
- Designer Tools - 用于浏览器内测量和对齐的网格和标尺
- Motion Tools - 检查和设计复杂的 CSS 动画
- Pixel Perfect - 在网页上叠加设计以构建像素完美页面
- CPU + Mem Performance Monitor - 添加系统资源覆盖到站点
- SEO Inspector - 轻松检查 SEO 元标记
- 保存所有资源- 轻松下载与站点相关的所有内容，保留目录结构
- 多代理- 通过 IP 匹配和阻止（同时）连接到多个代理
- Accessibility Insights - 概览无障碍导航问题
- 检查我的链接- 快速查找并突出显示页面中的所有无效链接
- Weppalizer - 类似于BuiltWith，快速检查网站使用的是什么技术
- Octotree - 在 GitHub 上添加侧边栏以便于导航
完了吗？
浏览器开发工具的内容远不止这里介绍的那么多。即使您已经做了几十年的 Web 开发人员，我也很确定仍然有一大堆方便的功能是您还没有遇到过的。所以不要害怕去探索！
最好的功能仍处于试验阶段。您可以通过在设置 --> 实验下启用它们来试用它们。每个项目旁边都有一个链接，您可以在其中查看使用教程和 API 文档。
其它浏览器：
- Firefox 开发工具具有与 Chrome 非常相似的功能集和布局，但包括一些高级功能（围绕音频、着色器）
- Safari 的开发者工具在功能方面比较落后，但有时仍然需要 iOS 测试。
- 其他基于 Chromium 的浏览器（如 Edge、Brave、Vivaldi 等）继承自与 Chrome 相同的来源，因此具有几乎相同的开发工具。
以下资源非常适合与最新的调试工具保持同步：
