Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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's profile picture

m4ll0k

7,177 subscribers

12,155 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitimHaberler & Politika
LIVE

Anya Rossi• Live Now

Private livecam show

4 Yorum

Ryan Barnett profil fotoğrafı
Ryan Barnett1 yıl önce

@MtnBer fyi

r3ddr4g0n profil fotoğrafı
r3ddr4g0n1 yıl önce

Pretty cool bro!

TheRedTea🇲🇦🍉 profil fotoğrafı
TheRedTea🇲🇦🍉1 yıl önce

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.

younesnakata profil fotoğrafı
younesnakata1 yıl önce

nice

Benzer Videolar

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 →
1:01

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 görüntüleme • 5 ay önce

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

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

jhey ʕ•ᴥ•ʔ

272,683 görüntüleme • 2 yıl önce

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 görüntüleme • 5 ay önce

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
1:54

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 görüntüleme • 2 yıl önce

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.
0:52

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,880 görüntüleme • 1 ay önce

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 →
0:24

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 görüntüleme • 1 yıl önce

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.
0:32

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 görüntüleme • 8 ay önce

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
1:01

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 görüntüleme • 8 ay önce

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
0:21

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 görüntüleme • 7 ay önce

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

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 görüntüleme • 1 ay önce

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
0:37

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 görüntüleme • 16 gün önce

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!
0:20

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 görüntüleme • 3 yıl önce

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
0:23

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 görüntüleme • 2 yıl önce

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 🔥
1:18

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 görüntüleme • 10 ay önce

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

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

Addy Osmani

14,800 görüntüleme • 1 yıl önce

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.
0:22

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 görüntüleme • 8 ay önce

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

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 görüntüleme • 2 yıl önce

🚨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!
1:35

🚨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 görüntüleme • 5 ay önce

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.
0:21

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 görüntüleme • 1 yıl önce