Kayce Basques Sofia Emelianova 本页面介绍了与 Chrome 开发者工具控制台相关的功能。本教程假定您已经熟悉如何使用控制台查看已记录的消息和运行 JavaScript。如果尚未设置，请参阅使用入门。 如需查找 console.log() 等函数的 API 参考文档，请参阅 Console API 参考文档。如需参考 monitorEvents() 等函数，请参阅 Console Utilities API 参考文档。 打开控制台 您可以将控制台作为面板或抽屉中的标签页打开。 打开“控制台”面板 按 Control+Shift+J 或 Command+Option+J（Mac）。 如需从命令菜单打开控制台，请开始输入 Console，然后运行旁边带有面板标记的显示控制台命令。 在抽屉式菜单中打开控制台 按 Escape 键或点击自定义和控制开发者工具 ，然后选择显示控制台抽屉。 抽屉式边栏会在开发者工具窗口底部弹出，其中会打开控制台标签页。 如需从命令菜单打开“控制台”标签页，请开始输入 Console，然后运行旁边带有抽屉标记的显示控制台命令。 打开控制台设置 点击 Console（控制台）右上角的 Console Settings（控制台设置）。 要点：请勿将其与 三点状菜单 上方和旁边的 DevTools 设置混淆。 以下链接介绍了每项设置： 隐藏网络 保留日志 仅限已选择的上下文 在控制台中对相似消息进行分组 在控制台中显示 CORS 错误 记录 XMLHttpRequest 及早评估 根据历史记录自动补全 打开控制台边栏 点击显示控制台边栏图标 以显示边栏，该边栏非常适合过滤。 查看消息 本部分介绍了用于更改消息在控制台中显示方式的功能。如需查看实操演示，请参阅查看消息。 停用消息分组 打开 Play 管理中心设置，然后停用将类似消息归为一组，以停用 Play 管理中心的默认消息分组行为。如需查看示例，请参阅记录 XHR 和 Fetch 请求。 查看断点消息 控制台会按如下方式标记由断点触发的消息： 条件断点中的 console.* 调用带有橙色问号 ? 带有粉色两个圆点 .. 的日志点消息 如需跳转到 Sources 面板中的内嵌断点编辑器，请点击断点消息旁边的锚链接。 查看堆栈轨迹 控制台会自动捕获错误和警告的堆栈轨迹。堆栈轨迹是导致错误或警告的函数调用（帧）历史记录。控制台会按相反的顺序显示这些帧：最新的帧位于顶部。 如需查看堆栈轨迹，请点击错误或警告旁边的 展开图标。 在堆栈轨迹中查看错误原因 控制台可以显示堆栈轨迹中的错误原因链（如果有）。 为了更轻松地进行调试，您可以在捕获和重新抛出错误时指定错误原因。控制台会沿原因链向上遍历，并会输出带有 Caused by: 前缀的每个错误堆栈，以便您找到原始错误。 查看异步堆栈轨迹 如果您使用的框架支持，或者直接使用浏览器调度基元（例如 setTimeout），DevTools 可以通过将异步代码的两个部分链接在一起来跟踪异步操作。 在本例中，堆栈轨迹会显示异步操作的“完整过程”。 要点：DevTools 会根据 console.createTask() API 方法实现此“异步堆栈标记”功能。 DevTools 鼓励框架和抽象使用此 API。例如，Angular 支持此功能。 在堆栈轨迹中显示已知的第三方帧 当源映射包含 ignoreList 字段时，默认情况下，控制台会从由捆绑器（例如 webpack）或框架（例如 Angular）生成的来源中隐藏堆栈轨迹中的第三方帧。 如需查看包含第三方帧的完整堆栈轨迹，请点击堆栈轨迹底部的展开 N 个帧。 如需始终查看完整的堆栈轨迹，请停用 Settings（设置）> Ignore List（忽略列表）> Automatically add known third-party scripts to ignore list（自动将已知的第三方脚本添加到忽略列表）设置。 记录 XHR 和 Fetch 请求 打开 Play 管理中心设置，然后启用记录 XMLHttpRequest，以便在发生时将所有 XMLHttpRequest 和 Fetch 请求记录到 Play 管理中心。 上述示例中的顶部消息显示了 Play 管理中心的默认分组行为。以下示例展示了在停用消息分组后，同一日志的显示方式。 跨网页加载保留消息 默认情况下，每当您加载新页面时，Play 管理中心都会清除。如需在页面加载期间保留消息，请打开控制台设置，然后启用保留日志复选框。 隐藏网络消息 默认情况下，浏览器会将网络消息记录到控制台。例如，以下示例中的顶部消息表示 404。 如需隐藏网络消息，请执行以下操作： 打开“管理中心设置”。 启用隐藏网络复选框。 显示或隐藏 CORS 错误 如果网络请求因跨源资源共享 (CORS) 而失败，控制台可能会显示 CORS 错误。 如需显示或隐藏 CORS 错误，请执行以下操作： 打开“管理中心设置”。 选中或取消选中在控制台中显示 CORS 错误复选框。 如果控制台已设置为显示 CORS 错误，并且您遇到了此类错误，可以点击错误旁边的以下按钮： 以在网络面板中打开包含 CORS 相关 TypeError 的请求。 ，在问题标签页中获取可能的解决方案。 过滤消息 您可以通过多种方式在控制台中滤除消息。 滤除浏览器消息 打开控制台边栏，然后点击用户消息，以便仅显示来自网页 JavaScript 的消息。 按日志级别过滤 开发者工具会为大多数 console.* 方法分配严重级别。 分为四个级别： Verbose Info Warning Error 例如，console.log() 属于 Info 组，而 console.error() 属于 Error 组。Console API 参考文档介绍了每种适用方法的严重程度。 浏览器记录到控制台的每条消息也具有严重级别。您可以隐藏不感兴趣的任何级别的消息。例如，如果您只对 Error 消息感兴趣，则可以隐藏其他 3 组消息。 点击 Log Levels（日志级别）下拉菜单，以启用或停用 Verbose、Info、Warning 或 Error 消息。 您还可以按日志级别进行过滤，方法是 打开控制台边栏，然后点击错误、警告、信息或详细。 按网址过滤消息 输入 url: 后跟网址，即可仅查看来自该网址的消息。输入 url: 后，DevTools 会显示所有相关网址。 域名也可以。例如，如果 https://example.com/a.js 和 https://example.com/b.js 是日志记录消息，则 url:https://example.com 可让您专注于这 2 个脚本中的消息。 如需隐藏来自指定网址的所有消息，请输入 -url: 后跟网址，例如 https://b.wal.co。这是排除性网址过滤条件。 您还可以打开控制台边栏，展开用户消息部分，然后点击包含您要重点关注的消息的脚本的网址，以显示来自单个网址的消息。 滤除来自不同上下文的消息 假设您的网页上有广告。广告嵌入在