正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

5 条评论

Logan Kilpatrick 的头像
Logan Kilpatrick1 年前

nice : )

Kong D 的头像
Kong D1 年前

👍

Dino 的头像
Dino1 年前

started using this yesterday and its super helpful

ryan yang 的头像
ryan yang1 年前

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

Pablo Navarro 的头像
Pablo Navarro1 年前

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

相关视频

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

🚀 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 次观看 • 1 年前

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 次观看 • 5 个月前

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 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 6 个月前

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 次观看 • 3 天前

🚀 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 次观看 • 8 个月前

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 次观看 • 1 年前

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 次观看 • 8 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 24 天前

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 次观看 • 8 个月前