945: Chrome Dev Tools MCP Server  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 945: Chrome Dev Tools MCP Server - Category: #podcasts - URL: https://share.snipd.com/episode/2025f856-9cf3-44a7-a6fb-6f25436d4b91 ## Document Notes ## Highlights - **MCP Servers Extend AI Capabilities** - MCP servers let AI use external tools to perform actions the model cannot do alone. - Chrome's DevTools MCP gives agents programmatic browser access for debugging and automation. Transcript: Wes Bos So Chrome DevTools, you probably know what those are, right? Those are the DevTools where you can pop it open. You have your console. You have your network access. There's several tabs in there. Actually, like maybe we haven't done that episode in a while as like tips for the DevTools. I think there's some nuggets in there. Everybody uses the console and that's about it. And there's so much more in there. MCP server is a way to provide AI additional tools. So like an AI model on its own, you can talk back and forth to it or you can give it content and we'll give you content back. But when you need it to do things that it can't do, like visit a website or like I built a MCP server that fetched the latest currencies, you know, like just different tools. Like one tool I've made is the ability just to do math, right? Surprisingly, AI is not great at math. And when you use ChatGPT, they're using all of these tools behind the scenes. You might not necessarily know it, but it's not simply just the single model that knows everything. So MCP servers are super useful. And being able to use them when debugging and build websites is extremely useful. ([Time 0:02:47](https://share.snipd.com/snip/e5381f22-90ac-489f-937a-97e365639ca9)) - **MCPs Enable Cross-Tool Automation** - The Chrome DevTools MCP automates full browser interactions, not just editor workflows. - Combining MCPs (e.g., Figma + Chrome) creates powerful verification and comparison flows. Transcript: Scott Tolinski Yeah, there's a lot of tools there. And I think when at first I was like, okay, it's the dev tools, MCP, that gives us access to the dev tools. But it's more than that. It is fully automating the browser. And initially when I thought about this, I did think about how many little workflows that I'm automating right now we're doing with Playwright, or maybe even the agent itself is is just Like trying to fire up the dev server and visit the site, how much more of that you could get finely tuned in a way, but also develop really nice feedback loops of fixing issues, potentially, Or examining things that are actually rendered on the page, getting access to that massive set of tools, at least most of them that exist in the Chrome DevTools. This got me very excited. And I think more and more lately, as I use a lot of these agentic flows. The more I do this, I find MCP servers to be, man, they are just, I'm really excited by MCP. And I was at Microsoft's campus and Kenzie Dodds was there and he's like so up on MCP. And he was just chatting about it the whole time. And it's gotten me into such a position where I'm like really feeling the future of MCP and like seeing the big picture here about why these things matter. So the fact that soon after those conversations were taking place, the Chrome dev team releases this and it's like, yes, okay, we have another really great MCP tool that we can take advantage Of. I see a lot of possibilities. And then when you link these tools up, like there's a Figma MCP server. You could essentially take a design. You could take it from Figma. You could bring it into code. You could load it up and you could verify it. ([Time 0:04:32](https://share.snipd.com/snip/4bd876ae-30a5-416f-9507-9cc6a02ebe76)) - **Sentry's Seer Found A Tricky Typo** - Scott described using Sentry's AI (Seer) to find a bug caused by a typo in an ENV variable. - Seer quickly pointed out the typo when manual log inspection failed to find it. Transcript: Scott Tolinski Yeah. Wes Bos I quick little ad break here. Scott Tolinski Sentry is amazing. And Sentry has a great MCP server. But Sentry's AI tools, other than that, are really great. I had a really awful bug in an app lately. And I stuck Seer on it, which is their AI tool that kind of gets through the garbage and finds the root cause of issues. And man, this was like, not like I read the logs, I read the century errors, I read everything, and I could not find it. And I clicked the seer button and was like, hey, did you look at this ENV variable, make sure it's set? And I'm like, yeah, of course, it's set. Seer, thanks. And i went and it was a typo in the env definition it was just a typo oh and uh seer found it and i i don't know how it found it it was magic to me so yeah uh yeah wild stuff so thank you uh century So check it out at century.io forward slash syntax i don't get two months for free these are serious tools and uh man really loving ([Time 0:06:48](https://share.snipd.com/snip/cf2055c0-500c-4ee4-a1c4-ed88bd68b56f)) - **Use Fresh Browser Instances For Security** - Do not expect the MCP server to attach to your existing Chrome session; it launches a fresh instance. - This protects security and prevents giving remote tools access to your personal browsing state. Transcript: Wes Bos It actually fires up a new instance. It won't connect to your existing, like you just have your regular Chrome open up and everything. And there's a couple of reasons for that. Like the technical reason behind it is that you need to have remote debugging running on a Chrome instance in order for remote debugging to be able to communicate back and forth with It so that's the one technical reason and probably the other reason because immediately i was like well i can't let's just connect to my i have my my regular thing i have all my dev tools Open i have all my extensions you know um i got my stuff i got all my stuff here just connect to that one don't make another one and i still hope that they will figure out some way to do that And i know that i can fire up my own remote debugging but the reason behind is is security um because like you you probably shouldn't give a rogue ai agent which has other mcp tools hooked Up to it as well which could be also malicious you know there's nothing from stopping another mcp server yeah from trying to use this one, visiting your bank account and then sending All of your money to somebody else. So there's certainly a security issue there. So that's why it fires up a brand new instance of Chrome that you have. ([Time 0:08:04](https://share.snipd.com/snip/34316ea5-21db-4d33-9698-726395614672)) - **Enable MCPs Selectively In Your Tools** - Configure the MCP by adding its npx command into your editor or chat app to grant browser tools. - Enable only the MCPs you need per project to avoid cluttered context and excessive permissions. Transcript: Wes Bos So whether that's your chat GPT or cloud chat, or whether that's your VS code or your cursor, or whether that's, you're simply writing a script with like the OpenAI SDK, and you simply Want to provide a list of MCP servers, you just give it this npx command and it will fire up an instance of that and it gives you access to all of the tools. In VS Code, it actually is kind of nice because it gives you a listing of what all the different tools are. Scott Tolinski Yeah, you can see the VS Code MCP stuff has gotten level up. Wes Bos Yeah like list console messages hover handle dialogue get network requests right i think the puppeteer one has a bit more of tools but i've i've been actually able to use most of these Things which is like navigate to a page find an input enter in the thing type some text hit okay wait for 10 seconds look for a thing on the page so you can you can programmatically control Scott Tolinski Your website with most of these simply just by asking in the chat yeah i'm excited for that you and and like you said earlier off the jump like beyond coding you could automate some real World stuff with ([Time 0:09:28](https://share.snipd.com/snip/a3d71271-6f6b-4368-91bc-4c424098e655)) - **Domino's Demo Shows Practical Limits** - Wes asked the MCP server to visit Domino's and it navigated pages and snapshots to find pizza sizes. - The tool worked but made imperfect guesses, illustrating practical limits of automated browsing. Transcript: Wes Bos Here's an example. I just said visit Domino's Pizza. I spelt it wrong and showed me the sizes of pizzas that they sell. So it fired up a new instance, took a snapshot of dominos.com, clicked on some pages, it's clicking around, it's navigating around, taking more snapshots. It's basically just looking for what it wants. It went to about Domino's pizza forward slash pizza sizes, like it just imagines. So obviously, it's not perfect. There we go. And it ended up finding pizza size offered medium or just maybe, maybe a good example of where it's not perfect, because obviously they sell more of those. But that's just a perfect example of how you can use it to programmatically visit sites. ([Time 0:11:36](https://share.snipd.com/snip/31888c7b-3db1-4df3-a6cd-8fb642706b14)) - **Surface Client Errors Into Chat Workflows** - MCP servers can surface client-side console errors directly into chats and editors for debugging. - Wes used it to visit localhost and retrieve favicon and syntax errors from the browser console. Transcript: Wes Bos But the other one was simply just getting access to the console errors and pushing that back into the chat. Because that's a big one for me where if I'm running the terminal within my editor, the terminal, like if you have a server running, those errors are pretty good. It's not perfect. I'm still frustrated at the like firing up a new server and getting the errors back from the terminal into your chat. But I have not found a great way to do that with client-side errors, right? So there's kind of a couple ways you can go about this, right? If you want your console.logs to show up and be accessible to your chat, especially when you have like syntax errors and things that are thrown, there's a couple options, right? So in VS Code, you can say open link, and then I have a Vite server running on port 5173. But getting this, like, debugs, you can see this is the actual browser debug console. Getting this information into the chat, like, I've asked it. I must be missing something here, but, like, I don't think that the chat has context into this debug console right and then you check the tools the uh there's like a little tools drop down Or something yeah yeah right here yeah edit fetch extensions problems right like it can it can access the problems tab interesting where's the debug console but i don't see anything Where it's like has access to the the debug console which is frustrating so like usually i just have to copy paste it into here but like wouldn't it be better for it to just know what errors Were happening in my console um that would be really nice so the mcp server will have the ability to do it, right? So if I stop this here and I'll say visit localhost 5173 and see what the console errors are. So now it's running the MCP server. And then it ran the tool list console messages. And then it found two errors. The favicon is missing. And then it also found the unexpected token. So that was great. ([Time 0:13:31](https://share.snipd.com/snip/3d89034e-6404-4091-af24-ec98076d6379)) - **Automated Performance Analysis** - Chrome MCP exposes performance metrics and resources so agents can identify bottlenecks. - It can list XHRs, largest downloads, and calculate LCP to guide optimizations. Transcript: Wes Bos Analyze performance and make changes based on that. That's probably the biggest one. Is this site feel slow? Or what's my largest contentful pain? You know, all of those web dev metrics, you can ask it to look at those stats and figure out what is actually causing it. So I asked the Chrome MCP server, can you visit syntax.fm and list all external fetch XHR requests that are made within the first 10 seconds so it went ahead and found all that and one kind Of interesting thing i didn't even know we were doing this but it was hosting we're hosting our fonts on your domain name to lin.ski yeah so yes that's something i didn't know and i also Asked it like what the biggest downloads were. And it went ahead and figured that out. I said, is there any bundles on my personal website that were too large that could be possibly slowing the website down? And I feel like it did a pretty good job at that. Whereas like, obviously, I can just scan that really quickly. And I know but for people who don't necessarily know what is too large, you know, what are possible performance problems, it's nice to be able to just type it in the box and get that info. Scott Tolinski Yeah, it's also nice to be able to take a screenshot from this. Because again, you could have a workflow where you have a design, you take a screenshot, you compare the design with the screenshot, whether that the design is potentially coming from Like a Figma MCP and be able to verify, you know, what it's off, what's what's not right, because I do find that AI struggles with UI stuff pretty consistently. ([Time 0:18:43](https://share.snipd.com/snip/0ca95c22-91d2-4200-a81b-0820e6e1f3bf)) - **Take Screenshots For Clear Debugging** - Use MCP screenshots to show exactly what the agent sees when diagnosing UI issues. - Combine screenshots with design sources to automate visual comparisons and catch UI regressions. Transcript: Wes Bos Still writing files with chats is seems to be a big problem. In this case, it had to put it in a temp directory and then ask me to run a move command to move the file from the temp directory to my local file system. Scott Tolinski Another really great opportunity here is to set up a feedback loop of performance fixes. There's a ton of stuff inside of Chrome developer tools from last Contentful Paint. Last Contentful Paint. Man, we did a whole episode. Largest. Man, I'm so bad with words and acronyms. Largest Contentful Paint. There's a whole bunch of these tools, and they're available to these MCP servers to be able to go off, find the issues, and then potentially take that information back, pipe it back in And fix the problem, which is just this nice loop that you can get of performance fix, performance fix, console log error fix, you know, a nice back and forth there. ([Time 0:21:01](https://share.snipd.com/snip/a2be4307-ef0b-488a-8d0b-d6f775116b16)) - **Host Or Secure Remote Browser Instances** - If running MCPs from a server, provide a reachable Chrome instance or run headless Chrome in the cloud. - Secure remote browser access with auth or IP whitelists when exposing instances publicly. Transcript: Wes Bos So this is obviously Chrome only. But the question is, is like not everybody is simply using this on a desktop, right? If you are using it as part of a part of a script or you're running like cloud code on a server or something like that, then you need to be able to give it access to a Chrome instance if it is Unable to spin one up itself. And you can mostly run like Puppeteer Headless on most of these servers. I've done it many times. But if you have a Chrome instance that's simply just running, like you could have a Mac mini in your office, you could run it and expose the dev tools IP address to the Internet. And then you can give it that actual URL. ([Time 0:22:33](https://share.snipd.com/snip/ef89b321-b06a-4046-81bb-927affbbf96c)) - **Accessibility And CSS Tooling Gaps** - Current MCP lacks built-in accessibility tooling and full CSS inspector features. - Hosts expect accessibility checks and richer CSS metadata to be added as MCP capabilities evolve. Transcript: Scott Tolinski So limitations of this thing, like what can you do? Wes mentioned already once that it doesn't have access to the accessibility issues. You know, there's tools out there that you can run on your code base that will check for accessibility markers and stuff like that. But having that in the browser would be super nice and super handy. Granted, you might be able to do some of that even I know you can't do all these things, but at least like color checking and stuff you might be able to do with the screenshots. Wes Bos But it does feel like it would be nice to just have that right baked in there totally and you can run like lighthouse from the cli to do those types of things but since it is part of the dev Tools i would like access to that via the mcp server as well and i also like i asked it hey check for accessibility issues and all it did was just it ran like 40 lines of JavaScript programmatically On the website and just check for like ARIA labels and like text on all of them. It didn't do a great job that like something like the ACK suite or something would do. So I would like a little bit better accessibility tools built into this. And I kind of bet that that's coming at some point. And then there's direct access with all the CSS tooling as well. I asked it like, you know, when you open up your DevTools and you inspect element on like a H1 tag, it'd be nice to know what color is it. And you can get all of these things with like Get Computed style. And that's what it actually is doing when you ask it questions. But full access to the full CSS suite. You can see what CSS variables are. You can use see which line of code things were written on. I think that would be really nice to have full access. And also like color. So nice. Yeah. Color issues, you know. Yeah. What's a good color for this changes color in dark mode loop through all of my paragraph tags and make sure there's no nothing there that kind of gets more into the accessibility side Of things but and for this to work uh ai would have to actually understand css which we all know does not it has no clue do is a purple gradient uh in css so that's all we got. Absolute position everything. ([Time 0:25:18](https://share.snipd.com/snip/b31eb47c-6d37-4263-bb39-db64678acab2))