What’s new in DevTools: Chrome 121-123

Key Takeaways

[Music] V the ran I am jeline let's dive into what's new inep tools Chrome one 121 one 122 and one 123 first up debugging elements that disappear when you try to inspect them can be difficult here is a simple trick you can enable the emulate the focus page setting in the Styles tab let's say you need to debug the dynamic YouTube search dropdown the moment you try to right click and inspect it it is gone to understand why let's observe the document. has Focus State the value is true when your cursor is on the page however the value becomes false when you move the cursor to Def tools because def tools is not part of the page it is common to show and hide based on the documents Focus State enabling the emulate the focus page setting in the Styles tab with will always keep the document Focus State as true even when you move your cursor to Def tools woohoo this time you can inspect the drop down successfully remember this is a global setting so you only need to enable it once previously this setting was temporary and it is hidden under the less known rendering panel great news for web performance Fox there are three ux enhancements in the performance panel let let's start with the handy breake crumbs here is a performance Trace previously selecting a data range on the timeline could be confusing because the timeline itself wouldn't match the selected range now you can truly zoom into the selected range aligning the timeline with your data for clearer analysis the ability to zoom in on Data ranges goes even further you can zoom multiple times diving deeper into space fix sections of your performance data and jump between them with the break crumbs this allows for a more granular understanding of performance issues whiskers are new additions to the interactions track in the performance panel designed to improve your imp debugging experience imp is a c web writer metric that measures your website responsiveness to user interactions it tracks the time between the user interaction like clicking a button and the next pan updated on the screen for example this whisker at the front shows a slight input delay between the button click action and when the browser handles the click event this whisker at the back shows a longer presentation delay between the click event and the next UI update reflecting the interactions effect this visus provide visual cues for you to see the end to endend inp timing for an interaction the main track in the performance panel now comes with new connecting arrows these arrows clearly show how events lead to one another making it easier to understand the flow of your performance timeline for example this recalculate Styles event is initiated by schedule style recalculation sometimes the connecting arrows stretch across very long distances making it hard to see no worries clicking the initiator link in the summary tab will conveniently jump you to the corresponding event these are the few common events where you will see the connecting arrows next we have four improvements in the sources panel setting lock points just got easier lock points are like console dolog statements but they don't pollute your code now instead of right clicking simply hold command shift and click a line number to set a lock point this is especially valuable when debugging production code by the way the enable and disable all breakpoints context menu is back in the breakpoint section these handy options allow you to quickly Target all break points across your file saving you time and effort another tiny update did you notice the indentation marker is now on by default this works seamlessly along with Cod folding making it easier to follow the structure of your Cod debugging me minifi code just got easier Dev tools now supports evaluating Source variables directly previously you could only use the minified variables which could be cryptic and hinder understanding for example your typescript code defines two variables named coffee and price during the build process these names get minified to n and O let's set a breakpoint and start debugging now you can direct evaluate coffee in the console and get the correct value previously the console would throw an error even better you can still evaluate the minified variable n you should get the correct value as well the same applies to other def to features like lock points and life Expressions here is a bonus tip did you know there are multiple ways to copy a URL in the network panel in the network panel right click on any request and select copy there are options to copy just one or all urls as C URL Powershell and fetch the copy command is now in your clipboard ready to be pasted edited and run in your desired environment what other copy functions would you like to see do you need a copy as python script option leave your feedback and suggestions in the comments below all right that's all for today head over to our blog and explore all for the latest updates thanks for watching see you soon [Music] ciao