Chrome 68 – What’s New in DevTools

Chrome 68 – What’s New in DevTools

[MUSIC PLAYING] KAYCE BASQUES: Welcome back. For Chrome 68, we’ve got some
new Preview and Autocomplete features in the console
and a major upgrade to the Audits panel. Eager Evaluation
lets you preview the results of expressions
without explicitly executing them. Enable it by opening
Console Settings and checking the Eager
Evaluation checkbox. Now, when I do a Sort
on this array of names, I see a preview of the result,
even though I haven’t actually pressed Enter. Note that, by design, it doesn’t
work with expressions that change the state of the page. For example, if I change the H1
text on the DevTools home page, I don’t see a preview. The console now also previews
what arguments a function expects. Just type out the
function and you’ll see a Tooltip above your cursor. A question mark next to an
arg, such as the one here next to Options, represents
an optional argument. An ellipsis, such as the
one here next to Items, represents a spread, and
two or more Tooltips, such as the 2 here
next to CSS.supports, means that the function supports
different argument signatures. Autocomplete now works
after you invoke a function. Back in an older
version of Chrome, when I type out a function
such as querySelector, I don’t get any information
about what properties or methods are available. But now, when I run
querySelector in Chrome 68, I get an Autocomplete dialog. Also, Autocomplete now
recognizes newer JavaScript keywords such as
await and async. If you want to improve
the quality of your pages, the Audits panel is a
great place to start. In Chrome 68, the Audits panel
is getting a big upgrade. Click the Audits tab
and the config options are now listed across the
page rather than crammed up into the toolbar. The Device option lets
you simulate a device or maintain your
desktop settings. If you simulate Mobile, it
changes the user agent string and simulates a mobile
viewport and [INAUDIBLE].. The Audits section lets you
choose which category of audits you want to run. The Throttling section lets
you simulate how your page will perform on a less
powerful device and the Clear Storage checkbox
lets you delete your storage before every run,
which is good if you want to analyze how first-time
visitors experience your site. If you care more
about repeat visitors, than disable this checkbox. When you are ready,
click Run Audits. The auditing process is
generally faster than before, thanks to a new internal
auditing engine codenamed Lantern. Rather than actually
throttling the page, Lantern uses your normal
CPU and network settings and then extrapolates
how long the page would have taken to load
under mobile conditions. The report UI has
also gotten a refresh, thanks to a collaboration
between the Lighthouse and Chrome UX teams. There’s a few new
audits in this version, including first
contentful paint, use video formats
for animated content, avoid costly round trips,
and robots.text is not valid. Check out my new tutorial,
Optimize Site Speed, if you want hands-on training
on how to use the Audits panel and many other DevTools features
to improve load performance. Link to that is in
the description. That’s all for Chrome 68. Here’s a bonus tip. Now, usually you would put
these statements into your code, but I’m just going to
run them from DevTools. If you’ve got a set of objects
with similar data models, you can pass these objects
in an array to console.table and the console will display the
results in a tidy little table. Console.assert lets
you write an error only when a certain
condition is false. This first condition
here is false, so we expect this
message to get logged, whereas this second
condition is true, so that shouldn’t show
up in the console. And the third here is false
again, so that should log. Console.count lets you count
how many times Count has been invoked with that label. For example, we’ve got four
instances of this label and three of this
other label, so when we execute this
snippet, we should see the first label get
printed out four times and the second one three times. lets you organize
messages into a visual group. End a group by calling
console.groupEnd. Check out the
Console API Reference for the full list of methods,
or just type console. in your console and browse
the Autocomplete dialog. See you in six
weeks for Chrome 69. [MUSIC PLAYING]


44 thoughts on “Chrome 68 – What’s New in DevTools”

Leave a Reply

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