Gemini AI inside Chrome DevTools to Debug Errors

Introduction

Gemini, formerly known as Bard, is a generative artificial intelligence chatbot developed by Google.
(Source: Wikipedia)

TLDR: Gemini is another ChatGPT but by Google :)

In this blog, we will be discussing about Gemini - not the usual one but the one that is now integrated in to Chrome DevTools and help us debug right in there; instead of copy pasting the code from console to some AI chatbot like Gemini, ChatGPT or GitHub Copilot Chat.

This feature is called as Understand console messages with AI

Official Documentation: https://developer.chrome.com/docs/devtools/console/understand-messages

Video Explanation

I have made a short and quick video for this explanation:

Enable the feature

In order for you to enable this feature, you will have to:

Open Chrome DevTools (Press F12)
Go to Settings > Preference > Console
Turn on "Understand console messages with AI"

Understand Console Messages with AI

Now the magic is somewhat similar as what we have been experiencing since the introduction of such tools.

Lets take a look at it.

Open a Chrome DevTool on any webpage, preferably an empty page and clear the logs if there are any.

You can clear the logs by pressing "CTRL + L" or by clicking at top left (second icon) as shown below:

Now type a code like this:



const a = 1
a = 2

This should cause an error in the console like this:

If you hover over the error, you will find an icon of a light bulb at top right:

As you hover over it, it'll expand and show you "Understand this error":

After you click on it, you will be asked about your permission to send the data to Google to understand the context:

Once you click accept, you will be provided with the explanation of the error and potential solution for that as well:

Explanation and Solution by Gemini in Console

Following is the explanation and solution provided by the Gemini when I tried this for writing the blog:

The error "Uncaught TypeError: Assignment to constant variable" means you're trying to change the value of a variable that was declared as a constant using either const or (in some cases) let within a block where it's already defined.

Here's why you're getting the error and how to fix it:

Using const: If you declared the variable a using const earlier in your code, you cannot reassign a new value to it. const creates constants, which are meant to hold values that should not be changed.



const a = 2; 
   a = 5; // This will cause the error

Fix:
If you need to change the value, use let instead of const:



let a = 2;
     a = 5; // This is now allowed

If the value should truly remain constant, don't try to reassign it.

Redeclaring with let in the same block: If you've used let to declare a within a block (like an if statement or a loop), and then try to redeclare it with let again within the same block, you'll get this error.



if (true) {
       let a = 2;
       let a = 5; // Error: Cannot redeclare 'a' in the same block
   }

Fix:
Simply assign the new value without using let again:



if (true) {
         let a = 2;
         a = 5; // This is now correct
     }

Global Scope and Strict Mode: If you're not explicitly declaring a with var, let, or const, and you're in strict mode (using "use strict"), the browser will treat it as an attempt to assign to an undeclared variable, which is also not allowed.



"use strict";
   a = 2; // Error in strict mode

Fix:
Always declare your variables using var, let, or const to avoid this issue:



"use strict";
     let a = 2; // Now it's correct

To help me give you a more specific solution, please provide the following:
The surrounding code: Show me the code where you declare and try to modify the variable a.
Whether you're using strict mode: Let me know if you have "use strict" at the top of your JavaScript file.
Once you provide this information, I can give you a tailored solution to fix the error in your web app!

Conclusion

This is a pretty cool integration of Gemini introduced by Google within Chrome DevTools to help us debug right away.

Blog