Intro
AI is undoubtedly transforming our industry, and the words "artificial intelligence" have been on everyone's lips over the last year. Thanks to tools like Claude, ChatGPT, and Firebase Studio, not only programmers, but also people not directly involved in programming, such as my English teacher friend, a hairdresser, or a musician, can create applications. What happens, however, when an application doesn't quite work as we'd like, and our favorite AI assistant throws its hands up and refuses to help, despite being fed with more tokens? That's when a human with debugging skills must step in. In my personal opinion, these skills will be the most useful and indispensable in the future. The more code AI writes for us, the more important it becomes to have skills in reading comprehension, tracking changes, debugging, and fixing problems. Interestingly, even here, AI can prove to be useful!
AI features in Chrome DevTools
I don't think I'll surprise anyone who has ever worked with me, listened to my presentations, or read my articles by saying that I'm a big fan of Chrome DevTools – free developer tools built into the Chrome browser. You don't need to install them, they offer many possibilities, and they help me in my daily work almost every day. In previous articles, I wrote about lesser-known features like emulating vision deficiencies, generating CSS Overview, recording and replaying flows or things related to improving performance. In this article, I would like to focus on something else – AI features.
Overview
For some time now, Gemini has been integrated and built into Chrome DevTools. It's currently available in the Console, Styles, Performance, and Network tabs, but I wouldn't be surprised if they add more. In a nutshell, the new capabilities allow you to chat with Gemini, analyze the page, and suggest improvements. This is turned off by default because, like any AI solution, it can of course suggest incorrect things. Importantly, the data we enter can be used to train the model, so it's worth thinking before sharing personal or sensitive data.
How to setup your toolbox
To enable AI features in Chrome DevTools, you must manually activate them as they are not enabled by default. Users need to be at least 18 years old, located in a supported country, and use Chrome DevTools in English. A stable version of Chrome is sufficient - the Canary version is not required. Navigate to Chrome DevTools > Settings > AI Innovations. Here, you'll find 3 options: to enable Console Insights, AI Assistance and Auto annotations. Simply enable the option you want to use (I recommend all of them).
Console Insights
It’s a simple but powerful feature. When an error appears in the Console, AI can help understand it and suggest corrections. Just hover over the error and click the lightbulb icon, which expands into an “Understand this error” button. After a few seconds of analyzing the error and the page's code, Gemini will explain the problem, suggest ways to check it, and offer a solution. There’s also a TLDR option for those who prefer the short version. At the bottom, you’ll find a summary of the data used for the analysis. A useful feature is also the Google search button, for when AI can't find a solution. Even if the tool doesn't always provide an ideal solution, in my experience it's almost always a good first step to summarize the problem, understand what's wrong, and what debugging options are available. It's also helpful when there are junior developers on the team – they can quickly learn stuff. I definitely recommend trying it next time you see a scary red message in the Console.
AI Styling assistant
Who hasn't struggled with CSS? Even a small change can often cause a cascade of problems. And it's even worse when an AI assistant wrote the CSS, and now you have to guess what it was thinking! Luckily, AI features in Chrome DevTools can help. You can right-click on any element in the Elements tab and find the "Ask AI" option. Interestingly, once the conversation opens, you can also add a screenshot using the "Take screenshot" option (the camera icon). This lets you start a conversation with Gemini and ask for help – even with tough things like centering an image. Gemini is helpful with layout and positioning issues, element visibility, styling, box model problems, CSS cascade, and much more. It can even override your styles in Chrome to preview changes, so you can easily test them. If you have a workspace folder connected, changes will also be saved there after using the "Apply to workspace" option. It has context of the webpage, so it's great for finding and fixing problematic spots.
AI in Network tab
Sometimes we hit snags with specific requests – maybe it's taking too long, or it's returning some weird code we don't recognize. The cool thing is, when you spot it in the network tab, you can just right-click and hit "ask AI." That opens up a chat with Gemini, and it already knows all about that particular request. Since you're the one giving it prompts, you can get pretty creative with how you use it. A super common scenario would be asking how to make that request more efficient. It's really handy for getting a quick initial look at what might be going wrong and figuring out next steps.
AI in Performance tab
Performance is a huge topic, and there's almost always something you can improve. So it's worth checking out what AI has to say, even if you're quite happy with your site's results. In Chrome DevTools, you should first create a profile – either automatically on reload or by recording it yourself – and then chat about what was recorded in that profile. Personally, I usually ask about specific entries in the performance trace to better understand the details of a given item, but of course, we can also ask about the whole trace view and, for example, ask for an initial selection of areas for deeper analysis. We can also go to AI from the Insights tab as well if we want to learn more about them or expand on the suggestions made there. Very generic entries like "how to improve performance" might give you some pointers, but the magic happens when you want to work on a deeper level.
There is also a small but nice AI feature useful when debugging requests - generating labels for events in Performance tab. If you struggle with finding good naming (which is the one of the most difficult things in programming, right?), you can double-click on given item in Main view in Perfomance report and autogenerate it. Small but nice improvement!
AI in Sources tab
Honestly, I don't use this mode much, but it's still worth mentioning. In Sources, you can right-click and select "Ask AI" to prompt within the context of a given file. You can ask it to analyze the file, change logic, generate a snippet, etc. Personally, I prefer to do these things from my IDE, but I believe it could be useful if, for example, an extra package gives you a weird file and you want to understand it better, you need to check something quickly, or for some reason you don't have direct access to the source code. It's not a game-changer for me, but maybe you'll find some cool use for it – if so, let me know!
Summary
This article shows off how much easier debugging can be when you use AI tools. These tools are super handy already and are only going to get better. The AI in the Styling tab, for example, has been a huge help for me with tricky problems. Adding these AI-powered tools to your set of skills is a smart move, because debugging is only going to get more complex. By letting AI take care of annoying stuff like finding typos or double-checking syntax, we can focus on what's really important: providing value to our users.
Top comments (0)