Загрузка видео...

Не удалось загрузить видео

На главную

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

addyosmani's profile picture

Addy Osmani

378,193 subscribers

36,854 просмотров • 1 год назад •via X (Twitter)

Новости и политикаНаука и технологииОбразование
LIVE

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
3:52

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:
0:46

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!
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 лет назад

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!
0:25

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 лет назад

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 →
0:24

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 год назад

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 год назад

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!
0:28

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 →
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 месяцев назад

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 лет назад

🚀 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 год назад

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.
0:29

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,642 просмотров • 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:
3:54

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.
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 просмотров • 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.
0:30

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,563 просмотров • 24 дней назад

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.
0:39

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,590 просмотров • 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
0:45

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,834 просмотров • 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.
0:35

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!
3:47

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.
0:55

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:
0:43

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 год назад