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.

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.show more

Addy Osmani

406,712 subscribers

95,935 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Victor1 year ago

@ChromeDevTools I doubt it can center a div 🤔

Maxime Rossignol1 year ago

@ChromeDevTools Damn you’re shipping hard these days, great to see !

Addy Osmani1 year ago

@ChromeDevTools Thanks! @mathias @MHablich and the team have been on 🔥🙏

Youzeur1 year ago

@ChromeDevTools Does it work offline ?

Joel Drake1 year ago

@ChromeDevTools How can you extract/save changes like this to your real website?

🔻Dead_Code🔻1 year ago

@ChromeDevTools Amazing, what Chrome version is supported?

Ashish “Logmaster”1 year ago

@ChromeDevTools Any plans to use Gemini nano that I think is within chrome to support offline use when on train/plane when no internet ?

Addy Osmani1 year ago

Gemini nano is a great model for lighter tasks (such as text summarization or translation). We’re using it for some of our “built-in Web AI” explorations more broadly in the platform. That said, it’s not well suited for coding usecases atm. I think we’ll keep the offline usecase in mind as more options become available in the future.

Goran Majić1 year ago

@ChromeDevTools Can it build wordpress/CMS functions into html sites?

Arul Prakash1 year ago

@ChromeDevTools I can see a future where it can come in handy in diagnosing issues more than adding features.

Related Videos

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,086 views • 2 years ago

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.

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

Need a little help building your islands? The Epic Developer Assistant Beta is here to lend a hand! This new AI-powered assistant helps you write Verse code for your UEFN projects, provides answers, workflow guidance, code snippets, and more. Check it out now on the Epic Developer Community:

Need a little help building your islands? The Epic Developer Assistant Beta is here to lend a hand! This new AI-powered assistant helps you write Verse code for your UEFN projects, provides answers, workflow guidance, code snippets, and more. Check it out now on the Epic Developer Community:

Fortnite Developers

118,161 views • 1 year ago

🚀 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

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

(1/2) AI in Search continues to make it easier to ask Google *anything* and get a helpful response. Today, I'm excited to share another step towards that vision: AI Mode – our most powerful AI search – is coming to the Chrome address bar. This means you can use AI Mode to ask complex, multi-part questions right from the same place you already search and browse the web from Chrome. And you can quickly ask follow-up questions and explore more content from across the web. We’re rolling this out to users in the U.S. later this month and will expand to more countries and languages in the weeks ahead.

(1/2) AI in Search continues to make it easier to ask Google anything and get a helpful response. Today, I'm excited to share another step towards that vision: AI Mode – our most powerful AI search – is coming to the Chrome address bar. This means you can use AI Mode to ask complex, multi-part questions right from the same place you already search and browse the web from Chrome. And you can quickly ask follow-up questions and explore more content from across the web. We’re rolling this out to users in the U.S. later this month and will expand to more countries and languages in the weeks ahead.

Robby Stein

31,457 views • 10 months ago

(1/5) Gemini 3, our most intelligent model, is landing in Google Search today – starting with AI Mode. Excited that this is the first time we’re shipping a new Gemini model in Search on day one! 🚀 In Search, Gemini 3 with generative layouts will make it easy to get a rich understanding of anything on your mind. It has state-of-the-art reasoning, deep multimodal understanding and advanced agentic capabilities. That allows the model to shine when you ask it to explain advanced concepts or ideas – it reasons and can code interactive visuals in real-time. It can tackle your toughest questions like advanced science.

(1/5) Gemini 3, our most intelligent model, is landing in Google Search today – starting with AI Mode. Excited that this is the first time we’re shipping a new Gemini model in Search on day one! 🚀 In Search, Gemini 3 with generative layouts will make it easy to get a rich understanding of anything on your mind. It has state-of-the-art reasoning, deep multimodal understanding and advanced agentic capabilities. That allows the model to shine when you ask it to explain advanced concepts or ideas – it reasons and can code interactive visuals in real-time. It can tackle your toughest questions like advanced science.

Robby Stein

94,877 views • 8 months ago

A lot of you asked about the FPS Meter I used here Here is how to get it running in DevTools and a few other handy tips for debugging Janky CSS rendering

A lot of you asked about the FPS Meter I used here Here is how to get it running in DevTools and a few other handy tips for debugging Janky CSS rendering

Wes Bos

25,867 views • 11 months ago

Introducing Gemini 3 ✨ It’s the best model in the world for multimodal understanding, and our most powerful agentic + vibe coding model yet. Gemini 3 can bring any idea to life, quickly grasping context and intent so you can get what you need with less prompting. Find Gemini 3 Pro rolling out today in the Google Gemini and AI Mode in Search. For developers, build with it now in Google AI Studio and Vertex AI. Excited for you to try it!

Introducing Gemini 3 ✨ It’s the best model in the world for multimodal understanding, and our most powerful agentic + vibe coding model yet. Gemini 3 can bring any idea to life, quickly grasping context and intent so you can get what you need with less prompting. Find Gemini 3 Pro rolling out today in the Google Gemini and AI Mode in Search. For developers, build with it now in Google AI Studio and Vertex AI. Excited for you to try it!

Sundar Pichai

2,950,855 views • 8 months ago

Excited for this one! With Gemini 3, we’ve been experimenting with how to take the web for a fresh spin. Our first Google Labs experiment, GenTabs, lets you remix your open tabs into totally custom apps to help you make anything out of the web. Join the waitlist to try GenTabs today in Disco 🪩, our latest experimental way to disco-ver (get it!? ;) new AI-powered features, and help us decide if we should bring something like this to Chrome More →

Excited for this one! With Gemini 3, we’ve been experimenting with how to take the web for a fresh spin. Our first Google Labs experiment, GenTabs, lets you remix your open tabs into totally custom apps to help you make anything out of the web. Join the waitlist to try GenTabs today in Disco 🪩, our latest experimental way to disco-ver (get it!? ;) new AI-powered features, and help us decide if we should bring something like this to Chrome More →

Parisa Tabriz

37,206 views • 7 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,315 views • 9 months ago

The new Screenshot to Code from Vercel v0 is insane. I just took a screenshot of a pricing table and it was converted into code using AI in seconds! It even outputs the code and allows you to modify any specific parts.

The new Screenshot to Code from Vercel v0 is insane. I just took a screenshot of a pricing table and it was converted into code using AI in seconds! It even outputs the code and allows you to modify any specific parts.

Alvaro Cintas

378,014 views • 2 years ago

I'm teaching a new course! AI Python for Beginners is a series of four short courses that teach anyone to code, regardless of current technical skill. We are offering these courses free for a limited time. Generative AI is transforming coding. This course teaches coding in a way that’s aligned with where the field is going, rather than where it has been: (1) AI as a Coding Companion. Experienced coders are using AI to help write snippets of code, debug code, and the like. We embrace this approach and describe best-practices for coding with a chatbot. Throughout the course, you'll have access to an AI chatbot that will be your own coding companion that can assist you every step of the way as you code. (2) Learning by Building AI Applications. You'll write code that interacts with large language models to quickly create fun applications to customize poems, write recipes, and manage a to-do list. This hands-on approach helps you see how writing code that calls on powerful AI models will make you more effective in your work and personal projects. With this approach, beginning programmers can learn to do useful things with code far faster than they could have even a year ago. Knowing a little bit of coding is increasingly helping people in job roles other than software engineers. For example, I've seen a marketing professional write code to download web pages and use generative AI to derive insights; a reporter write code to flag important stories; and an investor automate the initial drafts of contracts. With this course you’ll be equipped to automate repetitive tasks, analyze data more efficiently, and leverage AI to enhance your productivity. If you are already an experienced developer, please help me spread the word and encourage your non-developer friends to learn a little bit of coding. I hope you'll check out the first two short courses here!

I'm teaching a new course! AI Python for Beginners is a series of four short courses that teach anyone to code, regardless of current technical skill. We are offering these courses free for a limited time. Generative AI is transforming coding. This course teaches coding in a way that’s aligned with where the field is going, rather than where it has been: (1) AI as a Coding Companion. Experienced coders are using AI to help write snippets of code, debug code, and the like. We embrace this approach and describe best-practices for coding with a chatbot. Throughout the course, you'll have access to an AI chatbot that will be your own coding companion that can assist you every step of the way as you code. (2) Learning by Building AI Applications. You'll write code that interacts with large language models to quickly create fun applications to customize poems, write recipes, and manage a to-do list. This hands-on approach helps you see how writing code that calls on powerful AI models will make you more effective in your work and personal projects. With this approach, beginning programmers can learn to do useful things with code far faster than they could have even a year ago. Knowing a little bit of coding is increasingly helping people in job roles other than software engineers. For example, I've seen a marketing professional write code to download web pages and use generative AI to derive insights; a reporter write code to flag important stories; and an investor automate the initial drafts of contracts. With this course you’ll be equipped to automate repetitive tasks, analyze data more efficiently, and leverage AI to enhance your productivity. If you are already an experienced developer, please help me spread the word and encourage your non-developer friends to learn a little bit of coding. I hope you'll check out the first two short courses here!

Andrew Ng

1,224,481 views • 1 year ago

How to launch a working AI product in under 10 minutes. All you need is Appy AI and a clear idea. (Here’s exactly how it works 👇): Step 1: Go to Think of it as your personal AI engineer. Step 2: Type your idea “Create an AI Agent that turns daily AI news into ready-to-post content.” Step 3: AppyAI gets to work It builds the logic, creates your website, connects Stripe, and sets up tools. Step 4: Preview and launch Your product is live ready to sell instantly. Step 5: Share it with your audience You now own a complete AI product. Most people still build the old way. Endless back-and-forth with developers. Weeks wasted on setup and testing. Appy AI changes that. Describe your idea once it builds everything for you. Try now: Repost ♻️ to help others start building.

How to launch a working AI product in under 10 minutes. All you need is Appy AI and a clear idea. (Here’s exactly how it works 👇): Step 1: Go to Think of it as your personal AI engineer. Step 2: Type your idea “Create an AI Agent that turns daily AI news into ready-to-post content.” Step 3: AppyAI gets to work It builds the logic, creates your website, connects Stripe, and sets up tools. Step 4: Preview and launch Your product is live ready to sell instantly. Step 5: Share it with your audience You now own a complete AI product. Most people still build the old way. Endless back-and-forth with developers. Weeks wasted on setup and testing. Appy AI changes that. Describe your idea once it builds everything for you. Try now: Repost ♻️ to help others start building.

Muhammad Ayan

61,441 views • 7 months ago

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

Andrew Ng

635,937 views • 6 months ago

Before software engineers even begin writing code, they have to set the stage of the entire development process. This process requires engineers to make complex tradeoffs between requirements, system design, and implementations details. Current IDEs that rely on AI features, like chat and inline coding, can help engineers get the job done quickly on small development tasks. Still, engineers spend much more time on larger projects—even after the initial code is generated—by conducting rigorous testing and creating documentation. This is where today’s AI IDEs can do more to accelerate the development lifecycle—and this is why we built Kiro. Kiro is an AI IDE that helps you go from prototype to production with spec-driven development and agent hooks. From simple to complex tasks, Kiro works alongside you to turn prompts into detailed specs, then into working code, docs, and test so what you build is exactly what you want and ready to share with your team. After a developer builds the code with Kiro, Kiro’s agent hooks help engineers solve challenging problems and automate tasks like generating documentation and unit tests. Kiro brings structure and mature engineering practices to AI coding, so you can go from concept to application while being in the driver’s seat every step of the way. Kiro is free during preview, and supports Mac, Windows, and Linux, and most popular programming languages. We're excited for you to try it out and let us know what you think ➡️

Before software engineers even begin writing code, they have to set the stage of the entire development process. This process requires engineers to make complex tradeoffs between requirements, system design, and implementations details. Current IDEs that rely on AI features, like chat and inline coding, can help engineers get the job done quickly on small development tasks. Still, engineers spend much more time on larger projects—even after the initial code is generated—by conducting rigorous testing and creating documentation. This is where today’s AI IDEs can do more to accelerate the development lifecycle—and this is why we built Kiro. Kiro is an AI IDE that helps you go from prototype to production with spec-driven development and agent hooks. From simple to complex tasks, Kiro works alongside you to turn prompts into detailed specs, then into working code, docs, and test so what you build is exactly what you want and ready to share with your team. After a developer builds the code with Kiro, Kiro’s agent hooks help engineers solve challenging problems and automate tasks like generating documentation and unit tests. Kiro brings structure and mature engineering practices to AI coding, so you can go from concept to application while being in the driver’s seat every step of the way. Kiro is free during preview, and supports Mac, Windows, and Linux, and most popular programming languages. We're excited for you to try it out and let us know what you think ➡️

Swami Sivasubramanian

154,343 views • 1 year ago

Chrome has received a massive AI update Gemini in Chrome can see your screen live and interact with you to explain things. Discussion is extremely natural and is a game-changer for learning. Here's how to access it: 1. Use a Gemini Pro/Ultra account 2. Log in to this account on Chrome 3. The icon should appear in the top right-hand corner 4. Click on it or use the shortcut Alt+G At the end of your conversation, the entire transcript is available: It's easy to find information in the future!

Chrome has received a massive AI update Gemini in Chrome can see your screen live and interact with you to explain things. Discussion is extremely natural and is a game-changer for learning. Here's how to access it: 1. Use a Gemini Pro/Ultra account 2. Log in to this account on Chrome 3. The icon should appear in the top right-hand corner 4. Click on it or use the shortcut Alt+G At the end of your conversation, the entire transcript is available: It's easy to find information in the future!

Paul Couvert

277,519 views • 1 year ago

Building with AI gets easier every day. Here is an open-source library that makes integrating AI into an application extremely easy: Star the repository! This library alone can make React the best front-end framework out there! There are a bunch of cool things I like about CopilotKit. Here are 3 of them: 1. It allows you to take any -powered agent and bring it into your application. (This is a brand-new feature!) 2. You can build an AI-powered chatbot in your application. The chatbot will have access to your context and can act on the application. 3. You can build a RAG workflow to process and answer questions from a real-time knowledge base. I recorded a video to show you how simple it is to make some of this happen. A few lines of code, and you are in business. Here is a link to the sample application: CopilotKit is open-source. You can self-host it. You can use it with any LLM. Thanks to the team for showing me their tool and collaborating with me on this post!

Santiago

108,835 views • 2 years ago

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

In Cursor you can easily turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

Mckay Wrigley

106,485 views • 1 year ago

New course to bring you up to state-of-the-art at using AI to help you code: Build Apps with Windsurf's AI Coding Agents, built in partnership with WIndsurf (Codeium) and taught by Anshul Ramachandran! AI-assisted IDEs (Integrated Development Environments) make developers’ workflows faster, more efficient, and much more fun. Agentic tools like Windsurf are more than just code autocomplete—they are collaborative coding agents that help you break down complex applications, iterate efficiently, and generate code that spans multiple files. Although a lot of coding assistants share the same underlying large language models for planning and reasoning, a major point of distinction is how they handle tools, keep track of context, and stay aligned with your intent as a developer. For instance, if you make modifications to a class definition in your code and make the same modifications to other classes in the same directory, you might tell the AI agent "Do the same thing in similar places in this directory." Here, tracking your intent means understanding that “the same thing" refers to that recent edit you just made, which must be followed by appropriate search and tool-calling to implement the changes. In this course, you'll learn the inner workings of coding agents, their strengths and limitations, and how to use Windsurf to quickly build several applications. In detail, you'll: - Build a mental model of how agents work by combining human-action tracking, tool integration, and context awareness to carry out an agentic coding workflow. - Learn the challenges of code search and discovery and how a multi-step retrieval approach helps coding agents address them. - Use Windsurf to analyze and understand a large, old codebase and update it to the latest versions of the frameworks and packages it uses. - Build a Wikipedia data analysis app that retrieves, parses, and analyzes word frequencies. - Enhance the performance of your Wikipedia analysis app by adding caching, and through this, also learn how to course-correct when the AI agent produces unexpected results. - Learn tips and tricks such as keyboard shortcuts, autocomplete, and @ mentions to quickly call on agentic capabilities. - Use image/multimodal capabilities of the AI agent to increase your development velocity; you'll see an example of uploading a mockup with sketched-out UI features, and ask the agent to use that to build new functionality to an app. By the end of this course, you’ll understand agentic coding in-depth and know how to use it to make your development process much faster, more efficient, and enjoyable. Please sign up here!

New course to bring you up to state-of-the-art at using AI to help you code: Build Apps with Windsurf's AI Coding Agents, built in partnership with WIndsurf (Codeium) and taught by Anshul Ramachandran! AI-assisted IDEs (Integrated Development Environments) make developers’ workflows faster, more efficient, and much more fun. Agentic tools like Windsurf are more than just code autocomplete—they are collaborative coding agents that help you break down complex applications, iterate efficiently, and generate code that spans multiple files. Although a lot of coding assistants share the same underlying large language models for planning and reasoning, a major point of distinction is how they handle tools, keep track of context, and stay aligned with your intent as a developer. For instance, if you make modifications to a class definition in your code and make the same modifications to other classes in the same directory, you might tell the AI agent "Do the same thing in similar places in this directory." Here, tracking your intent means understanding that “the same thing" refers to that recent edit you just made, which must be followed by appropriate search and tool-calling to implement the changes. In this course, you'll learn the inner workings of coding agents, their strengths and limitations, and how to use Windsurf to quickly build several applications. In detail, you'll: - Build a mental model of how agents work by combining human-action tracking, tool integration, and context awareness to carry out an agentic coding workflow. - Learn the challenges of code search and discovery and how a multi-step retrieval approach helps coding agents address them. - Use Windsurf to analyze and understand a large, old codebase and update it to the latest versions of the frameworks and packages it uses. - Build a Wikipedia data analysis app that retrieves, parses, and analyzes word frequencies. - Enhance the performance of your Wikipedia analysis app by adding caching, and through this, also learn how to course-correct when the AI agent produces unexpected results. - Learn tips and tricks such as keyboard shortcuts, autocomplete, and @ mentions to quickly call on agentic capabilities. - Use image/multimodal capabilities of the AI agent to increase your development velocity; you'll see an example of uploading a mockup with sketched-out UI features, and ask the agent to use that to build new functionality to an app. By the end of this course, you’ll understand agentic coding in-depth and know how to use it to make your development process much faster, more efficient, and enjoyable. Please sign up here!

Andrew Ng

139,834 views • 1 year ago