Prefer video over text? Head to the end for the video version.

Unload handlers can be immensely helpful for tasks like saving user data or cleaning up resources before a page is closed. However, it is not reliable and Chrome is deprecating gradually.

When an unload handler is present on a page, the back and forward cache (bfcache) is disabled, preventing the page from being cached and instantly loaded upon back navigation.

To accurately test the impact of unload handlers on your site, it's best to use a guest profile or incognito mode, as extensions can also inject unload handlers and other APIs that hinder bfcache usage.

For websites that don't use unload handlers, there's a powerful tool at your disposal – the permissions-policy. This HTTP response header, sent with the document response, allows you to enforce restrictions on specific web features, including unload handlers.

By setting the permissions-policy to disallow unload handlers, you effectively prevent their use on your site. This not only guarantees consistent performance by enabling bfcache, but also ensures that no extensions and 3rd-party libraries can inject unload handlers and slow down your site.

Here's a quick tip:

You can actually test this out by overriding HTTP response headers! Simply add a permissions-policy header to your site that prevents the use of unload handlers. Now, even when you try to add an unload handler in the Console, it will be blocked, confirming the effectiveness of this method.

Remember, by taking a proactive approach and leveraging the power of the permissions-policy, you can ensure a smooth and fast browsing experience for your users, free from the performance hit of unnecessary unload handlers.

Video

Prefer video over text? Head to the end for the video version.

Working with JSON data in DevTools was a bit annoying before, but it’s better now! Two paper cuts have been fixed:

1. Different types of JSON: For example, Google Search uses a special kind of JSON named JSON-LD. DevTools didn't understand it before, but now it does! You can even see it in a nice, clear format.

   

2. Format minified JSON: Sometimes, JSON is hidden inside HTML pages and looks all squished up due to the build (minified) process. Now, the Sources panel automatically makes it look neat and tidy for you.

These changes might seem small, but they'll make a big difference if you work with JSON a lot! Now you can inspect JSON data easier than before.

Video

Prefer video over text? Head to the end for the video version.

Ever encountered a small annoyance in your coding workflow, like a menu that's just out of reach or a button that requires one too many clicks? That's what we call a paper cut bug—a seemingly minor usability issue that can surprisingly sting and disrupt your focus.

These tiny frustrations might seem insignificant compared to showstopping bugs, but they can add up to significant time wasted and frustration over time.

Do you have any paper cut bug that you'd love to see fixed in Chrome DevTools? Share them in the comments below and let's see if we can smooth out those rough edges!

Video

Prefer video over text? Head to the end for the video version.

Attention video and audio debuggers! Tired of digging through code to troubleshoot media issues? Say hello to the Media badge, your new best friend.

Here's how to enable it:

1. Head to the Elements panel.

2. Right-click on any node and select Badge settings.

3. Check the box Media.

That's it! Now, when you inspect a video element, a nifty media badge pops up next to it.

Click the badge to unlock the power of the Media panel. This dedicated space lets you dive deeper into playback details, analyze buffer states, and even control playback right from DevTools!

Want to level up your media debugging skills? Check out this link for more information: goo.gle/devtools-media.

Video

Prefer video over text? Head to the end for the video version.

Scrub through animations like a pro with these two new additions to the Animations panel in Chrome DevTools:

Click to seek: No more hunting for the tiny playhead! Simply click anywhere on the timeline header to instantly jump to that point in the animation.

Name unveiler: Tired of truncated selector names? Now you can resize the name column to reveal the full name in all its glory, making it easier to identify specific animations.

These might seem like small tweaks, but they make a big difference in your animation debugging workflow. Previously, dragging the playhead and dealing with hidden names could be a bit of a hassle.

Want to learn more about the Animations panel? Check out this handy link: goo.gle/devtools-animation.

Video

Prefer video over text? Head to the end for the video version.

Think before you paste! That unfamiliar code snippet could be a trap set by hackers. Don't let them use DevTools as a gateway to your sensitive data.

Beware of self-XSS attacks: Hackers might trick you into pasting malicious scripts into DevTools, potentially stealing your bank details or causing other harm.

New warning to the rescue: When you attempt to paste code in the Sources or Console panels, DevTools now displays a clear warning for new users.

Think twice, paste once: This one-time warning prompts you to confirm your understanding of the potential risks involved. To proceed, you need to deliberately type "allow pasting."

Stay vigilant and protect yourself: By taking a moment to verify the source and purpose of the code before pasting, you can safeguard your browsing experience and keep hackers at bay.

Learn more about this topic: developer.chrome.com/blog/self-xss

Video

Prefer video over text? Head to the end for the video version.

Hooray! No more unwanted detours into the depths of node_modules during debugging. Stay focused on your code and boost your productivity!

Imagine this: You're debugging a React application and set a breakpoint to catch a button click event. With the new ignore node_modules by default feature, DevTools will instantly jump to your code, bypassing the code from all third-party libraries.

Without this feature: You might be surprised to land in the React code (or library code) first, you have to press a few more clicks to navigate to your own files. Talk about a time-waster!

Stay in control: With the new setting, you can still customize the ignore list anytime in the settings or by right-clicking on specific files and folders to ignore/unignore them.

Further exploration: Want to learn more about the ignore list settings and tweak them to your liking? Check out this link for detailed information: goo.gle/ignore-list.

Video

Prefer video over text? Head to the end for the video version.

Got private CSS source maps tucked away? You can now use them in Chrome DevTools to debug even in production environments!

Here's the scenario: You've built a web page using TypeScript and SCSS. They get compiled into JavaScript and CSS, along with two helpful source map files (e.g. a.js.map, b.css.map).

Production woes: It's common to skip deploying source maps in production for security reasons. However, this makes debugging a headache as you're stuck deciphering minified code.

The secret weapon: Now, you can right-click and manually add your source map to DevTools! This instantly transforms the messy code into its original, readable format, making CSS debugging a breeze.

Fun fact: Did you know this handy feature has been around for JavaScript for ages?

Share your thoughts: Have you used this trick to debug CSS in production? Let us know in the comments below!

Video

Prefer video over text? Head to the end for the video version.

Ever confused about which CSS style wins out when there are multiple rules? Understanding how to calculate the weight of a CSS selector is crucial for determining which style reigns supreme.

This weight, known as specificity, boils down to three key numbers: ID, class, and type. It's like a scorecard for each selector, telling us who gets to be the boss of your element's style.

Let's break down each selector.

div > a.primary:hover

Take div a.primary:hover as an example. It has a score of 0, 2, 2.

• 0 - No IDs

• 2 - Two classes - .primary and the :hover

• 2 - Two types - <div> and <a>

div > a[role=”button”]:hover

Remember, attribute selectors like [role="button"] count as classes as well! So, replacing .primary with [role="button"] doesn't change the score.

• 0 - No IDs

• 2 - Two classes - [role="button"] and the :hover

• 2 - Two types - <div> and <a>

#home-link

Now, look at #home-link. That one ID gives it a score of 1, 0, 0.

• 1 - ID - #home-link

• 0 - No classes

• 0 - No types

The rules

1. The higher the score on the left, the stronger the selector: So, even if you have lots of classes and types, an ID will always win. It's like having the royal flush in a poker game!

2. The position matters too, last one wins: Given two selectors with same scores across 3 numbers, then whichever come last wins.

Let’s put practice with a few examples.

Is the border dash, double or solid?

Given the following CSS, is the border dash, double or solid?

<style>
  #home-link { border: solid; }

  div > a.primary:hover { border: dashed; }

  div > a[role="button"]:hover { border: double; }
</style>

The border is solid because rule #1 applies - The higher the score on the left, the stronger the selector.

Is the color blue or red?

How about the following CSS? Is the hyperlink red or blue?

<style>
  div > a.primary:hover { color: red; }

  div > a[role="button"]:hover { color: blue; }
</style>

The color is blue. Both selectors have the same score 0, 2, 2. However, remember our rule #2 - The position matters too, last one wins. Since div > a[role="button"]:hover comes last, so it wins.

Do I need to calculate manually? 😱

No worries, you don’t have to. You can view the score in the Chrome DevTools Styles tab! Find out more in my previous blog post.

By the way, there are more rules if…

If you use the new CSS Cascade Layers a.k.a the @layer CSS rule. It’s something advanced. We’ll discuss that in the future, you can check out the links in the meantime.

Video

Prefer video over text? Head to the end for the video version.

Awesome news! DevTools now lets you debug C and C++ code in your WebAssembly (wasm) applications. This means you can easily explore and fix issues in your code, just like you do with JavaScript.

You need to install the WebAssembly Debugging extension. This helps DevTools understand the debugging information stored in your wasm files.

Once installed:

• You'll see your C++ source files right inside your application.

• Open them to view the code, set breakpoints (stopping points), and start debugging!

• We've also made "stepping over" code smoother so you can navigate easily.

Bonus: We've also improved how the debugger works with WebAssembly disassembly files, making your debugging experience even better!

Want to learn more? Check out this link for more information on debugging WebAssembly: goo.gle/devtools-wasm.

Video

Prefer video over text? Head to the end for the video version.

Have you ever wondered why certain styles in your web page seem to override others? Don't worry, you're not alone! Understanding how CSS determines which rules to apply can be tricky. But guess what? DevTools can help you unravel the mystery!

Let's look at the example above: We begin by inspecting a hyperlink in the DevTools Styles pane. Hovering over the <a> selector reveals its specificity score of "0, 0, 1". This score acts as a measure of how specific a selector is, determining its dominance in the battle of styles.

The 3 score represents the total of ID, CLASS, TYPE in the selected selector.

Think of it like a game: The higher the score on the left, the more likely that rule wins and decides the final color.

In our case, we see that the color pink has a higher score than yellow because it uses an ID selector (thus scores 1, 0, 0), which is a stronger type of selector.

Now, the fun part: Let's predict what happens with the following CSS, we hover over the hyperlink. Which color will the text and background turn into? We can use our knowledge of selector specificity to make an educated guess.

<style>

a { color: yellow; ｝

#home-link { color: hotpink; }

div > a.primary: hover { color: rebeccapurple; background: black; ｝

div > a[role="button"] :hover { background: blue; ｝

</style>

DevTools to the rescue! We can use DevTools to confirm our prediction. We see that the text remains pink thanks to its high specificity score. However, the background becomes blue because the two hover rules have the same score, and the last rule written in the code wins.

1. Specificity 1, 0, 0: #home-link (winning because its ID score on the left is the highest)

2. Specificity 0, 2, 2: div > a[role="button"] :hover (same score as the next one, winning because of its position, it is the last rule)

3. Specificity 0, 2, 2: div > a.primary: hover

4. Specificity 0, 0, 1: a

See? It's not so complicated after all! With DevTools by your side, you can figure out why your styles behave the way they do. You'll be able to predict how different rules interact and create amazing layouts with confidence.

So next time you're struggling with CSS, remember that DevTools is your superpower to crack the code!

Video

Subscribe now