Chrome 77 - What’s New in DevTools

Key Takeaways

[Music] chrome 77 approaches here's what's new in dev tools first up you can now copy an element CSS Styles I like the styles on this link element and want to copy them first I right-click and select inspect to highlight the link in the Dom tree actually I want to make the font italic first now I'll right-click the element and select copy copy Styles and when I paste to the clipboard I can see the element styles including my font-style:italic declaration when you're reading an article in the content jumps around that's called layout shifting it usually happens because ads and images have finished loading and the page didn't reserve space for them you can now visualize layout shifts from the rendering tab however a word of warning this feature can cause your screen to flash a lot so if you're prone to photosensitive epilepsy you might want to look away to visualize layout shifts first press ctrl shift P or command shift P to open the command menu type rendering run the show rendering command and then enable the layout shift regions checkbox now as you load or interact with pages layout shifts are highlighted blue the audits panel has a couple new audits and a new metric as always if you want to find ways to improve page quality go to the audits panel then click run audits and after 10 seconds or so the oddest panel gives you a report on how to improve the estimated input latency metric in the performance section has been replaced with a new metric called maximum potential first input delay the old metric did not factor into your performance core and the new one doesn't either the new keep request counts and file sizes low audit reports the total number of network requests and the size of each request and down in the PWA section the new Apple touch icon audit checks that your PWA can be added to an iOS homescreen dev tools now automatically syncs its theme with your OS team right now my OS is in its dark theme when I opened up tools it's also in dark theme when I set my OS to its light theme and then close and reopen dev tools dev tools is also in its liking by the way dark theme isn't new we've had it for a long time to manually enable it press ctrl shift P or command shift P to open the command menu type dark then run the enable dark theme command for light theme run the enable light theme command if you create conditional breakpoints or lock points a lot there's a new keyboard shortcut for opening the breakpoint editor while my cursor is in the editor I can press ctrl alt B or command option B on Mac to open the breakpoint editor to choose my break point type I can press shift tab to select the menu then space to open the menu then I can select either break point or conditional breakpoint or log point if you're not sure how to use conditional breakpoints or lock points check out the links in the description for more information prefetch links give you the chance to download resources before the needed in order to speed up subsequent page loads the network panel now indicates whether a resource came from the prefetch cache on this page i'm prefetching an HTML file and a CSS file in the network panel you can see that the resources were downloaded even though they're not actually needed for the page I'm currently on when I navigate to page 2 the size column tells me that the resources came from the prefetch cache check out our resource prioritization guide to learn more about prefetch the console now shows private class fields in this older version of Chrome I'm defining a class called cat with a public field called name and a private field called color when I inspect the object I can't see the private field in chroma 77 after I define the same class and inspect the object I can see the private field as expected the background services section now supports push messages and notifications a push message is when a server sends information to a service worker and a notification is when a service worker shows information to a user to record notifications go to the application panel then go to the notifications pane then click record now when I send a notification I see it log to the table I can click the notification to view more information about it however considering that this is a background service it wouldn't be that helpful if it only worked when dev tools was open so dev tools logs notifications and pushed messages for three days even when dev tools is closed for example first I'll close dev tools then changed the title and message to closed then send the message to reopen dev tools I'll press ctrl shift I or command option I which is the shortcut for reopening the last panel I was using in this case the application panel and here you can see that the second message was logged here's a bonus tip about a lesser-known dev tools feature the Dom tree search UI to open the Dom trees search UI focus the Dom tree then press ctrl F or command F on Mac you can search by strings like dev tools or CSS selectors like input type equals hidden or even XPath queries thanks for watching we'll be back in six weeks for chrome 78 [Music]