 Molo! Unjani! Long time no see! I am Jessaline and it's time to share with you some exciting DevTools updates for this quarter. Let's dive into some debugging, testing, and CSS improvements. There are 3 major improvements in JavaScript debugging. We enhance the locks point marking, redesign the breakpoint UX and we improve your stack trace by allowing you to ignore irrelevant scripts. Once we open the sources panel, let's say we want to lock the value of the page URL. Instead of sprinkling a console.log statement in our code, we can right-click on the line and add a lock point. It works just like the console.log. You can even lock multiple JavaScript expressions. Once you refresh the page, the values are locked with a mark to indicate that it is the lock point. In addition, it also shows you the code location. If you click on it, it will jump directly to the code. Next, let's shift our focus to the newly redesigned breakpoint pane. Did you notice the breakpoints are grouped by file now? When you hover over a file, you can remove all breakpoints at once or you can disable them. If you would like to edit a breakpoint, just click the edit button. Later, you can also change it to other breakpoint types. Next, let's talk about stack trace. For example, when you start debugging on this translate function, you can see a lot of framework generators frames in the stack trace, which could be irrelevant to you. We can improve this by ignoring the irrelevant files in the stack trace. To do that, go to the page tree, right-clicking on any files or directories. For example, the node modules folder and add it to the ignore list. Bola! We can see a cleaner stack trace immediately. Notice those ignore files are grayed out as well. You can view the ignore list's frames by clicking on the view ignore listed option. What about testing? The recorder is on fire. Now, you can use and customize the recorder shortcuts. Discover, view, highlight and copy user flow as code and customize the selector types if you wish. Open the recording in the recorder. You will see that we added a new options to export the user flow to Papyrtil with Lighthouse. This will make performance analysis easier for you. Click on get extensions to explore and install some useful extensions like I did. Here is one cool thing about the extension. You can view the code directly in the recorder. For example, if you select night watch option and hover over on each step, you can highlight the relevant code. To make it easier to record and replay, we added keyboard shortcuts. For example, to copy the script of a step, you can use the command C shortcut. Quite handy, isn't it? Let us know in the comment below. In addition, we added a new pure selector that can work better with Shadow DOM elements. However, you know your user flow better. So, some of these selectors might be irrelevant to you. At the start of your recording, you can choose the selectors you need. In this case, DevTools will only capture CSS selector according to your choice. Next, let's move on to new CSS improvement in DevTools. We added CSS documentation, support and HD color debugging. If you want to find out more about this CSS property, you can hover over it to get a quick overview of its function or click on the link to learn more about the syntax. Apart from that, Chrome now supports HD color. As an example, Lab is a new syntax to define HD color. Open the color picker. A gamut boundary line has been added. We're drawing a line between sRGB and DisplayP3 gamut, making it clear which gamut the selected color is within. To learn more about color, check out the High Definition CSS Color Guide by Adam. One of my favourite CSS preprocessor features is now built into CSS, the nesting styles rules. Without the nesting support, we need to declare every selector and separate them from one another. With nesting selectors, these declarations can be continued and the related styles rules can be grouped within. Currently, you can view nested styles in the styles pane. However, tracing the nesting and its full selector context is not yet supported. Stay tuned for better support in the coming release. Time for a bonus tip. Navigate your performance timeline using the WASD shortcut just like a gamer. In the performance trace, use the W and S key to zoom in and out. Then, use the A and D key to move back and forward. It is quite useful, isn't it? Apart from that, it is worth mentioning that we fixed the start profile and reload experience. The panel now navigate to a blank page first so you can see that the recording begins with a blank trace. That's all for now. Don't forget to check out my blog post for more information. Click on the link below. Thanks for watching. See you next quarter or in my latest Dev2Tips video. Ciao!