How to use the DevTools MCP server for AI debugging #DevToolsTips

[00:09] Hello, good evening. The Chrome DevTools team has released an MCP server, where the users say it drastically. [00:17] Oh. [00:18] I need to explain FCP, right? [00:22] In this video, I'll give you a quick intro on what MCP is, a brief overview of what the DevTools MCP server is, and what it's useful for. [00:30] and how you can get started using it in your own Agente coding workflows. To get started, [00:35] Back to the DevRel Studio. [00:45] Think of your favorite coding agent. Doesn't matter if it's Gemini CLI with Gemini, Klein with Cloud or VS Code with Copilot. They are great at writing code, but they are all confined to a simple little text box. [00:58] They can't see your running app and they definitely can't use DevTools to debug it. MCP, short for Model Context Protocol, can bridge that gap. [01:09] MCP lets your AI agent reach out of its little text box and make programmatic use of the same tools you use every day. [01:18] if those tools support the protocol with their own MCP server. [01:21] Thank you. [01:22] In other words, think of MCP servers as APIs specifically designed to be used by AI models. Your agent can use those APIs and becomes an MCP client. [01:34] DevTools also provides an MCP server for your AI agent to work with the same powerful tooling you use in Chrome and actually debug your site at runtime rather than trying to take guesses from your source code.

[01:48] The great thing is this MCP server and the attached Chrome instance are running on your device, so no additional external services to take care of. [01:58] but examples say more than a thousand words, so let's dive into it. This is DevTools Times, our demo news site. You can explore it for yourself with the link below. [02:09] This side has a problem. [02:11] Whenever I click a link, nothing happens for a few seconds. [02:15] Looking at the performance panel life metrics, I can observe an INP of almost 2 seconds. [02:20] There definitely is something wrong here. [02:23] Usually, I would now go in, record a trace, and dig through it to find clues. But with the DevTools MCP server, I can take a shortcut. [02:31] I switch over to Gemini CLI with the DevTools MCP server enabled and just prompt. I have this weird delay whenever clicking a link on localhost. [02:41] Can you help debug? [02:42] Now the DevTools MCP server spins up a Chrome instance, loads my page, and navigates the DOM to find a link. [02:49] Then, before it clicks the link, the agent kicks off a performance trace and ta-da! [02:54] It identified a slow third-party analytics script, blocking the main threat, causing high INP, and additionally validated the assumption by mocking the script in question and performing the same test again. [03:08] DevTools MCP is also great at helping you to act on bugs that require multiple steps to be performed on a page to reproduce. For example, look at one of the articles on our new site and scroll to the far end.

[03:21] Visitors can comment on an article and format their comment with the editor toolbar. [03:26] Shh. [03:27] When trying this, you'll notice the final comment "lost all formatting". [03:31] Let's ask our agent to help us with this. [03:34] Inside my MCP client, cursor in this case, with DevTools MCP enabled, I prompt, "Fill the comment form on this URL." [03:42] Try to format the comment using the toolbar buttons. [03:45] save the comment, debug while the formatting isn't rendered in the submitted comment. [03:50] Again, my agent figures out I actually want to debug a page at runtime and starts a Chrome instance and tries to perform the actions requested. [03:59] After it submitted a comment, it accesses runtime data and crossmatches it with my source code to inspect what did go wrong, rather than just guesstimating like an LLM would with just the source code. [04:11] And after a brief while, the agent presents its final conclusions back to me. [04:17] The DevTools MCP server has a variety of tools to interact with your page in an automated way. [04:23] There are tools for input automation, like clicking buttons and filling forms, for performance debugging, like recording and analyzing traces, and many more to access data from other panels and dev tools, like console messages and network requests. [04:38] Those tools are designed to give your model of choice just the data it needs, when it actually needs it, in the most token efficient form possible. For an overview of all currently implemented tools, check the tool reference at this link. Usually, you don't need to worry about which tools are available and let your model figure it out for you.

[04:59] But getting yourself familiar with capabilities helps you to use the full power of DevTools MCP and write better prompts. [05:06] Of course, prompting for details can be cumbersome, especially if you have a very specific thing you want to talk about. [05:14] For those cases, you can also start DevTools and MCP server's Chrome instance and select the specific DOM element or network request you're talking about. Those were the breaking news around DevTools MCP. We are excited for you to start using it in your AI workflows. To get started, click this link to find instructions to install for over 15 MCP clients, including popular tools like Gemini CLI, VS Code, Cursor and more. Good evening. [05:41] And good night.