Debugging JavaScript, Ruby, Elixir

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Debugging JavaScript

Slide 3

Slide 3 text

alert

Slide 4

Slide 4 text

console.log

Slide 5

Slide 5 text

Store as global variable

Slide 6

Slide 6 text

console.time ⏱

Slide 7

Slide 7 text

console.trace

Slide 8

Slide 8 text

console everything

Slide 9

Slide 9 text

Unminify with pretty print

Slide 10

Slide 10 text

debugger

Slide 11

Slide 11 text

Interactive breakpoints in any code Source maps

Slide 12

Slide 12 text

Switch JavaScript context for iframes

Slide 13

Slide 13 text

React extension Select a React element https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Slide 14

Slide 14 text

Open iframes directly to make React extension work

Slide 15

Slide 15 text

Apollo extension https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm

Slide 16

Slide 16 text

Redux extension https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Slide 17

Slide 17 text

BrowserStack local extension https://www.browserstack.com/local-testing

Slide 18

Slide 18 text

Debugging iOS

Slide 19

Slide 19 text

Debugging Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Slide 20

Slide 20 text

Learn DevTools (Chromium) • Shortcuts • Network tab • Event listeners • Storage • Performance • Service Workers • etc.

Slide 21

Slide 21 text

Debugging Ruby

Slide 22

Slide 22 text

I am a puts debugger https://tenderlovemaking.com/2016/02/05/i-am-a-puts-debuggerer.html

Slide 23

Slide 23 text

Stacktrace

Slide 24

Slide 24 text

Where a method is defined?

Slide 25

Slide 25 text

Who mutates my variable?

Slide 26

Slide 26 text

Inspect and backtrace

Slide 27

Slide 27 text

Set up logger

Slide 28

Slide 28 text

REPL https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop Read-Eval-Print-Loop is a simple, interactive computer programming environment that takes single user inputs, evaluates them, and returns the result to the user. REPL involves the programmer more frequently than the classic edit- compile-run-debug cycle.

Slide 29

Slide 29 text

Pry https://github.com/pry/pry

Slide 30

Slide 30 text

Next and step

Slide 31

Slide 31 text

Dotfiles: irbrc, pryrc, gemrc, etc. https://github.com/exAspArk/dotfiles

Slide 32

Slide 32 text

List methods with Ruby

Slide 33

Slide 33 text

List methods with Pry

Slide 34

Slide 34 text

Switch context

Slide 35

Slide 35 text

Show context

Slide 36

Slide 36 text

Last eval

Slide 37

Slide 37 text

Last exception

Slide 38

Slide 38 text

Mute output

Slide 39

Slide 39 text

See the source code

Slide 40

Slide 40 text

Reload rails console

Slide 41

Slide 41 text

Override in runtime

Slide 42

Slide 42 text

Change local gems with bundler

Slide 43

Slide 43 text

Restore local gems after

Slide 44

Slide 44 text

Debugging in production If something weird is happening, consider collecting more information about frequency and context: • Report to your error tracker (Sentry) • Notify in your messenger (Slack) • Send an email • etc.

Slide 45

Slide 45 text

Debugging in production

Slide 46

Slide 46 text

Checkups https://speakerdeck.com/rofreg/the-doctor-is-in-using-checkups-to-find-bugs-in-production-with-presenter-notes

Slide 47

Slide 47 text

Vim + sshrc > AWS Cloud9 https://github.com/Russell91/sshrc

Slide 48

Slide 48 text

Inject any debugger in Vim with + p https://github.com/exaspark/dotfiles

Slide 49

Slide 49 text

Try to alias the most used CLI commands https://github.com/exaspark/dotfiles

Slide 50

Slide 50 text

Pry in production https://github.com/Russell91/sshrc

Slide 51

Slide 51 text

Check running processes (ps or top+zxc)

Slide 52

Slide 52 text

Use strace or rbtrace https://github.com/tmm1/rbtrace

Slide 53

Slide 53 text

Use rbspy or stackprof https://rbspy.github.io/rbspy-vs-stackprof/

Slide 54

Slide 54 text

Debugging Elixir

Slide 55

Slide 55 text

IEx

Slide 56

Slide 56 text

Send messages from one node to another

Slide 57

Slide 57 text

Use remote_console with Distillery https://hexdocs.pm/distillery/introduction/understanding_releases.html