Hangar CSS debugging #DevToolsTips

[00:03] Final call for Matthias to DevTools Hangar, departure gate. That's me. [00:08] Thank you. [00:09] I was just called to the DevTools hangar. It seems there are some problems with our HTML and CSS plane. Come with me. We need to briefly fix some bugs with AI assistance for styling in DevTools so we can take off. Let's go. [00:34] . [00:35] All right, this is the situation it had. [00:37] By going to this link, you'll find our Red DevTools airplane, solely built with HTML and CSS. [00:44] Well, it looks great. [00:46] It's currently broken. [00:47] By clicking on the cross buttons, you get more information about the problem and the intended fix. [00:53] The wheels are rectangular, which will cause a hard landing. The position lights are not flashing as they should, and the engine is all misaligned. [01:01] Let's get to work and make this thing fly again. First, find the wheel in the Elements panel. [01:08] Right-click and select Ask AI to start AI assistance. [01:12] Enter the prompt "Please make all elements like this round for me". [01:17] and press enter to send. [01:19] AI assistants will now investigate the problem by using JavaScript to retrieve computed styles, element attributes and more. [01:29] then before AI Assistant makes any changes, it will ask you for confirmation.

[01:35] When accepted, changes will be applied to the live page and by clicking "Apply to Workspace" can be transferred to your local source code. [01:43] Great. With this, we would already be in for a safe landing again. [01:47] And to learn more about workspaces, visit our docs. Next up, [01:52] the position lights, so our plane is widely seen even in the darkest of skies. Start a new conversation in AI Assistance by clicking the plus icon in the top left of the panel. [02:03] - Shh. [02:04] Then use the element picker tool to look for any of the position lights. [02:08] Careful, they are small and hard to get. [02:12] Once selected, you see the updated context element in the bottom left of the AI assistance panel and can start prompting about this element. [02:20] To fix all lights, prompt "Please turn on all the position lights for me". [02:26] And just like that, after a brief conversation, they are all flashing as they should. Now, off to the last bug, which seems tricky looking at all this smoke puffing out the engine. But I'm sure with AI assistance, we'll get behind it. Again, start a new conversation and select the plane engine for context. [02:46] As the engine is a Flexbox container, the suggestions inside the AI assistance panel already relate to this layout technique. But in this case, it rather seems to be about alignment. So try with a prompt like "How can I center all engine parts on the same horizontal axis?" [03:04] - Yeah.

[03:05] AI assistance explains the layout context and proposes a solution. [03:10] This all makes sense to me, so I prompted to go ahead. And here we go! Sounds like we're ready for takeoff. Thanks for lending me a hand here. [03:21] Much appreciated. [03:22] So enter your name and click take off. Then we can fly off to the next adventure. [03:27] See you there, and if you enjoyed it, share this one with your colleagues. See you next time.