如何启用Chrome开发者工具AI辅助以提升开发效率

谷歌浏览器是世界上更流行的 *** 浏览器之一。它速度快、安全、功能多，使用方便。谷歌浏览器最近推出的最令人兴奋的功能之一是 AI 创新（AI innovations）。它由谷歌的  模型提供支持，可以直接在浏览器中协助您完成各种开发任务。

在本文中，我们将向你介绍如何在 Google Chrome 浏览器中启用和使用 AI 助手。

启用AI助手

首先，确保您的 Chrome 浏览器是最新的，并且已启用人工智能功能。为此，请打开 Chrome 浏览器开发者工具并导航至“设置”（见下面的截图）。

在“AI 创新（AI innovations）”选项卡中，请花点时间阅读“注意事项”部分。该部分提供了有关生成式人工智能如何工作和处理的基本信息。

目前，AI 辅助提供了几种有用的功能，包括控制台洞察，它可以帮助你更好地理解控制台中的错误和警告。它还提供一般帮助，允许你提出有关页面、元素等方面的问题。

要激活 AI 功能，请将其切换为“打开”。展开每项功能的下拉菜单，会提供更多有关其工作原理的信息，以及主要的隐私注意事项。请注意，您需要登录 Google 账户才能使用这些人工智能功能。

使用AI辅助

启用后，您可以访问控制台中的 AI 辅助（AI assistance）选项卡（见下图）。在这里，您可以像在一般聊天应用中一样与人工智能辅助进行交互。

由于 AI 辅助功能内置于浏览器中，因此它能了解您当前浏览会话的上下文，并能直接访问页面内容和浏览器 API。您可以先问一个一般性的问题，比如 “What can you help me with?”.

它可以协助完成各种任务，例如解释元素不可见的原因、排除布局问题，甚至对 CSS 提出改进建议！

了解元素和样式

在 AI 助手分析元素之前，你需要先选中它。你有两个选择：

• 使用元素选择器：这是 Chrome DevTools 中选择元素的标准 *** 。
• 右键单击 DOM 树中的元素，然后选择“Ask AI”： 这是针对特定元素的更快捷选项。

例如，让我们选择网站导航栏中的下拉菜单，然后问人工智能：Why is this element not visible?

AI 助手会诊断出问题所在，并提供有用的解决建议。

调试错误和警告

AI 辅助工具最有用的一点就是它的调试功能。例如，如果您在控制台中发现警告，并且启用了人工智能辅助功能，Chrome 浏览器将在每条警告信息旁边显示“Understand this warning”按钮。

单击该按钮会生成警告解释，并提出解决 *** 。

页面优化

除了 HTML、CSS 和调试之外，人工智能协助还可以帮助优化页面性能和搜索引擎优化。例如，您可以问：What do you suggest to improve the load performance of this page?

AI 助手会对页面进行分析，并提供若干改进建议。

注意事项

目前 Chrome 提供的 AI 辅助功能暂未对中国地区提供支持。如果需要在中国境内使用该功能，您可能需要执行以下操作：

使用VPN

• • 连接到美国的服务器，通过VPN更改您的IP地址。这样您的设备会被视为位于美国，从而帮助您解锁Google Genius。
  • 确保使用稳定和可靠的VPN工具，避免因访问限制而连接失败。

更改Chrome语言设置

• • 打开Chrome浏览器，进入设置 > 语言。
  • 将默认语言设置为英语（美国）。
  • 如果语言选项中没有英语（美国），可以添加后，将其置于之一位。
  • 重启浏览器后尝试再次访问Google Genius。

修改HTTP Header

• • 下载一个浏览器扩展（如 ModHeader）。
  • 在扩展中修改 Accept-Language 设置，添加或优先指定 en-US 值。
  • 这个 *** 可以伪装您的语言和地区偏好，使Google Genius认为您在美国。

清除Chrome缓存和数据

• • 如果之前的尝试无效，可以尝试清除浏览器缓存。
  • 进入 设置 > 隐私和安全性 > 清除浏览数据，选中缓存和Cookies。
  • 之后重新启动浏览器并通过VPN尝试访问。

检查Google账户的地区设置

• • 登录您的Google账户并进入账户设置。
  • 确保您的账户地区设置为美国。
  • 某些功能可能与账户地区绑定，因此更改地区后需过一段时间才能生效。

小结

Chrome DevTools 中的人工智能辅助功能为各种开发任务提供了简化的 *** ，为理解错误、调试问题和优化页面性能提供了便利和自动化。

这对初级 *** 开发人员来说是一个特别有用的新增功能，它能为常见问题提供即时解答，而无需在谷歌搜索、Stack Overflow 和浏览器之间不断切换。经验丰富的开发人员可能会觉得目前的功能不太必要，因为他们很可能已经掌握了很强的调试和优化技能。不过，人工智能辅助仍然是一个得心应手的工具。

由于这项技术仍处于早期阶段，因此还有很大的改进空间。扩展其功能以处理更复杂的问题，并为 React.js 和 Vue.js 等框架添加特定支持，将是非常有价值的补充。Chrome DevTools 中的人工智能辅助功能未来将如何发展，让我们拭目以待。