Artificial intelligence is finding more and more applications – not always successful, but in the case of a new idea from Google, it looks quite promising. The recently introduced Gemini AI feature in Chrome developer tools can significantly simplify debugging pages . Developers can now identify and solve problems faster thanks to AI. In this article, you will learn how to enable this feature and what benefits it brings.

Contents

Gemini AI in Chrome: New feature that improves page debugging

Google has introduced a feature called “ Understand console messages with AI ” in Chrome Developer Tools to help developers troubleshoot code issues faster and easier. Gemini AI analyzes errors and warnings that appear in the console and then translates them into simpler, more understandable language . This allows developers to identify the causes of problems faster and find appropriate solutions. This tool can save many hours spent on manual debugging, improving work efficiency.

gemini ai in google chrome devtools
📸: https://developer.chrome.com/

What conditions must be met to use Understand console messages with AI?

  • First, you need to be located in one of the countries for which the option is available – Poland is one of them .
  • Be at least 18 years old
  • You must be logged in to your Google account in Google Chrome with sync turned on .
  • Have a Google Chrome browser version of at least 125 128.

Explanation

Google's documentation says the feature is available in Chrome 125 and up. That's not true - at least not to a certain extent. I only saw the feature after updating to Chrome 128. It also doesn't mention the need to sync your account.

How to enable Gemini AI in DevTools - step by step

Let's start from the very beginning.

Make sure you have the correct browser version

As I mentioned earlier, you need at least Google Chrome version 128 to run the browser. To check what version you have and update your browser right away:

  1. Click the ellipsis in the upper right corner of your browser
  2. Go to Help
  3. Click on Google Chrome – About.
  4. If you see a version older than 128, the update should happen automatically.
  5. Once the update is complete, restart your browser
chrome 127

Make sure your DevTools settings are correct.

Launch DevTools – by clicking F12 on your keyboard, or by right-clicking > Explore . In Devtools, click the gear icon to go to Settings . If DevTools is communicating with you in English – keep it that way. If it is in another language – switch to English. In the Preferences section, under Appearance, set the language to English (US) – English (US) .
Still in Preferences, scroll all the way down. There you will find the Sync section. If you are not logged in there, log in and enable the Enable setting sync option.

Language devtools
logged in devtools

If you did everything correctly, then while still in the Preferences section, scroll down to Console. There you should find the option " Understand console messages with AI ". If it is enabled, you are ready.

Get explanations for console messages

  1. You can use the prepared demo page.
  2. In DevTools, go to the Console tab.
  3. On the demo page, click on the text box there. You will see: TypeError: Failed to fetch
  4. At the same time you will see error logs in the console.
  5. When you hover your cursor over a record with an error, you will see a light bulb icon.
  6. The first time you click on it, you will see a privacy policy message that you will need to accept.
  7. Once accepted, you will now see error explanations straight from Gemini AI.
devtools gemini ai click

Congratulations! You now have AI right in DevTools!

The Future of Gemini AI at DevTools: What Are the Possible Directions for Development?

The potential for expanding Gemini AI in DevTools is huge. It could add features to predict problems in code based on patterns of known bugs , even before they appear. Another direction could be personalizing suggestions for developers , based on their coding history or preferences. The ability to interactively debug in real time with step-by-step explanations or automatically create more detailed bug reports would also increase work efficiency. The AI could also learn from the developer's projects and suggest code optimizations.

I keep my fingers crossed that the great Chrome alternative – Brave will also implement a similar solution. For now, Chatbot from Brave – Leo is far behind the competition.