Transcription
That's pretty cool. We saw here the MCP serve was able to do exactly what we wanted to do. It opened up Chrome. It went to YouTube. It took a snapshot of YouTube. It found the search bar, typed in my name, found the most recent video, and clicked through to it. And now, let's just look at the context and see how much of the context window that filled up.
In this video, we're going to talk about an official MCB server released by Google, the Chrome DevTools MCP. And this MCP server is almost a complete drag and drop replacement for the Playright MCB server. It does almost everything that Playright does, but a bit better with less context and more capabilities. and less overhead. So, in this video, I'm going to show you how to set it up, how I use it, and compare it to the Playright MCP server.
So, here is the ChromeDev Tools GitHub page. And for those that don't know Playright or the Playright MCP, Playrate is essentially an accessibility tool that I've been using as an MCP server to create this whole feedback loop. So when I create a web app for example, I would have the agent look to see if the UI the UX is what I planned in the specifications to monitor network calls to look at speed to look at the console and even help me debug things so I wouldn't have to copy and paste back and forth between the Chrome console and the agent I was using probably Cloud Code or Codeex or even Gemini CLI.
Now, with the Playright MCB, to be able to get it to work with a Chrome browser, you would have to add a browser extension so that the MCP server would be able to talk to the Chrome browser and understand what's going on there. With the Chrome DevTools MCP, because Chrome made it, you don't have to add an extension. You don't have to configure too much. You just have to put the JSON into the MCP settings and it's all there.
So, I just opened a new VS Code project and I created a MCP.json JSON file and I just dropped in the MCP configuration for the Chrome Dev Tools. You can find it here on the GitHub. I'll also show you their blog post about it. Very simple. So, you can just come here and copy the most basic config installation and paste it into VS Code.
So, in this case, we're just going to use it in cloud code. So, I created a MCP.json file in this empty directory. And now, if we start up Cloud Code, it will ask me if I want to add this MCP server. We'll say yes. And now let's just look at the MCP. Let's just see what's there. And we see the Chrome DevTools MCP. And we see that there's 26 tools.
Now, one thing I'm curious about is how much context this takes up. Because, as we know, the more MCP servers you add, the more it fills up the context window. So, this is a blank chat with a blank project. Let's just look at /context. And we see here that those MCB tools take up 6% of the context window. So, already on a blank chat with a single MCB server, we're at 14% context. And that's fine. It's just good to know.
Now, what I want to do is look at the Playright MCB server, and just compare their tools really quickly. So, I just opened up a new project, just Playright, and I only added a single MCP server. If we look here, this is just the Playright extension. If we click into it, we see that it has 21 tools. So, let's just do /context. Okay.
So, on the left, we have the new Chrome DevTools MCB server, and on the right, we have the Playright MCB server. Now, we saw that the Playright MCP server has 21 tools. whereas the Chrome DevTools MCP server has 26 tools and it looks to me that they take up almost the same amount of context. Now, I'm just going to look at the difference really quickly. I'm trying to understand what the differences are between two servers. The main thing that catches my eye from the official Chrome dev tools is the performance start trace, the performance stop trace, the evaluate script, and it also has the tool for performance analyze insight.
Okay, so let's just test it out. Okay. So, let's say use Chrome DevTools to go to youtube.com and search Jared Blue and then click on his most recent YouTube video. And what this should do is open up a Chrome browser, go to YouTube, search my YouTube channel, and then click through to my latest video. And let's see how that works. So, it's going to ask a lot of permission. I'm just going to allow it. Put it right here. So, I'm just going to keep saying yes. What it did there is took a screenshot to understand where it was on the YouTube page. And now, it wants to type in Jared Blue. So, it searched for my channel and then it clicked through to my latest video, which was a nonAI video. I pretty much showed how I add night mode to my Mac by changing the background and changing the tint of the desktop to red when it's late at night, so I'm able to keep working into the night without getting the blue light into my eyes. Video didn't do so well, but we saw here the MCB server was able to do exactly what we wanted to do. And now, let's just look at the context and see how much of the context window that filled up. So, it went from about 13% to 21%.
Now let's try the same thing with the Playright MCP server and see how much context it takes and how it works. Now we're in the project with only Playright. We're just give it permission to do everything. So it's now opening up a new browser page. Basically playright failed right away because you have to have the Playright extension installed in your Chrome browser. And while I do have it installed, every user profile has different extensions. Okay, so I just went to the right user profile. So let's try again. So now it's asking me to connect to the extension. Again, you don't have to do any of this with the official Chrome MTP server. So, now it's searching for the search bar. We're going to let it go. Typed in Jared Blue. Okay. So, Playright eventually got us to my YouTube channel with the video I asked it to go to. Now, one thing we noticed here is the Playright extension gave us a warning. Large MCP response almost 13,000 tokens. So now if we do /context, we see that the same process that had a few hiccups along the way got us to 26% of our context window. And if we look back at running this with Chrome DevTools, it only got us to 21% of our context window. So the Chrome DevTools has more MCB tools as less of an overhead. You don't have to install the extension. It takes less tokens and it's able to get your task done faster. And their unfair advantage is that this is Chrome. they released their own MCB server that can control their own browser and I'm all for it. We want our MCB servers to take the least amount of tokens to not bloat our context. So this is great. I'm all for all the optimizations we can get.
If you want to install this in CEX, it's a very simple installation. It's the same thing. You just take the JSON and convert it to TOML. I made a few videos about how to do that already. I'll link to them above. But this is the exact TOML you need for the most basic instance of this MCP server. And if you wanted to, for example, add a different argument, you just add a comma. So let's say we wanted to add headless, we just do d- headless equals true. And then we'd be able to run this headless. But I actually don't like running a headless. I like being able to see what's going on.
Now we're back in our original project and I open up the codeex ID extension. So if I say use Chrome DevTools to go to contextlop.com, let's see what happens. And I'm using GBD5 codeex low for this. As we see, it opened up Chrome. And just full screen this. and it did it very quickly. And here's a special tip for all you Vibe coders that are using localhost. Having it perform audits and look at your website and be able to actually understand what's going on. Look at the console, see if they're sending any important information in the headers or anything's being exposed. And all jokes aside, this is the most value I've gotten from this MCB server. Playright is able to do it, but this server, because it's so deeply embedded into Chrome, it's able to really understand what's going on. So on my web apps and the things I'm working on, I'm able to send a prompt similar to this but a little bit more detail about how I want it improved. It's able to actually look at the website, look at the web app, understand what's going on, find the bottlenecks, and fix it or suggest bigger improvements I have to do on a structural level. But it's been very useful for me.
And yes, I'm still using cloud code. Even though I like codeex for many things and it's been much more efficient, cloud code is still a lot more mature. It has a bunch of features that Codex doesn't yet have, like sub agents, the ability to pass arguments in slash commands. And in our use case right here, I really like the way it illustrates how much context is being used up. I think this is a really great illustration that helps us understand how MCP servers, for example, take up context.
So, that's the Chrome DevTools MCP server from the official Chrome team. I think it's a really good MCP server, a lot easier to use than the Playright MCP with less token usage. I recommend checking it out. If you have any questions or feedback, drop it in the comments below. If you haven't done so already, subscribe to the channel. It really helps me grow. Thank you guys for watching and have a great day.