Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Gemini AI inside Chrome DevTools to Debug Errors
Shameel Uddin
Shameel Uddin

Posted on

     

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 asUnderstand 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"

Image description

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:

Image description

Now type a code like this:

consta=1a=2
Enter fullscreen modeExit fullscreen mode

This should cause an error in the console like this:

Image description

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

Image description

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

Image description

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

Image description

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

Image description

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:

  1. 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.
consta=2;a=5;// This will cause the error
Enter fullscreen modeExit fullscreen mode

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

leta=2;a=5;// This is now allowed
Enter fullscreen modeExit fullscreen mode

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

  1. 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){leta=2;leta=5;// Error: Cannot redeclare 'a' in the same block}
Enter fullscreen modeExit fullscreen mode

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

if(true){leta=2;a=5;// This is now correct}
Enter fullscreen modeExit fullscreen mode
  1. 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
Enter fullscreen modeExit fullscreen mode

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

"use strict";leta=2;// Now it's correct
Enter fullscreen modeExit fullscreen mode

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.

Hope the article helps :)

Happy coding! 🚀

Follow me for more such content:

🚀 Follow on YouTube

🚀 Follow on LinkedIn

🚀 Follow on GitHub

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
ashleyd480 profile image
Ashley D
10+ year client support roles, and currently in technical apprentice program (Bootcamp started Feb 2024)
  • Joined

Super helpful tutorial@shameel! I really love this new integration can help to break down those cryptic consoles messages, especially for a beginner like myself. 😊

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Tech Enthusiast, eager to learn latest trends of digital world!
  • Education
    Masters in Computer and Information Engineering
  • Work
    Software Engineer
  • Joined

More fromShameel Uddin

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp