Chrome Dev Tools MCP Server

So Was it, like, a big for the to the Internet, Edge.

You could run because I I don't see 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 by accident, deleted all the records? We wanna hear your most stick your head in the ground stories So now it's running the MCP server, control, 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 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,

MCP servers

running on a Chrome instance 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 AI tool to

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,

what's my largest contentful paint? You know, all of those web dev metrics, visit

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

performance fixes.

I have not found a a great way to

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?

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

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.

I chipped my dang tooth on a glass of straw.

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.

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 You can use

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.

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 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, to do those types of things. But since it is part of

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,

as a way to both help you debug as well as as figure out what's going on your website, programmatically and spooky story submission. We need you for both. October 27, we are going to be doing a meetup in San Francisco

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

the benefit to it right now if you were to use a different one. It's not like it's going to be using what the biggest, 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,

Did you look at this,

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 all that good stuff, like, kind of a step forward past

debugging tools have been very good with the AI because they have so much data, and they understand how to use that data. So, 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,

the console, and that's about it. And there's there's so much more in there. MCP server 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 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 Like, list console messages, hover, Alright. Thanks, everybody, for tuning in, and we will catch you in the next one. Peace.

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

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.

the Chrome DevTools. This got me very excited. And I think more and more lately,

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.

has,

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 Comet to do some of that. Right? And I think that world is is still opening up for a lot of people, like,

and then it ran the tool list console messages, and and pushing that back into 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, 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.

hey.

the Chrome Dev Tools MCP server to do that instead of having,

in my index HTML. There we go. Beautiful.

do a lot more prompting and and writing writing,

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.

that gives us access to the dev tools. But it's it's more than that. It is fully automating the browser.

area 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, you can programmatically control your website with most of these simply just by asking in the chat.

into the chat, 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

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

But when you Node it to do things, 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.

the chat. Because that's a big one for me, where if I'm running the terminal we're hosting our fonts on

but also develop really nice feedback loops of, But it does feel like it would be nice to just have that right baked in there. Totally. And you can run, like, Lighthouse

So getting MCP server set up is you go into In this case, it had to put it in a temp directory and then ask me to run a move command

How do you turn those on? Sorry.

automating using the browser,

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,

man, they are just

firing up a a new server and getting the errors back from the terminal into your chat. Yeah.

Vercel. This is actually kinda nifty, 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.

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

So no good.

Yeah.

URL. And then anytime that MCP 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

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 grab the first blog post there and,

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 know what errors were happening in my console? Have you dropped a database MCCP server. Meaning that, like, it what it does is when when you when it needs to visit a website, it will

Contentful Paint last Contentful Paint. Man, we did a lot of that. Largest.

You could essentially that

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, two errors.

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.

remote debugging, but to the console errors

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.

I got all my stuff.

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

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?

suggest to you how to how to fix it. Now it's it's kind of like a weird world because 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 to move the file from the temp directory to my,

e and v variable? Make sure it's set? And I'm like, yeah. Of course, it's set. Seer thinks.

you compare the design with the screenshot, whether that the design is potentially coming from, like, a Figma MCP

hot tip. And it just imagined the URL structure. So I had to tell it, hey.

And then there's direct access with all the CSS tooling as well.

to be

So the Chrome Dev Tools MCCP server, it it shares a lot of overlap with the, like, puppeteer, server, though.

for Halloween. These are always awful to hear, but you learn a lot. So please go to syntax.fm/spooky 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 because I feel like it just clutters all of the dev tools to the editor? Before we get started, two things, Meetup server that you can remotely connect to. So I believe with the flags that you pass to the mcp. JSON, is a way to provide 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

take a design.

And all it did was just it ran, like, 40 lines of JavaScript programmatically

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, 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.

well, I'll get it looked at, I suppose. Awesome.

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 your Vercel code or your cursor or whether that's it and expose the dev tools IP address headless on most on most of these servers. I've done it many times.

wherever you configure your MCP Vercel. So whether that's your chat g p t or cloud chat or whether that's your, AI is not not great at math. And and when you use ChatGPT, Mhmm. I actually asked the folks at Chrome. I had a call with them the other day. I was like 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 and put it into the chat, and then it goes, ah, I see.

your domain name, Tolinski.

on the website and just check for, like, ARIA labels and, and then it found But 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

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, use that blog post to,

will have the ability to do it. Right? So if I stop this here, and I'll say, and you can grab a ticket. They are free, but you do have to reserve one because space is limited. Second, 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 screenshot,

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.

and,

and then the biggest one. Is this site feel slow, or

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.

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 see which line of code things were written on. I think that would be

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

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 LCP, seven forty four. This is a good LCP score according to Core Web Vitals. Good.

stats on syntax. F m. And now it's gonna go ahead and Yeah. So Yes. That's something I didn't know. And I also asked it, like, Oh, man.

you could automate some real world

But full access to the full CSS suite, you can see what, I asked it, like, you know, when you open up your dev tools and you inspect element on, like, a h one tag, Edit, fetch, extensions, your logged in state of your Microsoft Edge instance.

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, logging. You're getting it locally, and now you're getting an MCP to be able to connect to that.

visit my own personal website and tell me how many Scott tips were there, and 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

You could compare the screenshots.

because it it found it on the pagination. And then I said, find the 150 tooth,

And the Scott by Century has an MCP now

it first went to the the the first page, 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,

it was just a typo.

I haven't gotten it had anything done about it because it's gotten kind of less sensitive, but,

with, like, like, the OpenAI, like, I've asked it. I I I must be missing something here, but, like, I I don't think that the chat has

what is going on with the loading in the site? So this is obviously

a security issue there. So that's why it it fires up a brand new instance of Chrome that you have.

The last thing is that Chrome itself

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,

The favicon is missing, and then 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 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, pretend that you're a human, that seems to be what most people are using in the space. It's, tools built into this, and I kinda bet that that's that's coming at some point.

my editor, took a snapshot of domino's.com, 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,

at least Last week, you can also connect your MCP Vercel, and you can say, you know, 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.

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?

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

dev tools MCP

back, pipe it back in, and fix the problem, which is,

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 more of those. But that's just a a perfect example of how you can use it to programmatically

as I use a lot of these agentic flows,

which if you're trying to, like, scrape websites and, AI additional tools. So, like, 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

my local file system. Mhmm. Another really great opportunity here is to set up a feedback loop of, I think would be very good for this because you're still getting, like, Century's I'm stoked on this because, like I said, the Sentry

from the CLI

to scotttelinski.com

But if you have a Chrome instance that's simply just running, like, you could have a Mac mini in your office.

So, yeah, the screenshot tool is super helpful.

server needs to use a browser, then it will simply just it'll call out to that external Chrome instance.

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.

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

Still writing files with chats is seems to be

let's go

performance even if you just, like, turn it off. I don't like having all my MCP servers turned on all the time,

There's a ton of stuff inside of Chrome developer tools from Wes, like, the AI try to just guess.

But certainly check it out, throw it in your your editor, throw it in your chat app,

absolutely Yeah. I'm excited for that. You and and like you said earlier off the jump, like, beyond 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.

for it to just 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 downloads were, and it it went ahead and figured that out. I said, is there any

fixing issues potentially or or examining things that are actually rendered on the page, getting access to that massive set of tools,

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, and list all external fetch XHR requests that are made within the first ten seconds? and submit your story. We keep absolutely everything anonymous, so tell us your warp.

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 in order for does not. It has no clue. Do is a purple gradient Yeah. In CSS. So that's all we Scott, and absolute position everything.

coding,

a big problem.

a part of a script or or you're running, like, cloud code on a server or something like that, 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.

instructions for it to get it to work really well. Yeah. Yeah. Just another tool. One big thing

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, the the more I do this, I find and he was just chatting about it the whole time. And it's gotten me into such a position where I'm, like, really just this nice loop that you can get, of performance fix, performance fix,

to show up and be accessible 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 and and then you can give it that actual, it's just one tool out of many. I think you have to, 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.

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, 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 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

I see a lot of possibilities. And and then when you link these tools up, like, there's a Figma MCP server.

Yeah. Run tests, it told me that there was 433 remote, impossible. I needed to

most of them that Yarn exist in the the

local host fifty one seventy three and see what the console errors are.

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.

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.

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

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 That would be really nice. So the MCP server you're simply writing a script, CloudFlare tunnels, 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

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,

Yeah. Yeah. Exactly. Try to figure it out. I also asked it to CSS variables are.

Puppeteer, Turn that sucker on.

or you just put black text on black tech on black background visit websites, click around, look in the console, look at your network Yeah.

Welcome to Syntax. Today, we have a show on Chrome's new like, at what point are you just trying to bring everything out of Chrome via MCP servers into that it can't do, like like, visit a website or, boil the ocean in order to fit find that missing missing semicolon.

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.

feeling the future of MCP and, like, seeing the big picture here about why these things matter. So the fact that,