Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Haberler & PolitikaBilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

ςЎβξЯиęł profil fotoğrafı
ςЎβξЯиęł1 yıl önce

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

Alex ZAP profil fotoğrafı
Alex ZAP1 yıl önce

🚀 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 profil fotoğrafı
Arjun Bharti1 yıl önce

@ChromeDevTools much needed

Kaushik Barodiya profil fotoğrafı
Kaushik Barodiya1 yıl önce

@ChromeDevTools Amazing :)

Stephen Burke profil fotoğrafı
Stephen Burke1 yıl önce

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

milad khanmohammadi profil fotoğrafı
milad khanmohammadi1 yıl önce

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

milad khanmohammadi profil fotoğrafı
milad khanmohammadi1 yıl önce

@ChromeDevTools @sarvinrz

codeOfArmz profil fotoğrafı
codeOfArmz1 yıl önce

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

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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,052 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 2 yıl önce

🚀 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,259 görüntüleme • 1 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 23 gün önce

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,491 görüntüleme • 1 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 3 ay önce

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,354 görüntüleme • 1 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce