What I do
I solve problems
and build
capabilities
About me
Technical SEO
and Analytics
Consultant
Slide 3
Slide 3 text
#SearchNStuff
@nathanless
How to do anything in
Chrome DevTools
the Network Panel
Slide 4
Slide 4 text
#SearchNStuff
@nathanless
Set up your
own Chrome
property for
auditing
Slide 5
Slide 5 text
#SearchNStuff
@nathanless
Ctrl + Shift + I
to open the
network tab
Hit Ctrl + R to
reload
Slide 6
Slide 6 text
#SearchNStuff
@nathanless
Click “Disable
cache” to
emulate first
time visits
Slide 7
Slide 7 text
#SearchNStuff
@nathanless
Use the stop
and clear icons
as necessary
Slide 8
Slide 8 text
#SearchNStuff
@nathanless
The summary
pane shows a
useful overview
of what the
browser has
loaded
Slide 9
Slide 9 text
#SearchNStuff
@nathanless
The waterfall
shows
information
about each
request in
chronological
order
Slide 10
Slide 10 text
#SearchNStuff
@nathanless
But you can
also right-click
the header to
change the
waterfall sort
order
Slide 11
Slide 11 text
#SearchNStuff
@nathanless
Hover to see a
preview of the
timing
information
Slide 12
Slide 12 text
#SearchNStuff
@nathanless
You can also
navigate to the
timing tab to
see a
breakdown
Slide 13
Slide 13 text
#SearchNStuff
@nathanless
Click the cog
icon and select
“Big request
rows” and
“Screenshots”
Slide 14
Slide 14 text
#SearchNStuff
@nathanless
Right-click the
name panel and
add “domain”
as a column.
Slide 15
Slide 15 text
#SearchNStuff
@nathanless
Click the funnel
icon to toggle
filters
Slide 16
Slide 16 text
#SearchNStuff
@nathanless
Click the
buttons on to
filter by request
type
Slide 17
Slide 17 text
#SearchNStuff
@nathanless
Use the filter
box to filter
requests by
name
Slide 18
Slide 18 text
#SearchNStuff
@nathanless
There is also an
option to filter
by request
property
https://developer.chrome.com/docs/devtools/network/reference#filter-by-property
Slide 19
Slide 19 text
#SearchNStuff
@nathanless
It's also possible
to add multiple
conditions and
use wildcards
Slide 20
Slide 20 text
#SearchNStuff
@nathanless
Click the
“Invert”
checkbox to
reverse
conditions
Slide 21
Slide 21 text
#SearchNStuff
@nathanless
Use the
“Preserve log
checkbox” the
log to follow
redirects
Slide 22
Slide 22 text
#SearchNStuff
@nathanless
Click the
request to see
information
about the
request and the
response
Slide 23
Slide 23 text
#SearchNStuff
@nathanless
Navigate to the
initiator tab to
see the request
initiator chain
Slide 24
Slide 24 text
#SearchNStuff
@nathanless
Hold “Shift” over
a request to see
initiator and
dependency
information
highlighted
Slide 25
Slide 25 text
#SearchNStuff
@nathanless
Hit Ctrl + Shift +
P to open the
command menu
Slide 26
Slide 26 text
#SearchNStuff
@nathanless
Type “Disable
JavaScript” to
turn off JS
Slide 27
Slide 27 text
#SearchNStuff
@nathanless
Type “Enable
JavaScript” to
bring it back
Slide 28
Slide 28 text
#SearchNStuff
@nathanless
Right-click a
request to block
it
Slide 29
Slide 29 text
#SearchNStuff
@nathanless
Shortcuts also
exist for
Screenshots
Slide 30
Slide 30 text
#SearchNStuff
@nathanless
Type “Dock” to
change the
placement of
dev tools
Slide 31
Slide 31 text
#SearchNStuff
@nathanless
Type “Show
Network
Conditions” to
override the user
agent or throttle
the connection
Slide 32
Slide 32 text
#SearchNStuff
@nathanless
Disable “Use
browser
default” and
select
Googlebot, and
refresh
Slide 33
Slide 33 text
#SearchNStuff
@nathanless
You can also
slow down your
connection in
Network
Connections