正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

Addy Osmani

378,193 subscribers

36,854 次观看 • 1 年前 •via X (Twitter)

新闻政治科学技术教育

Anya Rossi• Live Now

Private livecam show

8 条评论

ςЎβξЯиęł 的头像

ςЎβξЯиęł1 年前

@ChromeDevTools 5 years from now chrome is going to be like 4GB in size

Alex ZAP 的头像

Alex ZAP1 年前

🚀 Revolutionize your QA testing with ZAPTEST AI! ZAPTEST automates testing, slashes costs & boosts ROI up to 10X. No coding needed—just faster, smarter automation. 📅 Book your live demo now:

Arjun Bharti 的头像

Arjun Bharti1 年前

@ChromeDevTools much needed

Kaushik Barodiya 的头像

Kaushik Barodiya1 年前

@ChromeDevTools Amazing :)

Stephen Burke 的头像

Stephen Burke1 年前

@ChromeDevTools Can you share a link to this? Interesting!

milad khanmohammadi 的头像

milad khanmohammadi1 年前

@ChromeDevTools Super helpful feature, no more copy paste hassle 👊

milad khanmohammadi 的头像

milad khanmohammadi1 年前

@ChromeDevTools @sarvinrz

codeOfArmz 的头像

codeOfArmz1 年前

@ChromeDevTools So I'd guess excluding memory-served apps?

相关视频

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

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

Addy Osmani

20,392 次观看 • 1 年前

Gemini CLI now integrates into VS Code. Get intelligent, context-aware suggestions and native in-editor diffing to review and modify changes directly in your IDE. Learn more:

Gemini CLI now integrates into VS Code. Get intelligent, context-aware suggestions and native in-editor diffing to review and modify changes directly in your IDE. Learn more:

Google AI Developers

143,844 次观看 • 10 个月前

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

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 →

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

Little CSS DevTools Trick: "Show Changes" ⭐️ Copy style changes you make in DevTools by running "Show Changes" from the command palette and hitting "Copy" 🧾 Very useful when you are debugging or trying things out!

Little CSS DevTools Trick: "Show Changes" ⭐️ Copy style changes you make in DevTools by running "Show Changes" from the command palette and hitting "Copy" 🧾 Very useful when you are debugging or trying things out!

jhey ʕ•ᴥ•ʔ

80,322 次观看 • 2 年前

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.

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 年前

New in Chrome DevTools: Annotate performance findings with Gemini! You can now ask Gemini to explain performance traces. Specifically you can generate annotations about events in the performance trace. This is a total game-changer. Double-click an event in the Main track, then click Generate label next to the input field. Gemini can suggest a label based on the stack trace and context. Try it out and let us know what you think!

New in Chrome DevTools: Annotate performance findings with Gemini! You can now ask Gemini to explain performance traces. Specifically you can generate annotations about events in the performance trace. This is a total game-changer. Double-click an event in the Main track, then click Generate label next to the input field. Gemini can suggest a label based on the stack trace and context. Try it out and let us know what you think!

Addy Osmani

88,219 次观看 • 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 →

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 个月前

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

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 年前

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

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Google Gemini

48,686 次观看 • 2 个月前

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Nate Berkopec

10,298 次观看 • 1 年前

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.

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

Creating, remixing, and editing a video is easier than ever with Gemini Omni. It offers a fluid, conversational way to create and edit. Just upload a video from your camera roll and ask Gemini to make changes.

Creating, remixing, and editing a video is easier than ever with Gemini Omni. It offers a fluid, conversational way to create and edit. Just upload a video from your camera roll and ask Gemini to make changes.

Google Gemini

1,322,841 次观看 • 26 天前

You can now generate a variety of downloadable files, including PDFs, Google Workspace files, Microsoft Word & Excel, and more directly in your chats with Gemini. Tell Gemini what content to create and the file format you want when you prompt without having to upload a template.

You can now generate a variety of downloadable files, including PDFs, Google Workspace files, Microsoft Word & Excel, and more directly in your chats with Gemini. Tell Gemini what content to create and the file format you want when you prompt without having to upload a template.

Google Gemini

27,061,694 次观看 • 1 个月前

Agentic trading is now live on Gemini 🤖 Connect your AI model of choice directly to the exchange, train it with plain language, and run your own trading systems directly on the exchange Built to get you trading in minutes

Agentic trading is now live on Gemini 🤖 Connect your AI model of choice directly to the exchange, train it with plain language, and run your own trading systems directly on the exchange Built to get you trading in minutes

Gemini

165,911 次观看 • 1 个月前

We redesigned Reve. Editing is easier than ever. Now all your tools are in one panel on the right. And you can make changes to anything just by clicking directly and prompting.

We redesigned Reve. Editing is easier than ever. Now all your tools are in one panel on the right. And you can make changes to anything just by clicking directly and prompting.

Reve

374,040 次观看 • 3 个月前

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

Tremendous alpha in having AI write storybook pages that allow designers to tweak layout of dynamic UI. Kit Langton does this kind of stuff for everything, inspired me! Even wrote a vite plugin that writes back the CSS changes to source so David can send PRs.

Tremendous alpha in having AI write storybook pages that allow designers to tweak layout of dynamic UI. Kit Langton does this kind of stuff for everything, inspired me! Even wrote a vite plugin that writes back the CSS changes to source so David can send PRs.

Adam

32,307 次观看 • 2 个月前

A whole new way to talk to Gemini 🗣️ Available on #Pixel9 phones and with a Gemini Advanced subscription for other Pixel phones, Gemini Live can now help you make sense of what’s on your screen📱 or in your camera view¹ 📷 See what all the talk is about:

A whole new way to talk to Gemini 🗣️ Available on #Pixel9 phones and with a Gemini Advanced subscription for other Pixel phones, Gemini Live can now help you make sense of what’s on your screen📱 or in your camera view¹ 📷 See what all the talk is about:

Made by Google

268,977 次观看 • 1 年前