Chrome Dev Tools MCP Server

Welcome to Syntax. Today, we have a show on Chrome's new dev tools MCP Vercel. This is actually kinda nifty, as a way to both help you debug as well as as figure out what's going on your website, programmatically control, figure out network issues that are going on. There's a whole bunch of use cases. So we're gonna talk about that today. My name is Wes Bos. I'm a developer from Canada. With me, as always, is mister Scott Tolinski. How are you doing, Scott? Oh, man. I'm doing much better.

Last week, at the start of the Ricky episode when we recorded, within, like, the first couple of moments, and it might have been before we hit record, I chipped my dang tooth on a glass of straw.

So the entire episode, I'm just sitting there, like, trying to, like, have a conversation, and my mouth is just, like, killing me.

So Was it, like, a big

big chip? It's a no. You can come I kinda see it. It's this tooth right here. It just kinda chips in, kinda took out a little bit of the bottom.

So no good.

I haven't gotten it had anything done about it because it's gotten kind of less sensitive, but, well, I'll get it looked at, I suppose. Awesome.

Well, not awesome. Alright. Let's talk about the awesome MDC server, though.

Before we get started, two things, Meetup and spooky story submission. We need you for both. October 27, we are going to be doing a meetup in San Francisco at Bear Bottle Beer Garden in Salesforce Park. We're in town for Getup Universe. You don't have to actually be going to Getup Universe to go to this. It's open to anybody. We're gonna have a bunch of drinks, a bunch of swag, really good time. So if you're anywhere in the California area or somewhere in California or anywhere you wanna fly down, come on out. October 27 is gonna be a hoot. Go to syntax.fm/meetup, and you can grab a ticket. They are free, but you do have to reserve one because space is limited. Second, Halloween's coming up. We need your spooky stories. This is an episode we do every single year where we read off the most terrifying spooky stories about web development in general. So have you taken down prod by accident? Have you published something that you shouldn't have? Have you let an SSL certificate expire? Have you dropped a database by accident, deleted all the records? We wanna hear your most stick your head in the ground stories for Halloween. These are always awful to hear, but you learn a lot. So please go to syntax.fm/spooky and submit your story. We keep absolutely everything anonymous, so tell us your warp.

So let's talk about, like, what the hell these things are really quickly just so you have context if you've never used these things before. So, Chrome Dev Tools, you probably know what those are. Right? Those are the dev tools 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. It's, like, tips for the dev tools. I think there's some nuggets in there. Everybody uses the console, and that's about it. And there's there's so much more in there. MCP server is a way to provide AI additional tools. So, like, a a an AI model on its own, you can you can talk back and forth to it, or you can give it content, and we'll give you content back.

But when you Node it to do things, that it can't do, like like, visit a website or, like, I built a MCP server that fetched the latest currencies. You know? Like, just just different tools. Like, Node tool I've made is is the ability just to do math. Right? Yeah. Surprisingly, AI is not not great at math. And 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 this the single model that that knows everything. So MCP servers are super useful, and being able to use them when Node debugging and build websites is is extremely useful, and I'm really glad to see that Chrome has now rolled out a MCP server that will allow your AI tool to visit websites, click around, look in the console, look at your network Yeah. Run tests, screenshot, grab the HTML, all of that good stuff for you, and it can be very helpful for a number of reasons. We'll we'll talk about that. But Yeah. MCPs errors, not just not just for your code editor. Right, Scott? Yeah. There's a lot of tools there. And I 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 it's more than that. It is fully automating the browser.

And I, initially, when I thought about this, I I did think about how many little workflows that I'm automating right now or 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 finally tuned in a way, but also develop really nice feedback loops of, fixing issues potentially or or examining things that are actually rendered on the page, getting access to that massive set of tools, at least most of them that Yarn exist in the the 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 the more I do this, I find MCP servers to be man, they are just I'm I'm really excited by MCP. And and I was at I was at, Microsoft's campus, and Kent 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 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. You could take screenshots.

You could compare the screenshots.

There's so much potential where you when you're combining these tools that I'm I'm pretty stoked about. That's the idea at least. Right?

Whether that is is doable yet, I certainly think that we will be able to do that at some point, which is kind of exciting.

Yeah. Node. Very exciting. Yeah. But before we get too deep west, let me do take a moment to talk about Century before we Yeah. Yeah. I a quick little ad break here. Century is amazing, and Century has a great MCP server.

But Century's AI tools, other than that, are really great. I had a really awful bug in an app lately, and I I 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 I read the logs. I read the Sentry 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, e and v variable? Make sure it's set? And I'm like, yeah. Of course, it's set. Seer thinks.

And I Wes, and it was a typo. And the e and v definition, it was just a typo.

Oh, man.

Seer found it. And I I I don't know how it found it. It was magic to me. So Yeah. Yeah. Wild stuff. So thank you, Century. So check it out at century.i0/syntax.

I don't get two months for free. These are serious tools, and, man, really loving them.

So the Chrome Dev Tools MCCP server, it it shares a lot of overlap with the, like, puppeteer, MCCP server. Meaning that, like, it what it does is when when you when it needs to visit a website, it will fire up an instance of Chrome. It actually fires up a a new instance. It it won't connect to your existing like, you just have your regular Chrome open up and and everything, and and there's a couple of reasons for that. Like, the the technical reason behind it is that you need to have remote debugging running on a Chrome instance in order for remote debugging to 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, why can't this just connect to my I have my my regular thing. I have all my dev tools open. I have all my extensions. You know?

I got all 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 JS is Sanity. Because, like, you're 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 and then sending all of your money to somebody else. So there's certainly a security issue there. So that's why it it fires up a brand new instance of Chrome that you have.

So getting MCP server set up is you go into wherever you configure your MCP Vercel. So whether that's your chat g p t or cloud chat or whether that's your, your Vercel code or your cursor or whether that's you're simply writing a script, with, like, like, the OpenAI, SDK and you simply wanna provide a list of MCP servers, you just give it this Npm command, and it will fire up an instance of that and it it gives you access to all of the tools. In Versus Node, it actually is kinda nice because it gives you a listing of what all the different tools are. So Yeah. You can see that. The Versus Code MCP stuff has gotten a level up.

Yeah.

Like, list console messages, hover, handle dialogue, get network Wes. 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 JS, like, navigate to a page, find an input, enter in the thing, type some text, hit okay, wait for ten seconds, look for a thing on the page. So you can, you can programmatically control 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 these things. Right? More than just you, yeah, you connect. I I I Let's do it. Michael here. Yeah. My brain initially goes to, I can use this to debug. I can use this to performance track. I can use this to, you know, work on the web. But, like, you can also connect your MCP Vercel, and you can say, you know, let's go to scotttelinski.com and, grab the first blog post there and, use that blog post to, create a demo. I mean, I guess that's coding too. You could have it automate things within the browser. Now I'm currently using Comet to do some of that. Right? And I think that world is is still opening up for a lot of people, like, absolutely automating using the browser,

with these tools. Yeah. So here's an example. I just said visit Domino's Pizza. I spelled it wrong, and showed me the sizes of pizzas that they sell. So it fired up a new instance, took a snapshot of domino's.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. It ended up finding pizza size offered. It's medium and large. That's maybe maybe a good example of of where it's it's not perfect because, obviously, they sell, more of those. But that's just a a perfect example of how you can use it to programmatically

visit sites. And I think that Wes, also, you could you could have web search in any of these tools do the web searching for you Yeah. Retrieve that URL, the exact URL, and then pass that along to the Chrome Dev Tools MCP server to do that instead of having, like, the AI try to just guess.

Yeah. Yeah. Exactly. Try to figure it out. I also asked it to visit my own personal website and tell me how many Scott tips were there, and it first went to the the the first page, and then it told me that there was 433 because it it found it on the pagination. And then I said, find the 150 tooth, hot tip. And it just imagined the URL structure. So I had to tell it, hey.

Look at the look at the anchor links. You know? Yeah. Hey. Look at the the you just imagine what the pagination URL was. Right? So it's just one tool out of many. I think you have to, do a lot more prompting and and writing writing, instructions for it to get it to work really well. Yeah. Yeah. Just another tool. One big thing I've I've been interested in this is is one of them was, like, being able to programmatically visit websites and do scraping and whatnot. But the other one was simply just getting access to the console errors and 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 those errors are pretty good. It's not perfect. I'm still still frustrated at the, like, firing up a a new server and getting the errors back from the terminal into your chat. Yeah.

But I have not found a a great way to to do that with with client side errors. Right? So there's kind of a couple ways you can go about this. Right? If you want your console dot logs to show up and be accessible to your chat, especially when you have, like, syntax errors and and and things that are thrown. There's a couple options. Right? So in in Versus Node, you can say open link, and then I have a Vite server running on port fifty one seventy three. But getting this, like, debug, so you can see this is the actual browser debug console. Mhmm. Getting this information into the chat, like, I've asked it. I I I must be missing something here, but, like, I I don't think that the chat has

context into this debug console. Right? And then Did you check the tools? The, 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? Yeah. 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? 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 local host fifty one seventy three 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. That was that was totally connected Wes I said visit this website and figure out what's going on in this case. Only thing it didn't do is fix it, which I guess I didn't, ask it to do that. So I'll just say go ahead and fix it, and then it should be able to apply that, in my index HTML. There we go. Beautiful.

Yeah. The other sorry. One more one more question. That you could have fixed that yourself. I

impossible. I needed to boil the ocean in order to fit find that missing missing semicolon.

The last thing is that Chrome itself has, like, AI insights built right into dev tools. So if you have a console error and you turn on the AI insights in Chrome, it will actually suggest to you how to how to fix it. Now it's it's kind of like a weird world because

How do you turn those on? Sorry.

Yeah.

Let me bring it in here. So this is my, like, regular Chrome here. There we go. So I I brought back this this actual error here and an unexpected token, and then there's a understand this error. You can click on it. That. I I haven't been using. So it's somewhere in your settings. Okay. You can turn it on. Here we go. Turn on console insights to receive AI assistance. Okay. Well, for some reason, it turned itself off. So here we go. Oh, AI Let me go to settings, AI innovations.

Turn that sucker on.

K. Oh, I'm at I I do not have this in Comet browser.

So Yes. So I was using Comet browser. Node. Thanks. You know? I I've been using Edge for, like, over a year now, so I kinda missed it. And then here we go. It it That makes sense. It's not part of Chrome here. It's part of Chrome. Exactly. Yeah. It's the the browsers themselves. I think Firefox is also getting something similar to this as well, and I wouldn't be surprised. But my my question here is is, like, do we need to bring all of these all of the dev tools to the editor? Right. Or Yeah. Or should the Chrome itself just be the the editor? Right? Like, it it knows about all of my files. It knows about everything. It knows about all the requests.

Mhmm. I actually asked the folks at Chrome. I had a call with them the other day. I was like like, at what point are you just trying to bring everything out of Chrome via MCP servers into your your editor? And at what point would it make more sense to just make Chrome itself the editor? Right? Like, they tried that years ago with the, like, local mapping and, like, but it never cut on. I don't think it will ever cut on. You're you're essentially just rebuilding Versus Node at that point. Yeah. But I thought that was kinda interesting.

Yeah. It is interesting. It is one of those things that comes up all the time. Let's talk about what can the Chrome MCP server do other than visit things and get your console. Right? 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 paint? You know, all of those web dev metrics, you can ask it to look at those stats and 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 ten seconds? Node went ahead and found all that. And Node kinda interesting thing, I didn't even know we were doing this, but it was hosting we're hosting our fonts on your domain name, Tolinski.

Yeah. So Yes. That's something I didn't know. And I also asked it, like, what the biggest, downloads were, and it 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 Node, 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. 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 I do find that AI struggles with UI stuff pretty consistently.

And so being able to have those tools are really nice. But, also, you could even take a screenshot so that way you could know what the AI is even seeing when it's doing some of these tasks. Like, there's nothing worse than something,

failing, and you're not exactly sure exactly what what's going on. The amount of times that I've said it's just a white screen or you just put black text on black tech on black background is is huge, which it's another point that JS, like, the accessibility tools are not available in this MCP server, and I think that would really help. But Yeah. The amount of time that you just simply screenshot something and put it into the chat, and then it goes, ah, I see.

So, yeah, the screenshot tool is super helpful.

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,

my local file system. Mhmm. 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 Wes, Contentful Paint last Contentful Paint. Man, we did a lot of that. 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. There we go. I just ran it on syntax. F m, and it came back with look at all the raw data for the performance stats on syntax. F m. And now it's gonna go ahead and LCP, seven forty four. This is a good LCP score according to Core Web Vitals. Good.

LCP breakdown. Yeah. That's another it should be another opportunity JS give me plain English about these things. Right? Like, run perform and then actually just tell me. Explain, like, on five, what is going on with the loading in the site? 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 a part of a script or 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 you can mostly run, like, puppeteer headless on most 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 and then you can give it that actual, URL. And then anytime that MCP server needs to use a browser, then it will simply just it'll call out to that external Chrome instance.

I You could use Tailscale or anything like that. I I run a Mac mini right there that I do a lot of remote stuff on. So Yeah. Tailscale,

CloudFlare tunnels, all that good stuff, might be a good option. Although, you have to worry about, like, you're just opening up a browser to the Internet, so you make sure you put some authentication or Scott IP white list, something like that on there. Yeah. I do think that you can use this with Edge.

So when you start up in Microsoft Edge, you're a bit you're one of the flags you can run it is the remote port, and it'll give you a port, and then it'll start up a a a dev tools remote, server that you can remotely connect to. So I believe with the flags that you pass to the mcp. JSON, you can pass a there's they have this thing called connect URL in the docs that is simply just mentioned, and there is no examples. It's not even part of the docs. It's just in, like, one of the little blurbs. So I'm pretty sure you can use that to connect to a browser that is not Chrome. So if you're running, like, a Chromium instance or, I'm assuming, an Pnpm, I don't know that you necessarily would want to because I I don't see the benefit to it right now if you were to use a different one. It's not like it's going to be using your logged in state of your Microsoft Edge instance.

It will still fire up a brand new instance of Chrome, and you would have to manually log in to all of those things. Mhmm. There are there's this thing called browser dash use, which if you're trying to, like, scrape websites and, pretend that you're a human, that seems to be what most people are using in the space. It's, like, kind of a step forward past Puppeteer, and they also have hosted versions as well. If you need just need a quick browser that's running in the cloud, you can pay them for that.

So limitations of this thing, like, what you can't 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 Bos 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.

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 it didn't do a great job that, like, something like the axe suite or something would do. So I I would like a little bit better accessibility tools built into this, and I kinda bet that that's 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 dev tools and you inspect element on, like, a h one tag, it'd be nice to know, like, what color is it. And you can get all of these things with, like, get computed style, and 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? Change this color in dark Node. Loop through all of my paragraph tags and make sure there's no nothing there. That kinda gets more into the accessibility

side of things. But And for this to work, AI would have to actually understand CSS, which we all know

does not. It has no clue. Do is a purple gradient Yeah. In CSS. So that's all we Scott, and absolute position everything.

Yeah. So that is the Chrome MCP server. Big fan of that. This is really exciting. I think these are probably early days for this type of thing, and I bet that more of these tools will start to show up over time.

But certainly check it out, throw it in your your editor, throw it in your chat app, even if you just, like, turn it off. I don't like having all my MCP servers turned on all the time, because I feel like it just clutters

the context. So I'll just turn them on project by project as I need them rather than having them turn on for absolutely everything with the exception of, like, maybe contact 7. Yeah. Yeah. Contact 7 for show. And, I I do wanna say before we get out of here, Wes, while we were, I I was checking out the the new Scott tools that Century released, and this is not an ad read. But we were talking a little bit about the, like, the front end logging and connecting all these things together.

And the Scott by Century has an MCP now that I think would be very good for this because you're still getting, like, Century's logging. You're getting it locally, and now you're getting an MCP to be able to connect to that.

So I I this is, like, hot off the press, so I haven't gotten to use it yet. By the time you're hearing this, I'll have this deeply embedded into my project. But I'm I'm stoked on this because, like I said, the Sentry debugging tools have been very good with the AI because they have so much data, and they understand how to use that data. So,

Alright. Thanks, everybody, for tuning in, and we will catch you in the next one. Peace.