Google Chrome is one of the most popular web browsers in the world. It is fast, secure, and packed with features that make it easy to use. One of the most exciting features recently introduced in Google Chrome is AI assistance. Powered by Google’s Gemini model, it can assist you with various development tasks directly in the browser.
In this article, we will show you how to enable and use the AI assistant in Google Chrome.
Enable AI Assistance
First, ensure your Chrome browser is up-to-date and that AI features are enabled. To do this, open Chrome DevTools and navigate to “Settings” (see the screenshot below).
In the “AI Innovations” tab, take a moment to read the “Things to Consider” section. This section provides essential information about how generative AI works and is processed.
Currently, AI assistance offers several helpful features, including Console Insights, which helps you better understand errors and warnings in the Console. It also provides general assistance, allowing you to ask questions about the page, elements, and more.
To activate the AI features, toggle them on. Expanding the dropdown for each feature will provide more information about how it works, along with key privacy considerations. Note that you’ll need to be signed in to your Google Account to use these AI features.
Using AI Assistance
Once enabled, you can access the AI Assistance tab within the Console (see the image below). Here, you can interact with AI Assistance just like you would in a typical chat app.
Since AI Assistance is built into the browser, it understands the context of your current browsing session and has direct access to the page content and browser APIs. You can start by asking a general question like, What can you help me with?
.
It can assist with a wide range of tasks, such as explaining why an element isn’t visible, troubleshooting layout problems, and even suggesting improvements to your CSS!
Let’s give it a try!
Understanding Elements and Styles
Before AI Assistance can analyze an element, you’ll need to select it. You have two options:
- Use the element selector: This is the standard way to choose an element in Chrome DevTools.
- Right-click the element in the DOM tree and select “Ask AI”: This is a quicker option for targeting specific elements.
For instance, let’s choose the dropdown menu in the navigation bar on Hongkiat.com and ask the AI, Why is this element not visible?
AI Assistance should diagnose the issue and provide helpful suggestions to resolve it.
Debugging Errors and Warnings
One of the most useful aspects of AI Assistance is its debugging capabilities. For example, if you notice warnings in the Console, and AI Assistance is enabled, Chrome will display an Understand this warning
button next to each warning message.
Clicking this button generates an explanation of the warning and suggests ways to resolve it.
Page Optimization
Beyond HTML, CSS, and debugging, AI Assistance can also help optimize your pages for performance and SEO. For instance, you could ask, What do you suggest to improve the load performance of this page?
.
AI Assistance will analyze the page and provide several suggestions for improvement.
Wrapping Up
AI assistance in Chrome DevTools offers a streamlined approach to various development tasks, providing convenience and automation for understanding errors, debugging issues, and optimizing page performance.
This is a particularly useful addition for beginner web developers, offering immediate answers to common problems without the need to constantly switch between Google Search, Stack Overflow, and the browser. Experienced developers may find the current features less essential, as they likely already possess strong debugging and optimization skills. However, AI assistance can still be a handy tool.
As this technology is still in its early stages, there’s significant potential for improvement. Expanding its capabilities to handle more complex problems and adding specific support for frameworks like React.js and Vue.js would be valuable additions. It will be interesting to see how AI assistance in Chrome DevTools evolves in the future.
