This talk takes a brief look at developer tooling history, before jumping into a breakdown of some of Chrome DevTools major panels and tricks and techniques for each area. We then took two live examples of JS debugging with multiple kinds of breakpoints, and then wrapped things up with a quick overview of the RAIL performance model, and a walkthrough and demo of the Performance and Audit panels to see how we can catch performance bottlenecks and fix them!

1. Digging into your
DevTools

2. Hi there!
I’m Vernon Kesner
Currently a Senior UI Developer at Bottomline
Technologies. I’ve been building the web for a
little over 16 years. The last 8 of those in the
Financial Services space.
2

3. So what’s the agenda?
● Developer Tool History
● Panels
● Debugging HTML, CSS, and JavaScript
● Looking at Performance
● Q&A
3

4. Developer Tool History
A brief look through time, to the ”good old days”.
1

5. 5
By Lewis Hine [Public domain], via Wikimedia Commons
https://commons.wikimedia.org/wiki/File%3AOld_timer_structural_worker.jpg

6. The Good Old Days
6
(Firebug Console Panel v0.2)

7. “Chrome DevTools is a set of web developer tools that
are built directly into the Google Chrome browser.
DevTools enables developers to debug issues quickly
and efficiently, providing tools to solve and answer
HTML, CSS, and JavaScript problems and questions.
7

8. Chrome Canary
● Areas of the DevTools docs are based on Canary
● 10 weeks ahead of Chrome Stable
● Can do a side-by-side install with Chrome Stable
● “Nightly build for developers”
8
“Get on the bleeding edge of the web. Be warned: Canary can be unstable.”

9. Prelude to Panels
A few quick tips!
2

10. 10
Opening DevTools
Not just “Inspect Element! J
CMD+OPTION+i (Mac)
CTRL+SHIFT+i (Windows)
Auto Inspect Element!
CMD+SHIFT+C (Mac)
Open with Console
CMD+OPTION+J (Mac)

11. 11
Keyboard Shortcuts FTW!

12. 12
Dark Mode
Click the at the top right
Choose “Settings”
Change Theme to “Dark” in the
“Appearance” section

13. 13
The Command Bar
CMD+SHIFT+P
The Command Bar gives you quick
and easy access to the variety of
tools and panels that DevTools
provides.

14. 14
The Drawer
ESC
Hitting the Escape key on any
panel will bring up the ‘drawer’, an
area that includes a quick console
and other possible tools.

15. The Panels
A few quick tips!
3

16. Debug HTML and CSS, and Inspect Animations
16
Elements Panel

17. Elements Panel
Device Mode for Responsive Development
17

18. Console Panel
Filtered Sidebar, Inline Filtering, Persistence
18

19. Sources Panel
Debug JavaScript, Run Saved Snippets, Edit Local Files
19

20. Network Panel
Debug and Monitor Network Requests, Optimize Performance
20

21. Performance Panel
Record and Inspect the Lifecycle of a Site
21

22. Console Tricks
A few quick tips!
4

23. $0-4 and $_
Magic Variables for Easier Selecting and Debugging
23

24. console.dir()
Cleaner logging for Objects and DOM nodes
24

25. console.table(data)
Display and sort large amounts of data cleanly
25

26. console.copy()
Copy to the clipboard (temp globals)
26

27. debug(myFunctionName)/ undebug(myFunctionName)
Break on a specified function
27

28. Debugging HTML & CSS
5
Styles, animations, and semantics

29. document.designMode = ‘on’
Make much of the page content live editable
29

30. Editing HTML and CSS Styles
DevTools is great for debugging and designing in the browser
30

31. Inspecting Animations
Inspect and Modify animations with the Animations Inspector
31

32. DOM Breakpoints
Introduce breakpoint debugging into the DOM
32

33. Common problems
Who is listening to this event?!?!?
33

34. Debugging JavaScript
6
Event, inline, and network breakpoints

35. Breakpoint and Step Debugging
Quick Demo to Get Familiar
35

36. XHR Breakpoints
Pause execution of code based on network traffic
36

37. Analyzing Performance
7
Runtime and load performance analysis

38. The 4-parts of the RAIL performance model
38
RAIL Performance

39. 39
https://developers.google.com/web/fundamentals/performance/rail

40. Let’s take a look at a demo to
explore the Performance Panel
more closely.
This will focus on the R-A-I of the
RAIL performance model.
40
Performance Panel

41. 41
Audits Panel
Now let’s take a look at a demo
to explore the Audits Panel to
see how we can get other
performance metrics on our
sites and apps.
This will focus on the L of the
RAIL performance model.

42. 1. about:flags/#enable-devtools-experiments
2. Restart Chrome
3. Open DevTools, Go To Settings > Experiments
4. Hit SHIFT 6 Times
42
One more
quick thing
up, up, down, down, left, right, left, right, b, a, select, start

43. Resources
43
A few references to things we talked about and may not have gotten a chance to cover:
• https://www.google.com/chrome/browser/canary.html
• https://developers.google.com/web/tools/
• https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations
• https://developers.google.com/web/tools/chrome-devtools/network-performance/
• https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
• https://developers.google.com/web/tools/chrome-devtools/memory-problems/
• https://developers.google.com/web/fundamentals/performance/rail

44. 44
Thanks!
Any questions?
You can find me at @vernonk or reach out vernonkesner@gmail.com
Presentation template by SlidesCarnival