Playing with the AI Assistance Panel Built into Chrome DevTools
People who use Chrome DevTools often may have noticed a tab called "ai assistance" on the right side of the Console panel. This is an AI tool that can be used in DevTools. It is available in Chrome Canary 131 and later.
The official page below has details about the AI assistance panel.
For now, I will quote the official page on what it can do.
> With the AI assistance panel, you can chat with Gemini directly from DevTools. Conversations that you start from this panel automatically include context about the technical details of the page you are inspecting. > > When using the AI assistance panel, you can use the provided sample prompts or your own questions as a starting point for the conversation, and continue with as many follow-up questions as needed to solve your task.
The fact that it already has the context of the page being rendered is excellent. It means you do not have to copy and paste code every time you want to ask something. The conditions for using the AI assistance panel are listed as follows.
> - You are at least 18 years old and located in a supported region. > - You are using the latest version of Chrome. > - You are signed in to Chrome with a Google Account. > - In Settings > Preferences > Appearance > Language, English (United States) is selected. > - In DevTools, Settings > AI innovations is enabled.
I see. Then let's try using it right away.
First, I moved to the top page of this site and tried to get the class of text displayed on the screen. I tried accessing the text "Current Tech Spotlight." It is great that you can ask in natural language without writing selectors.
The AI recognized it as an h2 and was able to retrieve its class. It can not only retrieve information on the screen, but also change screen information. What happens if I ask it to change "Current Tech Spotlight" to "Today's Special"?
First, it output a code sample showing what it would execute. It was instant. If that looks OK, press the "Continue" button.
Then the text on the top page changed.
While coding, it may be useful to make various adjustments in a REPL-like way, or to ask questions that depend on the context after rendering. Since you can keep asking questions while browsing, it also seems useful for technical analysis.
As a test, I asked the AI what framework this site uses. This site uses Next.js, but because it is exported and used, it is effectively just static HTML. How much would it infer?
> Based on the presence of _next/static/chunks in the script URLs, it's highly likely that this site is using Next.js. The class names on the body element, such as font-sans, c-yhfe-bg-default, and bg-white, seem to be utility classes, which are often used in conjunction with frameworks like Tailwind CSS. Therefore, it's likely that the site uses Next.js with Tailwind CSS.
From the URLs and class names in the code, it inferred that the site uses Next.js and Tailwind CSS. Impressive.