7 Developer Tools secrets that shouldn’t be secrets

A presentation at CityJS/Halfstack on the Beach in September 2021 in London, UK by Chris Heilmann

Slide 1

Slide 1

7 Developer Tools secrets that shouldn’t be secrets Chris Heilmann @codepo8

Slide 2

Slide 2

1 Console is much more than log()! Image used under license from Freestock.com

Slide 3

Slide 3

console.log(🧢's 🪵 ⭐ 📆… ${new Date().getTime()})

Slide 4

Slide 4

Noise!

Slide 5

Slide 5

https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-filters

Slide 6

Slide 6

What is that? console.log(width); console.log(height);

Slide 7

Slide 7

Simple trick: use the curls! console.log({width}); console.log({height});

Slide 8

Slide 8

Adding to your vocabulary https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-log

Slide 9

Slide 9

console.error() and console.assert()

Slide 10

Slide 10

console.trace() > console.log(”called”)

Slide 11

Slide 11

console.group()

Slide 12

Slide 12

console.table()

Slide 13

Slide 13

Blinging it up: $() and $$()

Slide 14

Slide 14

2 You can log without source access

Slide 15

Slide 15

Live expressions

Slide 16

Slide 16

Logpoints!

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

3 You can log outside the browser!

Slide 21

Slide 21

Using the debugger in VS Code…

Slide 22

Slide 22

Dedicated browser instance and console!

Slide 23

Slide 23

Console in VS Code!

Slide 24

Slide 24

4 You can inject code into any site! Snippets and overrides

Slide 25

Slide 25

Slide 26

Slide 26

Snippets https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/snippets

Slide 27

Slide 27

Run snippets from the command menu https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/snippets

Slide 28

Slide 28

Overrides https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/overrides

Slide 29

Slide 29

5 You can inspect and debug much more than you know!

Slide 30

Slide 30

GitHub Desktop…

Slide 31

Slide 31

Visual Studio Code

Slide 32

Slide 32

Browser DevTools?

Slide 33

Slide 33

Browser DevTools?

Slide 34

Slide 34

Inspect DevTools with DevTools…

Slide 35

Slide 35

DevTools in VS Code?

Slide 36

Slide 36

Dedicated browser instance and console!

Slide 37

Slide 37

Going the next step…

Slide 38

Slide 38

Slide 39

Slide 39

6 Some dirty secrets…

Slide 40

Slide 40

People use only a small fraction of Devtools.

Slide 41

Slide 41

Slide 42

Slide 42

Developer tools should not expect people to be experts but turn them into experts over time.

Slide 43

Slide 43

Sorting tools into use cases

Slide 44

Slide 44

Providing incontext explanations

Slide 45

Slide 45

We’re not yet fully integrated into the development process and there is one big gap!

Slide 46

Slide 46

Writing Code (Editor/IDE)

Slide 47

Slide 47

Checking if it works (Browser)

Slide 48

Slide 48

Debugging and Tweaking (Browser DevTools)

Slide 49

Slide 49

Done with changes, now what?

Slide 50

Slide 50

CSS mirror editing (open to feedback)

Slide 51

Slide 51

Slide 52

Slide 52

7 You’re the audience and the clients of Developer Tools!

Slide 53

Slide 53

Good products thrive on input

Slide 54

Slide 54

In context feedback tools

Slide 55

Slide 55

Open source on GitHub!

Slide 56

Slide 56

Slide 57

Slide 57

90% on the way… • Shows what URL the issue happened on • Takes a screenshot to include • Offers to also send diagnostic data • Offers you to provide an email for more questions • Allows for attachments and info how to recreate the issue. • We check this daily!

Slide 58

Slide 58

THANKS! Developer Tools Edge PM Team @EdgeDevTools Chris Heilmann @codepo8 Zoher Ghadyali @ZGhadyali Erica Draud @hiamerica aka.ms/7-devtools-secrets Rachel Weil @partytimeHXLNT