像会永生那样去学习，像明天就要死亡那样去生活。------圣雄甘地
大家好，我是柒八九 。一个专注于前端开发技术/Rust及AI应用知识分享 的Coder
此篇文章所涉及到的技术有
AI(Gemini)ChromeDevTool- 🪜魔法
- 接码平台
因为，行文字数所限，有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。
前言
不知道大家平时在工作学习中是如何接触新的知识的？反正对于我来说，我喜欢逛各种国外的博客或者官网。因为，通过翻阅这些内容，总是能接触最新的行业动态。（这里不是崇洋媚外，确实在某些领域尤其软件开发方向，国外的技术还是远超我们的）。
之前在观看Google 2024I/O大会时，发现了一个很好玩的东西
让
Gemini直接在Chrome控制台中提供数据分析，以便更好地了解错误 和警告
在观看之后，心里就跃跃欲试了。然后，按照对应的步骤操作后，猛然发现-原来童话里都都是骗人的，之前口口声声说，技术无国界，但是现实确实技术不仅有国界，而且还有壁垒。
虽然我满足官网的所有条件，但是我不能够使用它最新的功能。查询发现，这项功能是逐步开放给用户的，优先给国外用户。
要不然，我们这篇文章会在2024/5月和大家见面的。不过，好饭不怕晚。今天(2024/6/21)，我终于可以使用这项功能了。
所以，今天我们就来聊聊这个话题。
在这里再多说几句，前几天我们还写了另外一篇文章 - AI 赋能前端 -- 文本内容概要生成,也是讲了利用AI来拓展前端能力。
好了，天不早了，干点正事哇。
我们能所学到的知识点
- 环境配置
- AI的初体验
- AI能力范围
- AI的好处
1. 环境配置
使用该项功能时，有一个大前提，就是我们需要借助🪜魔法，如果你无法使用，那此篇文章或者该项目功能对你来说毫无作用。
下图是，开启此项魔法的各种钥匙：
🪜魔法
我们从上面的图片中得知，要想在Chrome中开启该项功能，必须具备很多条件，并且这些条件都是缺一不可的。
其中，最重要的就是我们需要使用🪜魔法，曲线救国。
上图中我的🪜地址是英国，所以上图中显示的是Your location(GB) is supported,但是如果我们将🪜改到我大中华地区(直接访问或者香港)都是被拒绝的。
如何弄一个合适的🪜，不在我们这篇文章的讨论范围内。这里不做解释。如果不知道的话，你可以问问张良。
毕竟，你有张良计，我有过墙梯。
使用高版本的Chrome
学会使用魔法是第一步，第二步呢我们需要升级我们的武器库，也就是我们需要将Chrome版本升级到>125。
我们可以在Chrome的输入框中直接输入chrome://settings/help来查看你本机的版本信息。
截止2024/06/21，最新的Chrome版本为126.0.6478.115。
搞一个Google账号
如果你真的受够了，可爱的国产浏览器(360/搜狗/百度/UC)，墙裂推荐Chrome。反正它有各种意想不到的特性和功能。
既然都用到了Chrome，那为何不更近一步，在注册一个Google账号呢。
到这步其实对于大家就有点犯难了，虽然有了🪜魔法的加持，但是呢，注册国外软件，需要短信验证。不是人人都有外国亲戚或者朋友。那么，我们可以借助一些接码平台来做这些事。
关于接码平台有很多，有免费的，有收费的。在这里我们推荐一个平台，也是我经常用的。- sms-activate。这玩意需要充值消费哈，不过他支持支付宝付款。
更详细的使用方法，大家自行探索哇。这里也不再多介绍了。
开启AI配置并设置语言环境
当我们打开DevTool时候，我们可以点击最右侧的配置按钮
在Perferences/Console中开启'Understand console messages with AI'的配置选项
在Perferences/Appearance/language中选择English(US)选项。
如果，我们之前设置过
Chrome的语言，那么务必设置为English(US)。
因为，Chrome如何设置的是非English(US)的话，是不能够开启该项功能。
替换方案
当然，如果有的小伙伴在执行完上述操作后，还是无法使用该功能亦或者在DevTool中的配置页面中没有'Understand console messages with AI'的配置选项,那我们还可以选择其他方式。
我们可以下载Chrome Dev，这是一款开发者专用的 Google Chrome。
然后，配置步骤还是和之前的一样，这样我们也可以使用此项功能。
这里提前透露一下，下载了
Chrome Dev版本，我们还可以使用另外一个AI功能 -window.ai，该功能是内置在Chrome中的，然后不需要和后端服务对交互，该功能也是Google I/O中提出的。(这个我们会单出一篇文章来介绍的)
2. AI的初体验
通过第一节的配置，我们已经为Chrome DevTool开启了AI功能。现在就是到了我们验证的时刻了。
打开一个空页面，随后打开控制台。我们在控制台中随意输入一些一眼假的语法。如下图所示：
当输入一段JS引擎无法解释的代码后，在控制台会输出对应的错误信息，并且会有相应的调用栈信息。这是我们熟悉的模式。
但是呢，正如上图中标注的一样，当我们把鼠标悬浮到错误信息上时，在最右侧会出现一个灯泡 图案。如果你看到这个图案，那么恭喜你，我们已经能够在控制台中使用AI功能了。
当我们将鼠标悬浮到灯泡上时，会有一个提示。
首次使用
因为在使用该项功能时候，
在点击该提示(Understand this error)，如果我们是第一次使用该功能，会出现下面的步骤，这是一份隐私声明。
那么下一步就完事了。
还是熟悉的步骤，勾选，然后继续下一步。
执行到这一步后，也意味着我们同意Google的各项协议。那么，人家才会给为你提供AI功能。
AI为我们答疑解惑
要想更好的利用
AI的能力，我们需要更好的英文阅读能力，因为它给出的解释和方案都是英文。
还是之前的例子，在控制台遇到错误后，当我们点击小灯泡后，AI就会为我们基于这个错误为我们提供错误解释和修正建议
错误解释
基于这个示例来讲，AI会为我们解释出现ReferenceError: front789 is not defined这个错误的各种可能原因。
既然，相关的病因找到了，那么接下来就是对症下药了。
错误修正
AI会为之前的诊断结果，给出相应的整改方案。
但是呢，它只是提供了一种解决思路和方向，这小子很鸡贼，它有一个免责声明(Use code snippets with caution)。
也就意味着，它只是提供了几种解决思路和方式，而不是最终的结果。
搜索引擎
因为这是AI生成的内容，有时候可能受限于AI模型的理解能力或者答案的准确性，此时Chrome DevTool还为我们提供了针对上面错误的搜索关键字。
当我们点击最下面的Use search instead,Chrome会新开一个Tab，然后搜索关键字就是在控制台显示的错误信息ReferenceError: front789 is not defined
这就是把对应的错误处理权又交回给开发者了。
3. AI能力范围
AI的只能够解释在控制台出现的Error和Warning类型的信息
解释Error类型
上面，我们通过一个简单的例子，直接在控制台上人为构造了一个错误信息。然后AI能够识别并为我们提供解释。
其实呢，AI能够处理一切错误信息。无论是人为触发的还是异步操作等。
解释Waring类型
AI不仅能够为我对控制台中的Error答疑解惑，它还能为出现在控制台中的Waring排忧解难。
4. AI的好处
说实话，当我自己亲自体验了上面的Chrome DevTool AI能力后，有一种发现新大陆的感觉。就像题目所描述的一样- AI赋能前端。Chrome DevTool中内置了AI，真的做到了，能够让我们在开发阶段有一个发现问题/查询问题/解决问题的完美路径。
咋说呢，现在写到这里，其实有很多想聊的，但是又不知道咋去描述它。针对Chrome DevTool AI的能力，其实有很多玩法。那么它到底是如何的好，且等大家都把玩后，在评论区告诉我。
后记
分享是一种态度。
全文完，既然看到这里了，如果觉得不错，随手点个赞和"在看"吧。