Skip to content

Instantly share code, notes, and snippets.

@handuy

handuy/sub.vtt

Last active Jun 14, 2019
Embed
What would you like to do?
WEBVTT
1
00:00:00.000 --> 00:00:02.325
[MUSIC PLAYING]
2
00:00:05.427 --> 00:00:06.260
KAYCE BASQUES: Hola!
3
00:00:06.260 --> 00:00:10.320
Here's what's new in
DevTools in Chrome 75.
4
00:00:10.320 --> 00:00:12.510
When autocompleting
CSS properties
5
00:00:12.510 --> 00:00:15.330
that take functions as
values, DevTools now
6
00:00:15.330 --> 00:00:18.480
autocompletes the
meaningful values.
7
00:00:18.480 --> 00:00:20.340
Back in an older
version of Chrome,
8
00:00:20.340 --> 00:00:23.580
when I add a filter property
to document that body
9
00:00:23.580 --> 00:00:25.920
and browse the
autocomplete values,
10
00:00:25.920 --> 00:00:29.100
I don't see any changes, even
though the DOM tree shows me
11
00:00:29.100 --> 00:00:32.800
that the property is being
updated in real time.
12
00:00:32.800 --> 00:00:36.690
That's because each of these
values is actually a function.
13
00:00:36.690 --> 00:00:41.280
For example, to blur a, page I
need to pass something like 5px
14
00:00:41.280 --> 00:00:43.110
as an argument.
15
00:00:43.110 --> 00:00:46.410
As of Chrome 75, when I
add the filter property
16
00:00:46.410 --> 00:00:48.600
and browse the
autocomplete values,
17
00:00:48.600 --> 00:00:51.510
I now see how each value
affects the styling,
18
00:00:51.510 --> 00:00:53.820
because DevTools is
supplying default
19
00:00:53.820 --> 00:00:55.020
arguments for each function.
20
00:00:57.540 --> 00:01:00.120
When you want to delete
all site storage data,
21
00:01:00.120 --> 00:01:03.150
you can now do so
from the Command Menu.
22
00:01:03.150 --> 00:01:06.480
Previously, the only easy
way to clear all site data
23
00:01:06.480 --> 00:01:08.980
was to open the
application panel,
24
00:01:08.980 --> 00:01:12.420
go to the Clear Storage pane,
select what types of storage
25
00:01:12.420 --> 00:01:16.510
to delete, then click the
Clear Site Data button.
26
00:01:16.510 --> 00:01:19.800
Now, you can clear site
data from the Command Menu.
27
00:01:19.800 --> 00:01:24.420
Open the main menu, click
Run Command, type Clear,
28
00:01:24.420 --> 00:01:27.030
select the Clear
Site Data command,
29
00:01:27.030 --> 00:01:29.850
then press Enter
to run the command.
30
00:01:29.850 --> 00:01:32.820
You can control what data
gets saved or deleted
31
00:01:32.820 --> 00:01:37.710
by unchecking or checking boxes
in the Clear Storage pane.
32
00:01:37.710 --> 00:01:39.990
When you've got an
IndexedDB database
33
00:01:39.990 --> 00:01:41.760
from a third party
on your page, you
34
00:01:41.760 --> 00:01:44.310
can now inspect that database.
35
00:01:44.310 --> 00:01:49.350
In this demo, I'm just embedding
MDN'S IDB demo in an iframe.
36
00:01:49.350 --> 00:01:54.180
I'll set note title to tony
and note text to good cat,
37
00:01:54.180 --> 00:01:56.610
and then click Create New Note.
38
00:01:56.610 --> 00:01:58.320
On this older version
of Chrome, when
39
00:01:58.320 --> 00:02:00.960
I go to the application
panel and then open
40
00:02:00.960 --> 00:02:05.610
the IndexedDB pane to inspect
the database, I see nothing.
41
00:02:05.610 --> 00:02:09.000
On Chrome 75, after
creating the same note,
42
00:02:09.000 --> 00:02:12.330
I see the database as expected.
43
00:02:12.330 --> 00:02:15.870
Also new in Chrome 75,
when inspecting databases,
44
00:02:15.870 --> 00:02:18.120
DevTools now tells
you the total number
45
00:02:18.120 --> 00:02:21.690
of items in that database.
46
00:02:21.690 --> 00:02:25.170
When you want to view a network
resource's compressed size
47
00:02:25.170 --> 00:02:29.100
versus its uncompressed , size
you can now do so by hovering
48
00:02:29.100 --> 00:02:31.470
over the Size column.
49
00:02:31.470 --> 00:02:35.190
Previously, you could only see
uncompressed resource sizes
50
00:02:35.190 --> 00:02:37.410
when using large request rows.
51
00:02:37.410 --> 00:02:41.220
For example, after I click
Use Large Request Rows,
52
00:02:41.220 --> 00:02:43.770
I see two values
in the Size column.
53
00:02:43.770 --> 00:02:46.350
The top value represents
the transfer size,
54
00:02:46.350 --> 00:02:48.300
which is the total
amount of data
55
00:02:48.300 --> 00:02:50.410
that was transferred
over the network,
56
00:02:50.410 --> 00:02:52.980
including headers and content.
57
00:02:52.980 --> 00:02:56.070
The bottom value represents
the full, uncompressed size
58
00:02:56.070 --> 00:02:58.410
of the resource content.
59
00:02:58.410 --> 00:03:01.650
If the top value is much
smaller than the bottom value,
60
00:03:01.650 --> 00:03:04.960
then the server is probably
using text compression,
61
00:03:04.960 --> 00:03:08.640
which is a good practice
because it speeds up page loads.
62
00:03:08.640 --> 00:03:11.280
If the two values are the
same, or the top value
63
00:03:11.280 --> 00:03:13.920
is slightly larger
than the bottom value,
64
00:03:13.920 --> 00:03:17.120
then the resource is
not being compressed.
65
00:03:17.120 --> 00:03:20.510
As of Chrome 75, you no
longer need large request rows
66
00:03:20.510 --> 00:03:22.280
to view this data.
67
00:03:22.280 --> 00:03:24.710
First, I'll click Use
Small Request Rows
68
00:03:24.710 --> 00:03:26.570
to go back to the default view.
69
00:03:26.570 --> 00:03:29.240
And now, when I hover
over the Size column,
70
00:03:29.240 --> 00:03:33.520
I see the transfer
size and the resources.
71
00:03:33.520 --> 00:03:36.400
Inline breakpoints can now be
managed from the Breakpoints
72
00:03:36.400 --> 00:03:37.960
pane.
73
00:03:37.960 --> 00:03:41.140
In this example, I want to
pause before Map is called.
74
00:03:41.140 --> 00:03:44.050
So first, I add a line
of code breakpoint.
75
00:03:44.050 --> 00:03:46.810
Then I click the
icon next to Map.
76
00:03:46.810 --> 00:03:49.120
I don't want to
pause before props,
77
00:03:49.120 --> 00:03:52.360
so I'll click to
disable that breakpoint.
78
00:03:52.360 --> 00:03:54.950
I also want to pause
before createElement,
79
00:03:54.950 --> 00:03:58.913
so I enabled that inline
breakpoint there as well.
80
00:03:58.913 --> 00:04:00.580
In this older version
of Chrome, there's
81
00:04:00.580 --> 00:04:02.920
only one entry in
the Breakpoints pane,
82
00:04:02.920 --> 00:04:05.980
although there really
should be two, one for Map
83
00:04:05.980 --> 00:04:08.550
and one for createElement.
84
00:04:08.550 --> 00:04:12.090
Now, after creating the same
breakpoints in Chrome 75,
85
00:04:12.090 --> 00:04:16.070
there's two entries in the
Breakpoints pane, as expected.
86
00:04:16.070 --> 00:04:18.529
By the way, if you ever
need to disable or delete
87
00:04:18.529 --> 00:04:20.720
all breakpoints, just
right-click the Breakpoints
88
00:04:20.720 --> 00:04:21.220
pane.
89
00:04:24.620 --> 00:04:28.010
If you prefer a minimal
UI when inspecting nodes,
90
00:04:28.010 --> 00:04:31.520
there is now a setting for
disabling the detailed tooltip
91
00:04:31.520 --> 00:04:34.880
that we introduced in Chrome 73.
92
00:04:34.880 --> 00:04:38.060
After I click Inspect and
hover over this paragraph,
93
00:04:38.060 --> 00:04:40.760
I see a tooltip containing
style information
94
00:04:40.760 --> 00:04:42.830
about that paragraph node.
95
00:04:42.830 --> 00:04:45.560
If you just want to hide
the tooltip sometimes,
96
00:04:45.560 --> 00:04:50.510
you can hold Control or Command
on Mac to hide it temporarily.
97
00:04:50.510 --> 00:04:52.640
If you want to
permanently disable it,
98
00:04:52.640 --> 00:04:54.920
press F1 to open Settings.
99
00:04:54.920 --> 00:04:58.350
Go to the Preferences
page, if not already open.
100
00:04:58.350 --> 00:05:01.880
Go to the Elements section,
then disable the Show Detailed
101
00:05:01.880 --> 00:05:05.030
Inspect Tooltip checkbox.
102
00:05:05.030 --> 00:05:08.210
Now, when I hover over
nodes while in inspect mode,
103
00:05:08.210 --> 00:05:09.770
I see a more minimal tooltip.
104
00:05:12.780 --> 00:05:15.060
If you navigate DevTools
with a keyboard,
105
00:05:15.060 --> 00:05:17.340
there is now a setting
to prevent the tab
106
00:05:17.340 --> 00:05:20.050
trap in the Sources panel.
107
00:05:20.050 --> 00:05:22.990
Right now, my focus is
on the Elements tab.
108
00:05:22.990 --> 00:05:26.800
When I press Control, right
square bracket, or Command,
109
00:05:26.800 --> 00:05:30.580
right square bracket on Mac,
I navigate to the console.
110
00:05:30.580 --> 00:05:34.690
And when I press it again, I
navigate to the Sources panel.
111
00:05:34.690 --> 00:05:36.760
When I try to tab
out of the editor,
112
00:05:36.760 --> 00:05:39.430
it just indents
the code instead.
113
00:05:39.430 --> 00:05:42.550
To fix this, press F1
to open Settings again.
114
00:05:42.550 --> 00:05:45.830
Go to the Preferences
page, if not already open.
115
00:05:45.830 --> 00:05:48.700
Go to the Sources section
and enable the checkbox
116
00:05:48.700 --> 00:05:51.910
for Enable Tab Moves Focus.
117
00:05:51.910 --> 00:05:54.520
Now, when I go back
to the Elements panel
118
00:05:54.520 --> 00:05:57.670
and use my keyboard to
navigate to the Sources panel
119
00:05:57.670 --> 00:06:00.430
and then press Tab,
my focus moves out
120
00:06:00.430 --> 00:06:02.940
of the editor as expected.
121
00:06:02.940 --> 00:06:04.590
By the way, there's
been a lot of work
122
00:06:04.590 --> 00:06:07.290
recently around making
DevTools more accessible.
123
00:06:07.290 --> 00:06:10.350
Check out Rob's Navigate
DevTools With Assistive
124
00:06:10.350 --> 00:06:11.810
Technology guide to learn more.
125
00:06:14.720 --> 00:06:18.410
Here's a bonus tip on how to
enable the built-in dark theme
126
00:06:18.410 --> 00:06:21.050
that we've had since 2016.
127
00:06:21.050 --> 00:06:24.890
Press Control-Shift-P or
Command-Shift-P on Mac
128
00:06:24.890 --> 00:06:26.990
to open the Command menu.
129
00:06:26.990 --> 00:06:29.210
Type "dark," and
then press Enter
130
00:06:29.210 --> 00:06:32.430
to run the Switch to
Dark Theme command.
131
00:06:32.430 --> 00:06:34.790
You can also access
this from Settings,
132
00:06:34.790 --> 00:06:38.060
Preferences, Appearance, Theme.
133
00:06:38.060 --> 00:06:40.760
Thanks for watching, and
we'll be back for Chrome 76
134
00:06:40.760 --> 00:06:41.810
in six weeks.
135
00:06:41.810 --> 00:06:44.860
[MUSIC PLAYING]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.