Chrome DevTools: From friction to flow
Summary
TLDRIn 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
🛠️ 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.
📚 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.
🎯 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.
🚀 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.
Mindmap
Keywords
💡Web Development
💡Debugging
💡Chrome DevTools
💡Mock Data
💡CSS
💡Performance Optimization
💡Source Maps
💡Breakpoints
💡AI-Generated Explanations
💡Syntax Highlighting
💡UI Testing
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]
5.0 / 5 (0 votes)