Chrome 74 - What’s New in DevTools

Key Takeaways

[Music] howdy here's what's new in dev tools in chrome 74 first up dev tools now highlights all nodes affected by a CSS property here I've got dev tools open alongside the dev tools home page I want to view the styles for this paragraph so I click inspect and then I click the paragraph when I hover over margin I see orange boxes before and after each paragraph note this means that the margin property I'm hovering over applies to all these nodes when I change padding to 10 pixels and then hover over that I see green boxes around the nodes the oddest panel has a new tap targets audit as well as a new badging system for the PWA audits the new tap targets audit checks that interactive nodes like buttons and links are usable for mobile users for example if a button and a link are too small and too close together a mobile user may tap the link by mistake when they actually meant to tap the button in this report the audits panel is saying that the file a bug link is overlapping the view source link to simulate mobile and see this problem myself I'll click toggle device toolbar and pick an arbitrary mobile device say pickle - when I scroll to the bottom I see the file a bug linked with the view source link right below it so it makes sense that these tap targets might be too close on mobile in general to pass the audit I need to make sure that the targets are at least 48 pixels tall and 48 pixels wide with 8 pixels of space between targets moving on to the PWA category when you pass a section such as fast and reliable you get a badge and if you pass all three sections you get a check mark for the PWA category at large you can now view binary WebSocket messages from the network panel to view WebSocket messages go to the network panel click the row that represents a WebSocket connection then open the messages tab a binary message from the browser to the server has a green up arrow next to it and a binary message from the server to the browser has a red down arrow next to it click a binary message to view its content in the section below the table click the format list to convert from the default hex to base64 or utf-8 and click copy to copy the message content to your clipboard the command menu now has a command for capturing area screenshots press ctrl shift P or command shift P on Mac to open the command menu start typing area then press ENTER to run the command drag your mouse over the section of the viewport that you want a screenshot then release your mouse to capture the screenshot you can now filter the network lock to only show requests that a service worker caused or intercepted type his service worker initiated to view requests that were caused by a service worker or type is service worker intercepted to view requests that matched a service worker route these performance panel now marks up long tasks and first paint here I've got a recording of the page load performance of Google Maps tasks are now shown at the top of the main thread flame chart long tasks have a red triangle in their top right corner in the timing section the new first paint marker is shown here's a bonus tip on a lesser known feature that's been in dev tools for a long time by default the Styles pane shows hex color codes to view RGB or HSL hold shift then click the color box that's all for Chrome 74 leave me questions and feedback in the comments otherwise I'll see you in six weeks for Chrome 75 [Music] you [Music]