{"id":73177,"date":"2025-01-03T21:00:10","date_gmt":"2025-01-03T13:00:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=73177"},"modified":"2025-01-02T20:32:52","modified_gmt":"2025-01-02T12:32:52","slug":"use-ai-assistance-google-chrome-devtools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/use-ai-assistance-google-chrome-devtools\/","title":{"rendered":"How to Use AI for Development Assistance in Google Chrome"},"content":{"rendered":"

Google Chrome<\/strong> 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\u2019s Gemini<\/a> model, it can assist you with various development tasks directly in the browser.<\/p>\n

\"Illustration<\/figure>\n

In this article, we will show you how to enable and use the AI assistant in Google Chrome.<\/p>\n

Enable AI Assistance<\/h2>\n

First, ensure your Chrome browser is up-to-date and that AI features are enabled. To do this, open Chrome DevTools<\/a> and navigate to \u201cSettings\u201d<\/strong> (see the screenshot below).<\/p>\n

\"Chrome<\/figure>\n

In the \u201cAI Innovations\u201d<\/strong> tab, take a moment to read the \u201cThings to Consider\u201d<\/strong> section. This section provides essential information about how generative AI works and is processed.<\/p>\n

\"Important<\/figure>\n

Currently, AI assistance offers several helpful features, including Console Insights<\/strong>, 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.<\/p>\n

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\u2019ll need to be signed in to your Google Account to use these AI features.<\/p>\n

\"Options<\/figure>\n

Using AI Assistance<\/h2>\n

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.<\/p>\n

\"Chrome<\/figure>\n

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?<\/strong><\/q>.<\/p>\n

\"Example<\/figure>\n

It can assist with a wide range of tasks, such as explaining why an element isn\u2019t visible, troubleshooting layout problems, and even suggesting improvements to your CSS!<\/p>\n

Let\u2019s give it a try!<\/strong><\/p>\n

Understanding Elements and Styles<\/h3>\n

Before AI Assistance can analyze an element, you\u2019ll need to select it. You have two options:<\/p>\n