Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I created a small tool to automatically set breakpoints in Chrome using the CDP (Chrome DevTools Protocol). It’s still in beta, but I’m actively working on a complete version..

m4ll0k

7,177 subscribers

12,155 views • 1 year ago •via X (Twitter)

Science & Technology Education News & Politics

Anya Rossi• Live Now

Private livecam show

4 Comments

Ryan Barnett1 year ago

@MtnBer fyi

r3ddr4g0n1 year ago

Pretty cool bro!

TheRedTea🇲🇦🍉1 year ago

I had the same idea but I didn't know how to do it nor I gave it time to know how to do it. I was thing of a javascript extention that will do this.

younesnakata1 year ago

nice

Related Videos

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Google for Developers

22,793 views • 5 months ago

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

jhey ʕ•ᴥ•ʔ

272,683 views • 2 years ago

Chrome DevTools MCP in Cursor

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 views • 5 months ago

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting

Bramus

40,932 views • 2 years ago

Codex now works directly in Chrome on macOS and Windows. It’s even better at working with apps and sites in Chrome, and now works in parallel across tabs in the background without taking over your browser. To get started, install the Chrome plugin in the Codex app.

Codex now works directly in Chrome on macOS and Windows. It’s even better at working with apps and sites in Chrome, and now works in parallel across tabs in the background without taking over your browser. To get started, install the Chrome plugin in the Codex app.

OpenAI

2,486,535 views • 1 month ago

AI assistance in Chrome DevTools is here with Chrome 131! 🚀 Using Gemini, it helps you debug styling issues, understand layouts, and get AI-generated fixes for CSS bugs. Learn more →

AI assistance in Chrome DevTools is here with Chrome 131! 🚀 Using Gemini, it helps you debug styling issues, understand layouts, and get AI-generated fixes for CSS bugs. Learn more →

Google for Developers

17,235 views • 1 year ago

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Chrome for Developers

1,041,402 views • 8 months ago

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,294 views • 8 months ago

Art history, but make it interesting. Ask Gemini in Chrome to explain a subject like it’s your favorite series 🍿 Try it yourself: Just click the Gemini icon in the corner of Chrome

Art history, but make it interesting. Ask Gemini in Chrome to explain a subject like it’s your favorite series 🍿 Try it yourself: Just click the Gemini icon in the corner of Chrome

Chrome

47,905 views • 7 months ago

Just published a command that lets you inspect Safari websites / WebViews with Chrome DevTools in a single command: ~ / npx inspect-webkit

Just published a command that lets you inspect Safari websites / WebViews with Chrome DevTools in a single command: ~ / npx inspect-webkit

Evan Bacon 🥓

17,716 views • 1 month ago

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

Wow, it actually is DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

Steren

733,085 views • 16 days ago

The upcoming Picture-in-Picture API that Chrome is pushing is soo promising! 🤩 Nuxt DevTools will be able to pop up as a separate window soon!

The upcoming Picture-in-Picture API that Chrome is pushing is soo promising! 🤩 Nuxt DevTools will be able to pop up as a separate window soon!

Anthony Fu 🦋 @antfu.me

316,381 views • 3 years ago

New RoSeal feature: Added support for custom/hex skin colors in the website's Avatar Editor. Out now on Chrome and Firefox. (current version on Firefox is a little buggy). Chrome: Firefox: #Roblox #RobloxDev

julia | i made roseal

53,171 views • 2 years ago

I made a chrome extension that displays the $KAS amount next to the $USD value on most websites where goods are being sold. Aside from not working too well on Amazon, it works so effortlessly. I’m working on a safari extension too but it’s much harder. I personally think it’s really cool seeing the $KAS prices on Zillow. Let me know what you guys think 🔥

I made a chrome extension that displays the $KAS amount next to the $USD value on most websites where goods are being sold. Aside from not working too well on Amazon, it works so effortlessly. I’m working on a safari extension too but it’s much harder. I personally think it’s really cool seeing the $KAS prices on Zillow. Let me know what you guys think 🔥

₿ЯT 𐤊 🐈📈

31,279 views • 10 months ago

Improving Chrome DevTools debugging with AI: a quick overview of new features we recently shipped.

Improving Chrome DevTools debugging with AI: a quick overview of new features we recently shipped.

Addy Osmani

14,800 views • 1 year ago

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Chrome for Developers

19,286 views • 8 months ago

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

Addy Osmani

154,052 views • 2 years ago

🚨BREAKING Claude is officially browser-native. The new Claude for Chrome extension runs end-to-end workflows in Chrome 🤯 You can: → Pull dashboard data into one analysis doc → Handle slide comments automatically → Build with Claude Code, test directly in Chrome and more!

🚨BREAKING Claude is officially browser-native. The new Claude for Chrome extension runs end-to-end workflows in Chrome 🤯 You can: → Pull dashboard data into one analysis doc → Handle slide comments automatically → Build with Claude Code, test directly in Chrome and more!

Charly Wargnier

57,183 views • 5 months ago

I slapped together this quick chrome extension to embed the Spatie tinker package in DevTools. It feels like a native PHP console tab 🤩 Extension below 👇 if you want to use it as well.

I slapped together this quick chrome extension to embed the Spatie tinker package in DevTools. It feels like a native PHP console tab 🤩 Extension below 👇 if you want to use it as well.

Tony Lea

41,585 views • 1 year ago