{"slug": "what-s-new-in-devtools-chrome-149", "title": "What's new in DevTools (Chrome 149)", "summary": "Chrome 149 introduces stable AI assistance tools for developers, including agent walkthrough widgets and a copy-to-coding-agent button, alongside experimental WebMCP debugging tools in the Application panel for inspecting and testing web page tools. The update also expands code completion support to CSS and upgrades AI responses with Gemini 3, while deprecating automated styling fixes by Chrome 152.", "body_md": "Published: June 2, 2026\n\nChrome 149 brings major upgrades to AI assistance, introduces experimental WebMCP debugging tools in the Application panel, and expands code completion support to CSS.\n\n## DevTools for agents\n\nThe MCP server and CLI of Chrome DevTools for agents are now officially\nstable! Read the [full announcement here](/blog/devtools-for-agents-v1).\n\nKey features and new tools added up to the v1.1.1 release include:\n\n**Custom third-party, page-exposed tools:** pages can now define[custom debugging tools](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#third-party)through JavaScript, discoverable and callable by DevTools for agents.**WebMCP debugging:** DevTools for agents can now[list and execute WebMCP tools](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#third-party).**Custom HTTP headers emulation:** Adds support for HTTP headers (such as Auth tokens or custom User-Agents) to the emulation tool.\n\nThird-party tools and WebMCP debugging are still experimental and not yet\nenabled by default. Check the [tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)\nfor info on how to use them. We will provide more documentation on developer.chrome.com once those features are ready for production use.\n\nFor the most recent updates around DevTools for agents, and to contribute, visit\nthe [GitHub repository](https://github.com/ChromeDevTools/devtools-mcp-server).\nGet started [with our documentation](/docs/devtools/agents/get-started) or get up to speed with\nthe comprehensive Google I/O video session [Supercharge your AI coding workflow with Chrome DevTools for agents](https://www.youtube.com/watch?v=1AD81ZselPk).\n\n## AI assistance\n\nThe **AI assistance** panel has received a significant user interface update and\nnew tools to improve the conversational experience and provide deeper page\ninsights:\n\n**Agent walkthrough:** AI assistance now renders widgets directly within the chat interface instead of plain text Markdown. These widgets cover Core Web Vitals and related insights, LCP elements, LCP breakdown, Bottom-up thread activity, and more. A**Reveal** link inside the widget brings you to the source of this information inside DevTools.**Copy to coding agent**: Conversations now end with a dedicated button to copy the conversation, either summarized as a prompt, or the verbatim conversation, for you to paste it in your coding agent of choice.**Upgraded capabilities**: AI assistance now has access to Lighthouse and related insights, allowing it to holistically analyze your page and give targeted advice.**Improved responses**: Using Gemini 3 under the hood, and refined preambles, AI assistance gives more concise, and more actionable answers.** Improved navigation:**You can now navigate through your previous chat prompts using the** Up Arrow**and** Down Arrow**keys, making it fast and intuitive to refine or re-run previous queries.\n\nLet us know what you think by commenting on the dedicated\n[feedback bug](https://issues.chromium.org/issues/519074659). In favor of Copy to coding agent, we will deprecate support\nfor [automated styling fixes through AI assistance](/docs/devtools/ai-assistance/chat#auto-workspace),\nwith Chrome 152.\n\n## WebMCP\n\nThis release introduces experimental WebMCP debugging tools within the\n**Application** panel sidebar. WebMCP (Web Model Context Protocol) allows web\npages to register tools to be used by visiting LLM agents. Learn more about the\nproposed standard [in our documentation](/docs/ai/webmcp).\n\nThe new debugging tools lets developers:\n\n- Inspect client-side tools and their schemas.\n- Manually run tools execution with custom parameters.\n- Track and filter active or pending tool invocation events.\n- Monitor execution status and inspect return payloads.\n\nWebMCP is a proposed web standard in early preview. Enable the `#devtools-webmcp-support`\n\nand\n`#enable-webmcp-testing`\n\nflags on chrome://flags to start experimenting.\n\nChromium issues: [494516094](https://issues.chromium.org/issues/494516094)\n\n## Code completion for CSS\n\nThe **Styles** tab now features code completion for CSS with Gemini, building on\nthe [support for the Console & Sources panels](/docs/devtools/ai-assistance/code-generation).\nEnable code suggestions in **Settings > AI innovations > Code suggestions**.\n\nThis helps you to play around with more complex combinations of CSS properties, like gradients or box shadows, without remembering their exact syntax. Or to quickly build out grid- and flex- layouts, relying on multiple related properties.\n\nThe toolbar at the bottom of the **Styles** tab displays the status through a\nloading spinner. Suggestions update or clear as you type, ensuring that the\nAI-generated text stays relevant to your manual edits.\n\n## APCA color contrast guidelines promoted to stable\n\nThe Advanced Perceptual Contrast Algorithm (APCA) contrast calculator has officially left its experimental phase and is now available as a standard preference setting. APCA replaces the legacy AAA/AA contrast guidelines with a modern perceptual contrast model optimized for modern displays and text rendering.\n\nYou can now enable or disable APCA guidelines using the checkbox located under\n**Settings > Preferences > Elements > Enable APCA contrast guidelines**.\n\n## Dynamic Device Mode user agent\n\nThe Responsive device mode previously used a hardcoded User Agent string (Android 6.0; Nexus 5). This caused modern websites to degrade functionality or trigger compatibility modes because the reported OS was recognized as over a decade old.\n\nThe hard coded user agent has been replaced with a dynamic heuristic that auto-updates based on the current calendar year, ensuring DevTools always reports a plausible, modern environment without requiring manual maintenance.\n\n## Other highlights\n\nA collection of smaller improvements and bug fixes in this release:\n\n**Console**: Added a** Collapse / Expand all**toggle button to the Console panel toolbar to quickly expand or collapse all active console groups and stack traces at once. ([427657550](https://issues.chromium.org/issues/427657550))**Application**: Clickable hyperlinks have replaced static text for storage bucket fields in the Application metadata view. Clicking a bucket link automatically navigates to and highlights that specific bucket in the*Storage Buckets*sidebar panel. ([435311130](https://issues.chromium.org/issues/435311130))**Application**: Re-enabled full storage inspection support for Service Workers after resolving a crash regression. ([406991275](https://issues.chromium.org/issues/406991275),[466134219](https://issues.chromium.org/issues/466134219))**Application**: Added support for inspecting`form_submission`\n\nprerendering events within the Preloading panel. ([346555939](https://issues.chromium.org/issues/346555939),[488078903](https://issues.chromium.org/issues/488078903))**Application**: Implemented Device-Bound Session Credentials (DBSC) management, allowing developers to clear or delete active sessions from the context menu or by pressing the`Delete`\n\nor`Backspace`\n\nkeys. ([471017387](https://issues.chromium.org/issues/471017387))**Elements**: Highlights on DOM nodes representing hidden issues in the Issues panel now dynamically update (appearing or disappearing) in response to issue filter actions. ([40272723](https://issues.chromium.org/issues/40272723))**Network**: Server-Sent Events (SSE) are now fully serialized and included in HAR exports, enabling ongoing, live event stream captures to be saved and re-imported into DevTools. ([494294071](https://issues.chromium.org/issues/494294071))**Performance**: Fixed Core Web Vitals tracking in the Live Metrics view to pin tracking strictly to the primary frame execution context, preventing dynamic iframe churn from resetting metrics. ([494350655](https://issues.chromium.org/issues/494350655))**Performance**: Upgraded`web-vitals`\n\nto v5.2.0, introducing native upstream fixes for memory leaks during INP monitoring. ([484342204](https://issues.chromium.org/issues/484342204))", "url": "https://wpnews.pro/news/what-s-new-in-devtools-chrome-149", "canonical_source": "https://developer.chrome.com/blog/new-in-devtools-149?hl=en", "published_at": "2026-06-02 07:00:00+00:00", "updated_at": "2026-06-03 08:46:26.157636+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "artificial-intelligence"], "entities": ["Chrome DevTools", "Chrome 149", "WebMCP", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/what-s-new-in-devtools-chrome-149", "markdown": "https://wpnews.pro/news/what-s-new-in-devtools-chrome-149.md", "text": "https://wpnews.pro/news/what-s-new-in-devtools-chrome-149.txt", "jsonld": "https://wpnews.pro/news/what-s-new-in-devtools-chrome-149.jsonld"}}