Chrome 77 – What’s New in DevTools

Chrome 77 approaches. Here’s what’s new in DevTools. First up, you can now copy
an element’s CSS styles. I like the styles on this link
element and want to copy them. First, I right click
and select Inspect to highlight the
link in the DOM tree. Actually, I want to make
the font italic first. Now I’ll right click the element
and select Copy, Copy Styles. And when I paste
to the Clipboard, I can see the element styles,
including my font style, italic declaration. When you’re reading an article
and the content jumps around, that’s called layout shifting. It usually happens
because ads and images have finished
loading, and the page didn’t reserve space for them. You can now visualize layout
shifts from the rendering tab. However, a word of
warning, this feature can cause your screen
to flash a lot. So if you’re prone to
photosensitive epilepsy, you might want to look away. To visualize layout shifts,
first press Control-Shift-P or Command-Shift-P to
open the Command menu. Type Rendering. Run the Show Rendering command. And then enable the Layout
Shift Regions checkbox. Now, as you load or
interact with pages, layout shifts are
highlighted blue. The Audits panel has a couple
new audits and a new metric. As always, if you want to find
ways to improve page quality, go to the Audits Panel,
then click Run Audits. And after 10 seconds
or so, the Audits Panel gives you a report
on how to improve. The estimated input latency
metric in the Performance section has been replaced with
a new metric called Maximum Potential First Input Delay. The old metric did not factor
into your performance score. And the new one doesn’t either. The new keep request
counts and file sizes low audit reports
the total number of network requests and the
size of each request. And down in the PWA section,
the new Apple Touch icon audit checks that your PWA can be
added to an iOS home screen. DevTools now automatically syncs
its theme with your OS theme. Right now, my OS is
in its dark theme. When I open DevTools,
it’s also in dark theme. When I set my OS
to its light theme and then close and
reopen DevTools, DevTools is also
in its light theme. By the way, dark
theme isn’t new. We’ve had it for a long time. To manually enable it,
press Control-Shift-P or Command-Shift-P to
open the Command menu. Type dark. Then run the Enable
Dark Theme command. For light theme, run the
Enable Light Theme command. If you create conditional
breakpoints or log points a lot, there’s a new
keyboard shortcut for opening the
breakpoint editor. While my cursor
is in the editor, I can press Control-Alt-B
or Command-Option-B on Mac to open the
breakpoint editor. To choose my
breakpoint type, I can press Shift-Tab to
select the menu, then Space to open the menu. Then I can select either
Breakpoint or Conditional breakpoint or Logpoint. If you’re not sure how to
use Conditional breakpoints or Logpoints,
check out the links in the description
for more information. Prefetch links
give you the chance to download resources
before they’re needed in order to speed
up subsequent page loads. The network panel now
indicates whether a resource came from the prefetch cache. On this page, I’m prefetching
an HTML file and a CSS file. In the network
panel, you can see that the resources were
downloaded even though they’re not actually needed for
the page I’m currently on. When I navigate to
page 2, the size column tells me that the resources
came from the prefetch cache. Check out our Resource
Prioritization guide to learn more about prefetch. The console now shows
private class fields. In this older version
of Chrome, I’m defining a class called
Cat with a public field called name and a private
field called color. When I inspect the object, I
can’t see the private field. In Chrome 77, after I
define the same class and inspect the
object, I can see the private field as expected. The background
services section now supports push messages
and notifications. A push message is when a
server sends information to a service worker. And a notification is
when a service worker shows information to a user. To record notifications, go
to the Application panel, then go to the
Notifications pane. Then click Record. Now, when I send a notification,
I see it logged to the table. I can click the notification to
view more information about it. However, considering that
this is a background service, it wouldn’t be that
helpful if it only worked when DevTools was open. So DevTools logs notifications
and push messages for three days, even
when DevTools is closed. For example, first,
I’ll close DevTools, then change the title
and message to closed, then send the message. To reopen DevTools, I’ll
press Control-Shift-I or Command-Option-I, which
is the shortcut for reopening the last panel I was using– in this case, the
Application panel. And here, you can see that
the second message was logged. Here’s a bonus tip about a
lesser-known DevTools feature– the DOM tree’s search UI. To open the DOM tree’s search
UI, focus the DOM tree, then press Control-F
or Command-F on Mac. You can search by strings
like DevTools or CSS selectors like input type equals
hidden or even XPath queries. Thanks for watching. We’ll be back in six
weeks for Chrome 78. [MUSIC PLAYING]

49 thoughts on “Chrome 77 – What’s New in DevTools

  1. Does “Copy Styles” copy all styles for that element (such as :hover and :focus) or just the current styles applied?
    This will be super useful for learning how other people have put clever little things together!!! 😄

  2. Loving the stage Next I want to see you working on a piece of wood and then look at the camera like "oh hey didnt see you there" xD

  3. A boatload of new features.
    Copying the elemnt style will come in handy indeed.

    The dark theme for the dev tools has been around for a while, but there are some areas where it's sub-optimal when it comes to contrasts. I hope it will get better.

  4. We've been able to toggle light/dark theme in the dev tools for years. When are we going to be able to do that for THE REST OF CHROME. I shouldn't have to set my entire OS to light mode just to make chrome not look terrible (which it absolutely does in dark mode). Firefox, Edge, Opera, etc all allow you to manually enable light or dark mode without having to change the setting for the entire OS. It's super annoying that Chrome can't do this very simple feature.

  5. As a seasoned Chrome dev-tools user for over 6y, I would like to suggest a focus mode for break/log points where code that is outside the local scope (curly braces) is dimmed down.

  6. 3:09 – Prefetch cache gave me the though that I wish there was a way to manually flag assets to be prefetched then also ignore loaded assets on full reload while devtools is open. I do so many page refreshes i'm always waiting on assets to load it drive me nuts.

  7. Thanks for the update! Also, I learned about conditional and log breakpoints which will be very helpful! 🙂

  8. Any chance of adding a checkbox in the Network panel next to "Hide Data URLs" to hide OPTION requests? At the moment having to manually type "-method:OPTIONS" into the filter every time is a bit cumbersome.

Leave a Reply

Your email address will not be published. Required fields are marked *