像会永生那样去学习,像明天就要死亡那样去生活。------圣雄甘地
大家好,我是柒八九 。一个专注于前端开发技术/Rust
及AI
应用知识分享 的Coder
此篇文章所涉及到的技术有
AI
(Gemini
)Chrome
DevTool
- 🪜魔法
- 接码平台
因为,行文字数所限,有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。
前言
不知道大家平时在工作学习中是如何接触新的知识的?反正对于我来说,我喜欢逛各种国外的博客或者官网。因为,通过翻阅这些内容,总是能接触最新的行业动态。(这里不是崇洋媚外,确实在某些领域尤其软件开发方向,国外的技术还是远超我们的)。
之前在观看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
的能力,其实有很多玩法。那么它到底是如何的好,且等大家都把玩后,在评论区告诉我。
后记
分享是一种态度。
全文完,既然看到这里了,如果觉得不错,随手点个赞和"在看"吧。