00:00:00So, the Chrome team have finally shipped an update that lets the Chrome DevTools MCP server
00:00:06talk to a running instance of Chrome to do things like debug issues behind a login page,
00:00:12perform analysis on a live session and even do some really cool debugging things like access
00:00:17an element that's been selected, specific errors and even network activities.
00:00:21But with other AI browser debugging tools like Agent Browser and Playwright, adding a CLI
00:00:26with skills as well as an MCP server, is this something the Chrome DevTools MCP will have
00:00:31to add in the future?
00:00:33Hit subscribe and let's find out.
00:00:35A few months ago, Anjis created a video giving a great overview of the Chrome DevTools MCP
00:00:44server, but at the time it could only launch a new Chrome session, or you could also connect
00:00:49it to a remote debugging port, but that required a lot of manual setup.
00:00:53But now in Chrome version 144 and above, with the remote debugging flag turned on, the Chrome
00:00:58MCP tool will now auto detect an open session, which can be used for debugging, which changes
00:01:04the game for me personally because I prefer to use Claude code in the terminal and means
00:01:09I don't have to use AI browsers like Deer, Comet and even the Claude Chrome extension
00:01:15or even useful AI debugging tools like React Grab.
00:01:18Let's see these new Chrome DevTools MCP features in action.
00:01:22You'll first need to have the MCP server installed with the auto connect option available.
00:01:27I'm using open code, but this supports many agent harnesses and inside Chrome you'll have
00:01:31to navigate to this URL and make sure you have this option turned on.
00:01:36Now previously you'd have to start a session with a command like this and the agent will
00:01:40connect to the exposed port via HTTP.
00:01:43But with the new away inside this UI, you can start Chrome as you normally would having access
00:01:48to all your cookies, history and whatnot, and you can turn it off whenever you're done.
00:01:53Now if you're security conscious, later on in the video, I can show you how to connect
00:01:57to a more private version of Chrome.
00:01:59But after you've done those two things, so toggled on this option and connected to the
00:02:04MCP server with the auto connect option, that should be it.
00:02:08I can ask my agent to check the performance of Betastack and inside Chrome, I'll get this
00:02:12pop up asking if I want to allow remote debugging and then I'll have this banner up here.
00:02:17Now the agent has been able to navigate to the Betastack website and now it's using
00:02:21the lighthouse audit tool to give me some cool web vitals, lighthouse schools and some other details.
00:02:27But now let's do something useful.
00:02:29Here is a language learning app that I'm working on.
00:02:31I've logged in as an admin, navigated to content, a specific unit and gone to this exercise.
00:02:37And I've noticed on the exercise modal that the save button down here is different from
00:02:42the other buttons on the site.
00:02:44So instead of manually telling the agent to replicate my steps, so logging in and navigating
00:02:49to this specific page, I'm going to select this save button in the inspect tools and then
00:02:55ask the agent if they can see the element I've selected.
00:02:58And after a while, it's able to see I have the save button selected.
00:03:02So now I'm going to ask it to change the style of the save button to look like the new exercise
00:03:06button, which is the button over here if you can see it.
00:03:09And after a few seconds, it's changed the style of the button to exactly how I wanted it.
00:03:13But if you're running the MCP server in a sandbox environment, you'd have to use the browser
00:03:18URL option with the port for remote debugging as HTTP, not WebSockets.
00:03:23And if you're security conscious, you'll need to add the user data directory with a specific
00:03:28location to the MCP server as an option, which will mean the agents won't have access to your
00:03:33existing cookies, passwords, browser history and much more.
00:03:36And you'd have to re log in to those sites if you want the agent to have access to them.
00:03:41Now as cool as this is, if you've watched any of my previous videos, you'll know I'm not
00:03:46the biggest fan of MCP servers because they do use up a lot of context if you have a lot
00:03:51of them.
00:03:52But luckily, the Chrome DevTools MCP server does allow you to do everything with a CLI,
00:03:59which not many people know about because it's kind of hidden because you'll have to go into
00:04:04the skills directory and then Chrome DevTools CLI to find out about this experimental feature,
00:04:10which gives your agent information on how to use it.
00:04:12And also some installation instructions if you haven't installed it already.
00:04:16This is basically a thin wrapper around the MCP server.
00:04:20And if you already have it running inside an agent harness, this CLI won't use that because
00:04:24it uses its own daemon.
00:04:26This command gives you information about the default daemon that runs and you can already
00:04:30see it set the browser URL flag with some other flags like headless and isolated.
00:04:34But you'll also notice that there's no auto connect inside the available CLI options.
00:04:39So if you haven't run Chrome via the terminal, you'd have to quit this existing one and then
00:04:43run it like this making sure that if you have the remote debugging port flag, you have to
00:04:48have the user data flag.
00:04:50So now with that in place, I can start the daemon like this, get the list of pages, which
00:04:54only shows one new tab because there isn't much at the moment.
00:04:57But of course, the real power comes when you use it with an agent.
00:05:01So if I turn off the Chrome MCP tool, select this button in DevTools and ask the agent to
00:05:06use the CLI to figure out what element is selected and we can see it's been able to figure that
00:05:10out.
00:05:11Note the information in the user data directory persists between sessions.
00:05:15So this keeps all my cookies, browser information and so on.
00:05:19Also there are many more things the Chrome DevTools CLI can do.
00:05:22So I recommend you go ahead and check out the skill and maybe in the future, they may introduce
00:05:26the auto connect feature.
00:05:28So there you have it, a quick run through of some of the new cool features from the Chrome
00:05:32DevTools MCP server and CLI, which will definitely improve your debugging experience with coding
00:05:38assistance.
00:05:39As an Arc user, yes, I still use Arc, I really wish this feature would come to it in the future.
00:05:45But until then, I'm happy to use Vassal's agent browser, which has been working really
00:05:50well for me.
00:05:51And if you know nothing about agent browser, check out this video I made a while back, although
00:05:55it has improved a lot since then.
00:05:58So maybe it's time for me to make another video.