Loading video...

Video Failed to Load

Go Home

Introducing "Ask AI" across Chrome DevTools + save changes directly to your source code! #googleio

addyosmani's profile picture

Addy Osmani

352,732 subscribers

20,392 views • 1 year ago •via X (Twitter)

#googleio
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

Bora Turan's profile picture
Bora Turan1 year ago

@ChromeDevTools great! curious on how it connects with the source project and works with cursor. It would be great if cursor connects to chrome and work with chrome ai in an integrated fashion.

The Rundown AI's profile picture
The Rundown AI1 year ago

If you're not learning AI in 2025, you're falling behind. Join 1,000,000+ early adopters reading and learn AI in just 5 minutes a day (for free).

PENIEL's profile picture
PENIEL1 year ago

@ChromeDevTools 🥹🥹

Ammaar Reshi's profile picture
Ammaar Reshi1 year ago

@ChromeDevTools Loved this demo during I/O 🔥

Addy Osmani's profile picture
Addy Osmani1 year ago

@ChromeDevTools Thanks Ammaar! 🙏

casslin's profile picture
casslin1 year ago

@ChromeDevTools this is interesting! checking out soon.

Parhosha's profile picture
Parhosha1 year ago

@ChromeDevTools This feature is unavailable in your region Ukraine, when it will available :(

Daryl Malibiran's profile picture
Daryl Malibiran1 year ago

@ChromeDevTools In what Chrome version will this be released?

Sidati / سِداتي / ⵚⵉⴷⴰⵜⵉ's profile picture
Sidati / سِداتي / ⵚⵉⴷⴰⵜⵉ1 year ago

@ChromeDevTools Nice! Does this work with sourcemaps ?

⟁ndrew V's profile picture
⟁ndrew V1 year ago

@ChromeDevTools Your presentation was as flawless as the demo you put out Addy. Was great to see in the spotlight showing off some incredibly useful tools!!!!

Farhan's profile picture
Farhan1 year ago

@ChromeDevTools Super handy for devs

Related Videos

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 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.
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 views • 8 months ago

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 views • 5 months ago

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 views • 1 year ago

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,867 views • 1 year ago

Introducing PDF AI Chrome extension! Chat directly with any online .pdf files, or files in your Google Drive and Dropbox 🎉
0:44

Introducing PDF AI Chrome extension! Chat directly with any online .pdf files, or files in your Google Drive and Dropbox 🎉

Damon Chen

22,003 views • 3 years ago

Aider v0.67.0 works in your favorite IDE or editor. Ask aider to make changes by adding "// AI comments" to your source files. Aider will immediately get to work. Aider wrote 61% of the code in this release.
0:34

Aider v0.67.0 works in your favorite IDE or editor. Ask aider to make changes by adding "// AI comments" to your source files. Aider will immediately get to work. Aider wrote 61% of the code in this release.

Paul Gauthier

17,875 views • 1 year ago

Introducing Forums: turn any github repo into an ai-powered forum. Replace with — ask questions, get answers straight from the source code.
0:27

Introducing Forums: turn any github repo into an ai-powered forum. Replace with — ask questions, get answers straight from the source code.

JB

25,750 views • 5 months ago

Introducing Linear Agent. Built directly into Linear and accessible everywhere, it understands your roadmap, issues, and code. Ask anything. Command everything.
0:54

Introducing Linear Agent. Built directly into Linear and accessible everywhere, it understands your roadmap, issues, and code. Ask anything. Command everything.

Linear

6,249,546 views • 2 months ago

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 views • 1 year ago

Introducing Memo MCP. Switch AI agents without re-explaining your context. Claude Code can’t fix your bug? Save the conversation and load it into Cursor. # Save context (returns an ID) memo set # Restore anywhere memo get 4tJ630XqhCV5gQelx98pu Free & open source.
0:31

Introducing Memo MCP. Switch AI agents without re-explaining your context. Claude Code can’t fix your bug? Save the conversation and load it into Cursor. # Save context (returns an ID) memo set # Restore anywhere memo get 4tJ630XqhCV5gQelx98pu Free & open source.

Enes Akar

63,932 views • 4 months ago

Introducing GitHub sync on v0: • Push generated code to GitHub directly from v0 • v0 will automatically pull changes from GitHub into your chat • Switch branches and open PRs to collaborate with your team
0:30

Introducing GitHub sync on v0: • Push generated code to GitHub directly from v0 • v0 will automatically pull changes from GitHub into your chat • Switch branches and open PRs to collaborate with your team

v0

270,166 views • 1 year ago

Ask your toughest questions with AI Mode built into Chrome:
0:23

Ask your toughest questions with AI Mode built into Chrome:

Chrome

22,194 views • 8 months ago

Introducing Chroma Package Search Enable your AI agents to search the source code of your package dependencies Includes 3 MCP tools: package_search_hybrid() package_search_grep() package_search_read_file() Add it to Cursor, Claude Code, VS Code, and Codex in 5 seconds
1:18

Introducing Chroma Package Search Enable your AI agents to search the source code of your package dependencies Includes 3 MCP tools: package_search_hybrid() package_search_grep() package_search_read_file() Add it to Cursor, Claude Code, VS Code, and Codex in 5 seconds

Chroma

41,505 views • 9 months ago

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 views • 1 year ago

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 views • 5 months ago

Introducing - Search Engine for Developers! Answers all your coding questions and runs code directly in the app. Free and open-source. App link below👇
0:40

Introducing - Search Engine for Developers! Answers all your coding questions and runs code directly in the app. Free and open-source. App link below👇

Exa

43,152 views • 11 months ago

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 views • 1 year ago

Your toughest questions. Your deepest research. Your personalized shopping needs. Your just-save-me-time tasks. All you have to do is ask. Welcome to the next chapter of Google Search. #GoogleIO
1:25

Your toughest questions. Your deepest research. Your personalized shopping needs. Your just-save-me-time tasks. All you have to do is ask. Welcome to the next chapter of Google Search. #GoogleIO

Google

127,582 views • 1 year ago