AI赋能前端:你的Chrome 控制台需要AI(爱)

像会永生那样去学习,像明天就要死亡那样去生活。------圣雄甘地

大家好,我是柒八九 。一个专注于前端开发技术/RustAI应用知识分享Coder

此篇文章所涉及到的技术有

  1. AI(Gemini)
  2. Chrome
  3. DevTool
  4. 🪜魔法
  5. 接码平台

因为,行文字数所限,有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。


前言

不知道大家平时在工作学习中是如何接触新的知识的?反正对于我来说,我喜欢逛各种国外的博客或者官网。因为,通过翻阅这些内容,总是能接触最新的行业动态。(这里不是崇洋媚外,确实在某些领域尤其软件开发方向,国外的技术还是远超我们的)。

之前在观看Google 2024I/O大会时,发现了一个很好玩的东西

Gemini 直接在Chrome控制台中提供数据分析,以便更好地了解错误警告

在观看之后,心里就跃跃欲试了。然后,按照对应的步骤操作后,猛然发现-原来童话里都都是骗人的,之前口口声声说,技术无国界,但是现实确实技术不仅有国界,而且还有壁垒

虽然我满足官网的所有条件,但是我不能够使用它最新的功能。查询发现,这项功能是逐步开放给用户的,优先给国外用户。

要不然,我们这篇文章会在2024/5月和大家见面的。不过,好饭不怕晚。今天(2024/6/21),我终于可以使用这项功能了。

所以,今天我们就来聊聊这个话题。

在这里再多说几句,前几天我们还写了另外一篇文章 - AI 赋能前端 -- 文本内容概要生成,也是讲了利用AI来拓展前端能力。


好了,天不早了,干点正事哇。

我们能所学到的知识点

  1. 环境配置
  2. AI的初体验
  3. AI能力范围
  4. 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功能了。

当我们将鼠标悬浮到灯泡上时,会有一个提示。

首次使用

因为在使用该项功能时候,Google会有用户信息收集的操作,所以他会让我们签订一系列协议。(反正无脑下一步就完事了,毕竟你是在人家的地盘上)

在点击该提示(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的只能够解释在控制台出现的ErrorWarning类型的信息

解释Error类型

上面,我们通过一个简单的例子,直接在控制台上人为构造了一个错误信息。然后AI能够识别并为我们提供解释。

其实呢,AI能够处理一切错误信息。无论是人为触发的还是异步操作等。

解释Waring类型

AI不仅能够为我对控制台中的Error答疑解惑,它还能为出现在控制台中的Waring排忧解难。


4. AI的好处

说实话,当我自己亲自体验了上面的Chrome DevTool AI能力后,有一种发现新大陆的感觉。就像题目所描述的一样- AI赋能前端Chrome DevTool中内置了AI,真的做到了,能够让我们在开发阶段有一个发现问题/查询问题/解决问题的完美路径。

咋说呢,现在写到这里,其实有很多想聊的,但是又不知道咋去描述它。针对Chrome DevTool AI的能力,其实有很多玩法。那么它到底是如何的好,且等大家都把玩后,在评论区告诉我。


后记

分享是一种态度

全文完,既然看到这里了,如果觉得不错,随手点个赞和"在看"吧。

相关推荐
qq_3901617728 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js