RomaJS | 18.03.2018 | Codemotion #AperiTech

1. Browser DevTools

2. Marco Liberati
@dej611
Gabriele Falasca
@gabrycaos
Whoami

3. Agenda
● Chrome
○ Overview DevTools
○ DOM & CSS
○ Debugging
○ Profiling
● Firefox
○ Inspector
○ Style editor
○ Debugger & Profiler
○ Network monitor
○ WebAudio
○ Accessibility inspector

4. The Chrome DevTools

5. The Chrome DevTools
DOM
+
CSS
… plus some
“secret” tabs
we’ll see later

6. The Chrome DevTools
JS
… plus some
“secret” tabs
we’ll see later

7. The Chrome DevTools - “secret” panels

8. The Chrome DevTools - “secret” panels
DOM
+
CSS

9. The Chrome DevTools - “secret” panels
JS

10. What we’re diving into today
JS
… plus
● Layers
● Performance
● Coverage
DOM
+
CSS

11. Elements panel
You can see:
● the box model
● the event listeners
● DOM “breakpoints”
Live editing:
● Add new inline style
● Edit classes style

12. “Secret” panel: Layers
You can see:
● the painting layers
Example:
http://diana-adrianne.com/purecss-francine/

13. Console panel
Environment where you
can experiment and
hack some JS.
Usually powerful tool to
read debug statement
and locally debug on his
own, but his real power
comes from when
combined together when
other panels

14. Console panel + Elements panel
When you’re in any
other panel, hitting the
ESC key will trigger the
console panel to pop up
at the bottom

15. Console panel + Elements panel tips & tricks
● $( … ) is a shortcut to document.querySelector()
$(‘img’) -> <img … />
● $0 - $4 can be used to reference the last 5 DOM elements inspected
$0 is the last selected DOM element
$1 is the previous one
etc…
● $$( …) is a shortcut to document.querySelectorAll()
$$(‘img’) -> [ <img … /> .. ]

16. Source panel
This is a powerful
debugging tool inside
your browser

17. Source panel
File tree
Debug
context
Debug
area

18. Performance panel
Resources
timeline (CPU,
Memory…)
Thread
Flamechart
Time Overview

19. JS Profiling panel

20. Console panel + Source panel tips & tricks
● set a breakpoint then use the console to inspect the local scope
● $_ is useful to get the last expression result
● console.trace is your friend when debugging async code
● console.profile (+ console.profileEnd) will programmatically activate
and end the JS profiler
● Rather than console.log( variable ) use console.log({variable})
More tricks: https://developers.google.com/web/tools/chrome-devtools/console/console-
reference

21. Source panel - Complete Debugging demo
Web Worker
Expensive task
Main Thread
Expensive task

22. Firefox
Developer
Tools
moz://a

23. Inspector
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

24. Inspector - Useless rules
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

25. Inspector - Event tooltip
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

26. Inspector - Screenshot node
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

27. Inspector - CSS Filter editor
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

28. Inspector - Font panel
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

29. Inspector - Switch unit size
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

30. Inspector - Grid Tool
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

31. Inspector - Animation editor
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

32. Inspector - Animation editor
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

33. Inspector - Web Components
moz://a
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector

34. Style Editor
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

35. Style Editor - vim/emacs/sublime keybindings
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
about:config -> devtools.editor.keymap -> vim || emacs || sublime

36. Responsive View
moz://a

37. Console
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Web_Console.

38. Console - Tips
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Web_Console.
If you have an element currently selected in your Inspector, you can use the reference $0 to call it within
your code. For example, to see the elements' contents you would type $0.innerHTML.
For previous you can use temp0 and so on.
To access to the document.querySelectorAll you can use $$.
To access to the document.querySelector you can use $.
To access to the previous value returned in console $_.
To copy the HTML of object you can use copy($0).
To inspect an object inspect($0).

39. Console - Grouping logs
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Web_Console.

40. Console - MDN reference
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Web_Console.

41. Debugger
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Debugger

42. Debugger - Conditional breakpoints
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Debugger

43. Network Monitor
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

44. Profiler
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Profiler

45. Storage
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

46. Scratchpad
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

47. Color picker and Measure tools
moz://a

48. Web audio debugger/editor
moz://a
https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor
DEMO

49. Accessibility inspector
moz://a

50. debugger.html
moz://a
https://github.com/devtools-html/debugger.html

51. Firefox: Developer edition
moz://a
https://www.mozilla.org/it/firefox/developer/