Debugging JavaScript, Ruby, Elixir

# JavaScript
* alert
* console.log
* console.time
* console.trace
* console.table
* Pretty print
* debugger
* Interactive breakpoints
* iframes
* React, Apollo, Redux, BrowserStack extensions
* Debuggin iOS, Android
# Ruby
* I am a puts debugger
* caller
* source_location
* freeze
* backtrace
* Logger
* REPL
* pry: cd, ls, whereami, wtf?, show-source
* Dotfiles
* Mute output
* Reload rails console
* Override in runtime
* Bundler open, show gem
* Gem pristine
* Checkups: Sentry, Slack, email
* sshrc
* ps, top, strace
* rbtrace, rbspy, stackprof
# Elixir
* IEx: i, h
* Connect nodes
* Distillery remote_console
* IO.inspect and pipe operator
* IEx.pry
* Debugger
* Observer

Transcript

1. Debugging JavaScript, Ruby, Elixir
2. Debugging JavaScript
3. alert
4. console.log
5. Store as global variable
6. console.time ⏱
7. console.trace
8. console everything
9. Unminify with pretty print
10. debugger
11. Interactive breakpoints in any code Source maps
12. Switch JavaScript context for iframes
13. React extension Select a React element https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
14. Open iframes directly to make React extension work
15. Apollo extension https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm
16. Redux extension https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
17. BrowserStack local extension https://www.browserstack.com/local-testing
18. Debugging iOS
19. Debugging Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
20. Learn DevTools (Chromium) • Shortcuts • Network tab • Event listeners • Storage • Performance • Service Workers • etc.
21. Debugging Ruby
22. I am a puts debugger https://tenderlovemaking.com/2016/02/05/i-am-a-puts-debuggerer.html
23. Stacktrace
24. Where a method is defined?
25. Who mutates my variable?
26. Inspect and backtrace
27. Set up logger
28. 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.
29. Pry https://github.com/pry/pry
30. Next and step
31. Dotfiles: irbrc, pryrc, gemrc, etc. https://github.com/exAspArk/dotfiles
32. List methods with Ruby
33. List methods with Pry
34. Switch context
35. Show context
36. Last eval
37. Last exception
38. Mute output
39. See the source code
40. Reload rails console
41. Override in runtime
42. Change local gems with bundler
43. Restore local gems after
44. 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.
45. Debugging in production
46. Checkups https://speakerdeck.com/rofreg/the-doctor-is-in-using-checkups-to-find-bugs-in-production-with-presenter-notes
47. Vim + sshrc > AWS Cloud9 https://github.com/Russell91/sshrc
48. Inject any debugger in Vim with <Leader> + p https://github.com/exaspark/dotfiles
49. Try to alias the most used CLI commands https://github.com/exaspark/dotfiles
50. Pry in production https://github.com/Russell91/sshrc
51. Check running processes (ps or top+zxc)
52. Use strace or rbtrace https://github.com/tmm1/rbtrace
53. Use rbspy or stackprof https://rbspy.github.io/rbspy-vs-stackprof/
54. Debugging Elixir
55. IEx
56. Send messages from one node to another
57. Use remote_console with Distillery https://hexdocs.pm/distillery/introduction/understanding_releases.html
58. IO.inspect with pipe operator
59. IEx.pry
60. Debugger: start
61. Debugger: attach and add a breakpoint
62. Debugger: hit the breakpoint
63. Observer