Pixel Pirate #DevToolTips

Key Takeaways

Have you ever been on a treasure hunt, sailed a pirate ship, or cracked a secret code? If you haven't achieved those yet, or if you just fancy an adventure, join me for this interactive demo and learn how to emulate focus styles, quickly test forms with autofill, add network overrides, and use AI assistance for sources to crack codes. You can either sit back and enjoy the trip or join me by going to this link. Ready? Then let's set sail. [Music] This is our demo site with four sections in total as part of our adventure. First, we are going to select a ship, file for a permit, then finally exit the harbor, and after a long journey at sea, lift the treasure. UI elements that appear on focus and disappear on losing the same are a pretty widely used UI pattern these days. Just look at those few examples like a filter menu in Gmail, the search results on our documentation site or this popover on Google Maps. As soon as I click anywhere else outside those UI elements, they disappear which makes them difficult to debug. Our demo site also uses ephemeral UI. Let's look into it. To start our journey, we need a proper sea vehicle. So, our demo site prompts us to pick one. In this dropdown, I can choose from a lifesaver, a floating rubber island, a simple rowing boat, luxurious yak, but of course, I go for the majestic console conqueror. Selecting a vessel reveals this new input. Apparently, I need to input the registration number from the left dropdown into this input. Oh, uh, the dropdown closes as soon as I focus the input, but the number is hard to remember. Let's use focus emulation to keep the drop down open. This just makes it show nothing to see here. Clever. It seems like in this application the options are actually only rendered if the full document is focused. Fortunately, I can force document focus too using dev tools. But first, let me verify this is how it actually works. In the console panel by clicking on the I button in the top bar, I can type any valid JavaScript expression which is then live updated as I interact with the page. I want to see the page focus live evaluated. So I type document.h has focus. Now if I switch back and forth between dev tools and the page, I see the value alternating between true and false. This validates my thesis. So I go back to the elements panel to the hover menu and then enable emulate a focused page which makes the options render despite me interacting with dev tools. Now I can copy the registration number into the input and it's confirmed valid. To learn more about focus simulation for the next time you need to debug ephemeral UI elements like this, check this link. Next up, form debugging. We all try to have the customer in mind when building things, but I acknowledge that's difficult. Think about your product. Would I have any difficulties creating an account for your business? Would my German phone number be accepted? Could I enter a German billing address? If yes, awesome. Thank you. But how do you test this to make sure? As an example, take a look at some of Google's office addresses across Germany, India, and the USA. There obviously is quite a difference between the three of them. Would your system support all three equally? DevTools has tools to make testing for this easier without sourcing your own test data or disclosing your own. to continue our journey. The demo site asks me to insert contact information for someone in Mexico. I can't pull that from the top of my head. Usually, I would just now go in and type gibberish, but with so many required fields, that is quite annoying. So, DevTools autofill panel to the rescue. To open the autofill panel, I go to the three dot menu in the top right of DevTools to more tools and then select autofill. This opens the autofill panel in the bottom drawer. In the autofill panel, I can toggle show test addresses. When enabled and now focusing on any of the input fields, the familiar Chrome autofill UI is amended with an additional option, developer tools. This option allows me to fill any form I need to test with privacy safe test data for various regions. And fortunately, there also is a test data set for Mexico. How convenient, right? When selecting Mexico from the drop-down, you see both our permit form and the autofill panel populated. By hovering over various parts of the demo data, the relevant fields get highlighted for me to understand which data goes where. This makes form debugging a breeze and filing for my harbor permit too. Now I'm ready to submit the form. To learn more about the yfill panel, check out this link. And if you get a chance to try it out, let us know what you think. I have bad news. We filled the form and I submitted it. But apparently there is a missing header. That's quite a common problem especially in teams where there is a strict separation between front end and backend teams during development. They might have their own reporting chains, projects and timelines. Sometimes either team works quicker or slower which causes gaps. If you're a front-end engineer waiting on an infrastructure or backend fix, DevTools can help you out. Let's take a look back at our demo site to learn how. After submitting our autofilled form, there is a warning saying the response is missing the signature of the harbor chief. So, the back end hasn't added it. We can use a network override to fix this. Go to the network panel and look for the API request that handles the form submission. API/file permit. Once found, right click on the request and select override headers. In the right hand panel, add the required Harbor Chief signature by copying the key value pair from the warning and pasting it. After the override is added, resubmit the form to finally get your permit granted. To learn more about network overrides and when they are useful in your everyday adventures, check our docs. We have our permit. Now we just need to exit the harbor to finally get to see. Let's see how that goes. In the next section, we see a big heavy door guarding the harbor. Naively, we try clicking the start opening sequence button to open it. Uh-oh, another warning. Apparently, the door is secured by other means. The warning mentions a file called gate.mmin.js. Let's go look at set file to learn more about it. I want to find it in the sources panel. To quickly jump to the file, I open the command pallet using command P. In the pallet, I type gate.mmin.js as spelled out in the warning. Yep, there it is. I press enter to jump to the file in the sources panel. The sources panel shows every file that makes up the pages I'm currently looking at it. For example, since it's a NexJS project, you see the familiar next directory, some images, the main document, and gate.mmin.js. But looking at gate.mmin.js, there are just a bunch of nonsense methods in here that have no use, like a very silly function that does almost nothing or a cosmic ray detector simulator. With AI assistance for sources, we can quickly learn what's actually going on in this file. By either right-clicking on any file in the sources panel and then selecting Ask AI from the context menu, or by pressing the little floating button, we can start a chat with AI assistance. In the AI assistance panel, we can either choose any of the pre-selected prompts or type our own. What does this script do? Sounds like a good start, though. So click the suggested prompt and then hit enter to start a chat. AI assistance explains the door mechanism hides in this file too. By following up in the chat we get a readymade code snippet for pasting in the console. And tada after pasting the door slides open. To learn more about AI assistance for sources and other topics you can chat about in dev tools. Learn more in our docs. Great. Now we can finally embark on our journey at set sail for Treasure Island. Before we get there, let's briefly recap. First, to select our ship, we use focus simulation in the elements panel to inspect a UI that kept disappearing. Then, to file our permit, we use the autofill panel to instantly populate a form with test data and fix a backend error by creating a network override for a missing header. And to open the harbor gate, we used AI assistance to explain an unknown minified script and extract what we needed. You've used some powerful features to get this far. So, the final riddle should be a piece of cake for you. If you want to know what the treasure is, you would now need to get active. Here's the link to the adventure again. Here's a hint. Record a trace in the performance panel if you're stuck. and let us know what the treasure is in the comments below. Thanks for sailing with me and let's see where our next adventure takes us. See you next time. [Music]