Chrome DevTools: From friction to flow

Summary

In this engaging video, Jecelin Yee explores 12 new features in Chrome DevTools designed to streamline web development and debugging. From mocking API responses and debugging disappearing elements to enhancing CSS and performance insights, the tools aim to ease the developer's workflow. With improved UI testing, better code navigation, and AI-generated error explanations, DevTools continues to innovate, making web development more efficient and less daunting.

Takeaways

• 🛠️ The Chrome DevTools team has addressed common frustrations in web development by introducing a series of improvements aimed at smoothing the workflow.
• 🔍 They have covered 12 improvements designed to simplify UI testing, enhance understanding, maintain focus, and identify performance optimization opportunities.
• 📈 The improvements include the ability to mock API responses and debug 404 errors, which can be particularly useful when backend APIs are still under development.
• 🖌️ CSS debugging has been made easier with new features like the 'Emulate a focused page' checkbox to address disappearing elements and an editor for adjusting linear transitions.
• 📄 DevTools now automatically pretty-prints minified code, providing better code folding and indentation markers for easier navigation through the code structure.
• 🌐 Enhanced syntax highlighting for various content types, including JSX, Angular, Vue, and different JSON subtypes, has been added to improve code readability.
• 🔗 Hovering over CSS properties now shows documentation and a 'Learn more' link, aiding in understanding unfamiliar properties and their effects.
• 🛑 The 'info' icon next to CSS rules provides insights into why certain rules may not have the expected UI effect, saving time during debugging.
• 🚫 DevTools has introduced options to hide source map warnings, network requests from extensions, and content scripts, reducing noise and improving focus on relevant issues.
• 🔄 The performance panel has been updated with features like precise zooming and the ability to edit and hide specific data tracks for a clearer overview of performance data.
• 👀 New detective arrows in the performance panel help trace the trail of events back to their source, providing a clearer picture of how issues unfold.
• 🚀 The DevTools team is actively working on further enhancements, with a focus on four major areas to improve the debugging experience even more in the future.

Q & A

What is the main theme of the video presented by Jecelyn Yeen?

The main theme of the video is to introduce and demonstrate 12 new improvements in Chrome DevTools aimed at making UI testing easier, boosting understanding, maintaining focus, and identifying performance optimization opportunities.

What metaphor does Jecelyn use to compare web development to real life?

Jecelyn compares web development to riding a bike and encountering unexpected bumps, likening the debugging process to these bumps that slow us down and test our patience.

What common frustrations did the Chrome DevTools team identify from user feedback?

The Chrome DevTools team identified four common frustrations: difficulty in debugging, feeling lost in data, troubleshooting disappearing elements, and handling performance issues.

How does the new 'Overwrite Content' feature help in the debugging process?

The 'Overwrite Content' feature allows developers to mock API responses by right-clicking on the API, selecting 'Overwrite Content,' pasting in mock data, and saving it. This unblocks the development process when the backend is not ready.

What new CSS debugging tool is introduced in the video?

The video introduces the 'Emulate a focused page' checkbox in DevTools, which helps in debugging disappearing elements by emulating a focused state, making it easier to inspect elements that disappear on hover or focus.

What improvement has been made to the handling of minified code in DevTools?

DevTools now automatically pretty prints minified code, saving developers time and making it easier to navigate and understand the code structure with features like code folding and indentation markers.

How does DevTools assist with learning and understanding CSS properties?

DevTools shows documentation when hovering over CSS properties with a 'Learn more' link, providing code examples and explanations. It also highlights issues with CSS rules that are syntactically correct but do not work due to other constraints.

What feature helps developers understand HTTP status codes and headers more easily?

The network panel in DevTools now shows friendly tooltips for HTTP status codes and headers, helping developers quickly understand their meanings and implications.

What new option does DevTools provide for managing network requests from extensions?

DevTools now includes an option to hide network requests from Chrome extensions, reducing noise in the network panel and making it easier to focus on relevant requests.

How does DevTools improve the debugging of performance issues?

DevTools has revamped the performance panel to align the zoom timeline with data, allowing precise zooming and navigation. It also includes features to collapse and hide tracks and entries, helping developers focus on relevant performance data.

What experimental feature is being tested to help with understanding console errors?

DevTools is testing an AI-generated feature that provides personalized explanations and potential solutions for console errors, helping developers understand and fix issues more efficiently.

How has the handling of third-party scripts been improved in DevTools?

DevTools now ignores content scripts from extensions and scripts in the node modules folder by default, preventing them from appearing in the stack trace and during breakpoint debugging, allowing developers to focus on their own code.

What enhancements have been made to the display of CSS specificity?

DevTools now shows the specificity of CSS selectors, which helps developers understand the weight and ranking of their CSS rules, making it easier to debug and apply styles correctly.

What are the four major focuses for DevTools' performance tooling in the future?

The four major focuses for DevTools' performance tooling are improving the performance panel foundation, making data tracks more manageable, enhancing zoom functionality, and providing more precise and helpful performance data.

Outlines

00:00

🛠️ Chrome DevTools Improvements Overview

Jecelyn Yee introduces a series of improvements to Chrome DevTools aimed at enhancing web developers' debugging experience. She highlights 12 updates designed to simplify UI testing, improve understanding, maintain focus, and identify performance optimization opportunities. The script includes a practical demonstration of debugging a 404 error, mocking API responses, and using new features like 'Emulate a focused page' to address disappearing elements. It also touches on the ease of adjusting CSS transitions and the automatic pretty-printing of minified code, which collectively aim to streamline the workflow of web developers.

05:02

📚 Enhancing Learning and Debugging with DevTools

This section delves into the educational aspect of DevTools, showcasing how it assists developers in understanding complex CSS properties and debugging issues. New features include on-hover documentation and 'Learn more' links for CSS properties, which provide additional insights and examples. The script also addresses common CSS pitfalls and how the info icon next to rules can offer clarity on why certain styles aren't applied. Furthermore, it introduces a new personalized explanation feature in the console that uses AI to generate potential solutions for errors, exemplified by dealing with a CORS policy issue.

10:05

🎯 Focusing on Debugging with Improved DevTools Features

The script discusses updates that help developers focus on their debugging tasks by filtering out unnecessary information. It covers the removal of source map warnings, the option to hide network requests from extensions, and the new ability to ignore content scripts and third-party libraries in the debugger. These features aim to declutter the development environment, allowing for a more efficient identification of the root causes of issues and an improvement in site performance. The paragraph also previews the revamped performance panel with its new UI features that facilitate a more precise and organized approach to debugging performance issues.

15:06

🚀 Upcoming Enhancements and Community Engagement

The final paragraph outlines the DevTools team's vision for the future, emphasizing four major focuses that will drive their improvements in the coming year and beyond. It invites viewers to share their favorite new features and to explore them in more detail through provided links. The script also encourages users to stay informed about updates through various channels and to submit bug reports or feature requests to further enhance the debugging experience. It concludes with well-wishes for the viewers' web development journey and a sign-off until the next meeting.

Keywords

💡Web Development

Web development is the process of creating websites and web applications. It involves a range of tasks including designing, coding, and publishing. In the video, web development is likened to a bumpy bike ride, with 'ouch moments' representing the unexpected challenges developers face, such as debugging issues, which are central to the video's theme of overcoming obstacles in the development process.

💡Debugging

Debugging refers to the process of finding and resolving bugs or defects that prevent correct operation of computer programs. In the script, debugging is a core theme, with the speaker discussing various tools and techniques within Chrome DevTools to ease the debugging process, such as mocking data and inspecting disappearing elements.

💡Chrome DevTools

Chrome DevTools is a set of web authoring and debugging tools built directly into the Google Chrome browser. The video focuses on improvements made to these tools to enhance developers' workflow. For instance, the script mentions the ability to overwrite API responses and emulate focused page states, showcasing the utility of DevTools in debugging and development.

💡Mock Data

Mock data is fictional data used to simulate real data during development and testing. The script describes a scenario where the backend API is still under development, and the speaker uses mock data to unblock the development process, illustrating a common use of mock data to facilitate front-end development before the back-end is ready.

💡CSS

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. The video discusses CSS as a tricky aspect of web development, with the speaker mentioning the difficulty of keeping up with various CSS properties and how DevTools helps in understanding and debugging CSS issues, such as alignment problems with names and images.

💡Performance Optimization

Performance optimization involves improving the speed, efficiency, and usability of a website or application. The video touches on this concept by discussing the use of DevTools to identify performance issues and optimize them. The script mentions the performance panel and how it has been updated to make it easier to navigate and understand the data, aiding in performance debugging.

💡Source Maps

Source maps are files that map from a minified or compiled file back to its original source. In the script, the speaker discusses improvements in DevTools related to source maps, such as the ability to hide source map warnings, which can clutter the console and distract from real errors, thus enhancing the debugging experience.

💡Breakpoints

A breakpoint in a debugger is a point at which the execution of a program is paused, allowing the developer to examine the state of the program. The video script mentions the use of breakpoints and how DevTools has improved the experience by allowing the evaluation of source variables, making it easier to understand the current value of a variable during debugging.

💡AI-Generated Explanations

AI-generated explanations refer to the use of artificial intelligence to create understandable descriptions and potential solutions for errors or issues. The script highlights a feature in DevTools that uses AI to provide personalized explanations for console errors, offering clarity and aiding in the debugging process, as demonstrated when the speaker encounters a CORS policy issue.

💡Syntax Highlighting

Syntax highlighting is a feature of text editors that displays text, especially source code, in different colors and fonts depending on the category of terms. The video mentions that DevTools has improved syntax highlighting for various content types, which helps developers navigate and understand code more efficiently, particularly when inspecting different types of files.

💡UI Testing

UI testing is the process of verifying that a software application's user interface operates as intended. The script discusses improvements made in DevTools to make UI testing easier, such as the ability to emulate a focused page to debug disappearing elements, which is crucial for ensuring that the user interface behaves correctly across different scenarios.

Highlights

Introduction to the new improvements in Chrome DevTools aimed at easing web development frustrations.

Overview of 12 improvements designed to simplify UI testing, enhance understanding, maintain focus, and identify performance optimization opportunities.

Explanation of how to mock data to unblock development when backend APIs are still under development.

Demonstration of the new 'Emulate a focused page' feature for debugging disappearing elements.

Introduction of the modern CSS linear easing function for smoother transitions.

Automatic pretty-printing of minified code in DevTools to ease code exploration.

Enhanced syntax highlighting for various content types including JSX, Angular, Vue, and JSON subtypes.

New feature to show documentation and 'Learn more' links when hovering over CSS properties.

Use of the info icon to understand why certain CSS rules do not produce UI effects.

Explanation of CSS selector specificity and its impact on styling.

Personalized error explanations and potential solutions generated by AI in the console.

Ability to evaluate variables with source names in minified code for easier debugging.

New UI features in the performance panel for more precise zooming and navigation.

Customization options for the performance panel to focus on relevant data tracks.

Introduction of new arrows in the performance panel to trace event sources and their flow.

Plans for further enhancements in performance tooling with a focus on four major areas.

Encouragement for users to provide feedback and feature requests to improve the debugging experience.

Conclusion and sign-off, wishing developers a smooth web development and debugging journey.

Transcripts

[MUSIC PLAYING]

JECELYN YEEN: Phew, I made it.

What a beautiful, sunny day, even though my bike right

here was a bit bumpy?

I almost fell from the bike and had

to carry it over a fallen tree.

Talk about ouch moments, but, hey,

isn't that just like web development?

Those unexpected bumps while debugging are the ouch moments

that slow us down and test our patience,

but guess what last year, the Chrome DevTools team identified

four of these common frustrations,

from why can't I debug that till I'm feeling lost in data?

We took a deep dive, analyze your feedback,

and roll out a series of improvements

to smoothen your workflow.

I will be covering 12 improvements today, each of them

is designed to make UI testing easier,

boost your understanding, help you stay focused,

and identify performance optimization opportunities.

Feel free to fast-forward to the chapter that interests you.

And just a hint, the top row is my favorite one.

There are game changers.

All right.

Enough talk.

It's time to explore them in action, one by one.

Let's kick things off with the made easy team and bubble tea.

Mhm, bubble tea is tasty.

Let's head over to our site and search for the one with bubble.

Uh-oh, there's no result returned.

Let's open DevTools and debug that.

Look here.

The response is 404.

All right.

Now I remember.

The backend team is still working on the API.

That's why it's 404.

Since we agree on a common response structure,

let's mock the data to unblock us.

Right-click on the API and select Overwrite Content.

With that, paste in your mock data and save it.

Let's try to search again to see if it works.

Cool.

That's my favorite list of tea.

Quick tip here, you can mock the response headers too.

For example, you can add a new header

to test the permissions policy or edit an existing content

security policy to test out different security mitigation.

Look closer at the list.

There is something wrong with the name and the image here.

They are not aligned.

We should fix the CSS.

Let's right-click to inspect that.

Oops, the list just disappeared.

Huh, maybe it's the hover effect.

Let's toggle that in the Styles tab and test again.

Nope, it still doesn't show.

Hmm, what should I try next?

Oh, there is a new Emulate a focused page checkbox here.

What is that for?

Oh, the two teams mentioned commonly used

for debugging disappearing elements.

That's it.

Let's enable that and inspect the list again.

Now it works.

Time to try out some CSS and fix that once and for all.

Another quick tip here, adjusting linear transition

is much easier than before.

Modern CSS supports linear easing function.

It accepts a number of stops separated by commas.

Manually adding numbers is cumbersome.

You can open the editor, add multiple stops,

drag them around, and test the transition on the fly.

As a developer, we spend a large amount

of time looking at the code.

That's why having some good default

settings to help us explore the code would be great.

I appreciate that the DevTools now pretty prints minified code

automatically.

This saved me a lot of clicks, especially when I'm

debugging production code.

The combination of code folding and indentation markers

make it easier to expand or collapse code sections

and navigate the code structure.

Over the past year, DevTools also

added better syntax highlights for a lot more content types,

like JSX, angular, vue, different json subtypes,

and more.

This seemingly subtle settings are the unsung heroes

of our workflow quietly improving

our lives with each and every line of inspected code.

Mocking responses, inspecting disappearing dropdowns,

fixing animations, diving in your code,

DevTools empowers every step of your UI debugging journey

with ease speed and efficiency.

Next, let me show you how DevTools helps us understand.

There is so much to learn in web development.

Not only do we need to learn different syntax and rules,

we need to understand the relationship

and why our program throws errors.

CSS is a tricky one.

There are tons of old and new CSS properties.

Not sure about you, but I certainly can't keep up

and can't memorize all of them.

Like this one, what is scroll timeline,

user select, margin block, doesn't ring a bell,

but I would love to learn more.

DevTools now shows documentation when

we hover over the property with a Learn more link.

We can click to explore further and view code examples.

More often than not, I am also struggling

to understand why certain CSS rules are totally valid,

syntax is correct, but they just don't work.

The info icon next to the rules is very helpful.

In this example, although the bottom is a correct property,

it won't have any UI effect because its position is static.

This alone saved me so much time to debug,

especially when I have complex CSS.

Here is another common one for me.

The height property doesn't work with inline elements like span.

I can go on and on about the different rules that bites me.

A quick tip here.

Can you guess the final background color?

Well, although it's fun to guess,

we can use the Styles tab to understand the winning color

and hover over the selector to understand

its specificity, which is the algorithm used

by browsers to rank CSS selectors by giving them

a certain weight in three digits.

Let's go back to our bubble tea page.

This time, the backend API is ready,

so we don't need to mock the response anymore.

Let's verify that.

Oh, it's not working.

Looking at the console, the URL seems

to be blocked by the course policy.

What is that and how can I fix it?

The natural next step for me is to Google it to find the answer,

but wait.

There's a new icon here.

Maybe that could help us.

Let's try it out.

Look at that.

It generates a personalized explanation,

a potential solution, and even provide an option to search.

That's pretty cool.

Back to the console, you can see the data DevTools

used to understand the message.

In fact, DevTools show you that right at the beginning,

giving you full clarity.

Let's scroll up to the explanation.

Now I know the error has something

to do with the network response header

and that needs to be fixed on the server.

Let me take a screenshot and report that

to our backend engineer.

Huh, while waiting for the fix, I

can combine the knowledge I learned earlier

to mock just the response headers temporarily.

Let's copy the code snippet, look for the URL,

and overwrite our response header.

Refresh the page and the error is gone.

By the way, you can use that to understand the warning too.

Just a heads up, this feature is still experimental

and only available in some regions for now.

As you might guess, these helpful explanations

are actually generated with AI.

So did the explanation make sense

or did it just leave you scratching your head?

Show us your thumb and let us know what you think.

We are excited to keep exploring how AI can make debugging easier

right in DevTools.

Back to our code, when you are debugging with breakpoints,

sometimes you might want to understand the current value

of a variable.

It was hard previously if you have minified code.

You need to understand the minified name of the variable

in order to evaluate that.

Using the source variable would throw an error.

That was improved, you can evaluate with source variables

now.

Another quick tip to help me understand,

if you find it hard to memorize the HTTP status code,

the network panel now shows a friendly tooltip for that.

The same applies to the Headers tab.

Let's take a quick break.

Grab your drinks and let's relax for a second.

Remember, fixing bugs isn't just about seeing tons of stuff.

It is also about clearing away distractions and stay focused.

That's what brings us to the next theme.

Here is another improvement on source maps.

This time, instead of using them,

we want to hide them instead.

I mean, probably you have seen this warning before,

especially if you installed a lot of extensions.

Many web applications don't deploy source maps

to production.

Therefore, DevTools can't load them.

The thing is you can't fix the missing maps,

and they just add noise, making it harder

to spot real console errors.

This source map warnings are gone now.

Don't worry.

You can still find them in the developer resources panel.

And if you open a file with source map issues,

a warning will appear too.

Another annoyance for folks with a lot of extensions

is on the network panel.

These extensions make network requests

and thus show up in the network panel.

We receive repeated requests to hide them from the list.

That makes sense, and you should be able to do that.

Turn on this option and DevTools will hide all the URLs, starting

with Chrome extensions.

Another pet peeve on third-party extensions,

when doing breakpoint debugging, DevTools previously

would step into the content scripts injected by extensions,

which is not what I want.

I just want to debug and step into my own code.

Same goes for the third-party libraries in the node modules.

For example, I don't want to debug the code

from react, angular, nor the material UI component library.

I don't want to see them in the stack trace

either, as it makes it hard for me to pinpoint issues.

Here is the good news.

DevTools now ignore content scripts by default,

as well as the scripts in the node modules folder.

With that, DevTools hides them in the stack trace,

and you won't be stepping into those files anymore.

Look here.

DevTools grayed out the ignore files too.

In case you still want them, you can right click to ignore them.

With more stuff hidden and ignored,

we have a better chance to identify

the root cause and spend time improving

the site's performance.

That's what we are going to talk about next.

This is how I feel every time I need

to debug performance issues.

The performance panel is packed with a lot of wonderful data,

but let's be honest.

Diving deep into page load and runtime issues

can feel like navigating a jungle.

We know that DevTools team is at work this year

revamping the panel's foundation and preparing

for some awesome updates.

And the good news, some new UI features

are already here to make our life slightly easier.

If you ever zoom in on the timeline

and feel like you were lost in space, you are not alone.

It used to be confusing because the zoom timeline and the data

is not aligned.

It would be cool to really zoom in

on just the part we care about.

Well, your wish is granted.

Now you can zoom in with precision, diving

deeper and deeper without losing your way.

Jump back to parents levels with a single click,

always knowing that the timeline and data are perfectly in sync.

That's great, but check out all these data tracks.

I'm losing count.

Even a simple web page can have at least eight tracks.

Depending on what you are debugging,

you might not need the whole orchestra.

Maybe you just want to focus on the violin solo

or crank out the drums.

Let's do that.

Click on the Edit button.

You can reshuffle the track like a master conductor.

Move them up, move them down, or even remove them completely

if they are just creating noise.

Awesome.

You have narrowed it down to just the main track,

but wait, those entries still look pretty crowded, right?

If you know what you are hunting for,

you can collapse and hide entries you don't need.

Here are the different hides options.

You can use shortcuts to hide things quicker too.

Here, I'm going to press C to hide all the children,

R to collapse the repeated entries,

# and # to remove a couple of functions.

See that.

Now the entries that need attention

are right in front of our face.

No need to constantly scroll up and down to find them.

Did you spot those arrows right there?

Yup, these are new too.

They are like little detectives helping

you to follow the trail of events

all the way back to the source.

Now you can see exactly where things started

and how they unfolded.

And this is just the start.

We have grand plans for performance tooling,

with four major focuses fueling our vision this year and beyond.

So stay tuned.

You can be sure there are more exciting innovations coming

your way.

There are a lot of improvements we have covered.

Tell us which one you like the most in the comments below.

Check out the links of each feature in the video description

to dive into them further.

In fact, there are even more enhancements

we landed last year to improve your debugging experience.

It is definitely not possible to cover all of them

in this session.

The best way to stay up to date with these improvements

are through our social media, RFC, blog, and YouTube channel.

Remember to send us a bug report or a feature request

if you wish us to fix them or improving your debugging

experience even further.

That's all for now.

I wish you a smooth ride in your web development and debugging

journey.

I got to go.

See you soon.

Ciao.

[MUSIC PLAYING]