Player not loading? Watch on YouTube
This tutorial sets up Chrome DevTools MCP in VS Code and compares its debugging workflow with Playwright MCP. The speaker recommends Chrome DevTools MCP for deeper performance analysis and inspecting console or network errors. He favors Playwright MCP for browser automation and generating reusable Playwright tests, and notes that Chrome DevTools MCP supports only Chrome.
The setup uses the MCP server section in VS Code's extensions view. The speaker checks the official publisher, opens the server configuration, and adds the --no-usage-statistics argument to disable usage statistics collection. The stated prerequisites are Node.js, npm and Chrome on the machine.
For the example, GitHub Copilot runs in agent mode with a Claude model. The speaker disables the built-in browser and Playwright MCP tools, then explicitly asks Chrome DevTools MCP to inspect a homepage's accessibility tree, ARIA roles, keyboard navigation and color contrast. The returned report gives an accessibility score of 98/100 and flags anchors using the list-item role. These are reported demo findings, rather than proof of full WCAG compliance. The speaker also suggests requesting a Markdown report in a project folder and using it with Playwright MCP to create tests for later builds.
