Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 →

googledevs's profile picture

Google for Developers

2,550,468 subscribers

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

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

5 Yorum

Logan Kilpatrick profil fotoğrafı
Logan Kilpatrick1 yıl önce

nice : )

Kong D profil fotoğrafı
Kong D1 yıl önce

👍

Dino profil fotoğrafı
Dino1 yıl önce

started using this yesterday and its super helpful

ryan yang profil fotoğrafı
ryan yang1 yıl önce

Sounds like a game changer for debugging. Have you tried it out yet?

Pablo Navarro profil fotoğrafı
Pablo Navarro1 yıl önce

Love the idea of AI-powered debugging! Can't wait to try it out and see how it simplifies my workflow

Benzer Videolar

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools
0:27

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

Chrome for Developers

2,621,406 görüntüleme • 1 yıl önce

Want some help understanding all requests related to your website? Chrome DevTools AI assistance for network helps you analyze page load and inspect network resources. Learn more here →
0:26

Want some help understanding all requests related to your website? Chrome DevTools AI assistance for network helps you analyze page load and inspect network resources. Learn more here →

Chrome for Developers

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

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:
0:38

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:

Chrome for Developers

25,960 görüntüleme • 1 yıl önce

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.
7:00

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Addy Osmani

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

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI
0:29

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

Jecelyn Yeen 🐟

13,260 görüntüleme • 1 yıl önce

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

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.
0:33

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,854 görüntüleme • 1 yıl önce

Now Chrome is even better with major updates to Gemini in Chrome. Easier to use. More personalized. And more helpful than ever, with Gemini 3. 🎢 Available in the U.S., auto browse for Google AI Pro and Ultra subscribers.
1:14

Now Chrome is even better with major updates to Gemini in Chrome. Easier to use. More personalized. And more helpful than ever, with Gemini 3. 🎢 Available in the U.S., auto browse for Google AI Pro and Ultra subscribers.

Chrome

21,137,110 görüntüleme • 4 ay önce

This update quietly changed coding forever. Here’s the new flow ⤵️ 1. Install Chrome DevTools MCP 2. Connect Cursor or Claude or Copilot 3. AI launches Chrome 4. AI inspects DOM + console 5. AI fixes and validates bugs No screenshots. No guessing. Save this video, you’ll automate debugging. Want the SOP? DM me. 💬
8:03

This update quietly changed coding forever. Here’s the new flow ⤵️ 1. Install Chrome DevTools MCP 2. Connect Cursor or Claude or Copilot 3. AI launches Chrome 4. AI inspects DOM + console 5. AI fixes and validates bugs No screenshots. No guessing. Save this video, you’ll automate debugging. Want the SOP? DM me. 💬

Julian Goldie SEO

28,793 görüntüleme • 6 ay önce

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.
1:27

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

OpenAI Developers

361,029 görüntüleme • 3 gün önce

🚀 Gemini in Chrome is here! US users will get AI-powered tab summaries, YouTube summaries, calendar integration & smart search in the Omnibox - no Google AI sub needed! Enhanced safety too. More agentic features soon!
2:35

🚀 Gemini in Chrome is here! US users will get AI-powered tab summaries, YouTube summaries, calendar integration & smart search in the Omnibox - no Google AI sub needed! Enhanced safety too. More agentic features soon!

Addy Osmani

76,685 görüntüleme • 8 ay önce

Meet Gemini in Chrome, your AI browsing assistant to help you get things done. Google Gemini #GoogleIO
1:22

Meet Gemini in Chrome, your AI browsing assistant to help you get things done. Google Gemini #GoogleIO

Chrome

436,868 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

Jules, Google’s experimental AI-powered code agent designed to assist developers in fixing bugs and optimizing code. Using Gemini 2.0 AI, Jules automatically identifies and fixes issues, streamlining the debugging process. Currently available to a select group of trusted testers, this innovation promises to accelerate software development. #AI #Coding #SoftwareDevelopment #BugFixes #Jules #Gemini #TechInnovation #DevTools
0:37

Jules, Google’s experimental AI-powered code agent designed to assist developers in fixing bugs and optimizing code. Using Gemini 2.0 AI, Jules automatically identifies and fixes issues, streamlining the debugging process. Currently available to a select group of trusted testers, this innovation promises to accelerate software development. #AI #Coding #SoftwareDevelopment #BugFixes #Jules #Gemini #TechInnovation #DevTools

Wissam Hussein

28,158 görüntüleme • 1 yıl önce

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.
0:27

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Addy Osmani

79,674 görüntüleme • 2 yıl önce

We’ve upgraded your search experience in Chrome. Now you can use inputs like open tabs and images when you search with AI Mode in Chrome on your phone. Learn more:
0:29

We’ve upgraded your search experience in Chrome. Now you can use inputs like open tabs and images when you search with AI Mode in Chrome on your phone. Learn more:

Chrome

65,757 görüntüleme • 24 gün önce

We’re rolling out the biggest upgrade to Chrome in its history with all-new AI features, including: ✨ Gemini in Chrome 🔎 Search with AI Mode right from the address bar 🔐 One-click updates for compromised passwords, plus more safety features And more →
0:45

We’re rolling out the biggest upgrade to Chrome in its history with all-new AI features, including: ✨ Gemini in Chrome 🔎 Search with AI Mode right from the address bar 🔐 One-click updates for compromised passwords, plus more safety features And more →

Google

219,649 görüntüleme • 8 ay önce