Debugging as a Key Skill - WCSOF - WCMIL

My talk from WordCamp Sofia 2015 and WordCamp Milano 2016 about why, as a developer, you should treat debugging as a key skill that you should practice and become proficient at. I talk about some tools and processes for modern and efficient debugging of the front end and the back end, and how processes such as testing and version control can aid your debugging.

Video: https://wordpress.tv/2015/12/07/john-blackbourn-debugging-as-a-key-skill/

#xdebug #wordcamp #php #wcsof #wcmil #git #wordpress

Transcript

1. Debugging as a Key Skill
   John Blackbourn
   WordPresser at Human Made Ltd
   WordCamp Sofia 2015
   

   View Slide

2. Debugging as a Key Skill
   or
   Why var_dump() isn’t good enough
   John Blackbourn
   WordPresser at Human Made Ltd
   WordCamp Sofia 2015
   

   View Slide

3. John Blackbourn
   • WordPress core developer
   • Senior engineer at Human Made
   • Find me on Twitter, GitHub, WordPress.org, etc:
   @johnbillion
   WordCamp Sofia 2015
   

   View Slide

4. View Slide

5. View Slide

6. Debugging PHP
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. Dumping data to the screen
    in order to debug it isn’t
    appropriate in many cases.
    

    View Slide

12. • Admin area
    • AJAX calls
    • REST API calls
    • XML-RPC calls
    • Media manager
    • RSS feeds
    • Cron events
    • The list goes on…
    

    View Slide

13. Breakpoints
    A point at which code execution gets paused
    so its state can be inspected
    (with an external client of your choice)
    

    View Slide

14. Breakpoints
    • Inspect state
    • Step through code
    • Modify code
    

    View Slide

15. Xdebug
    • PHP extension
    • Provides breakpoint functionality
    • And lots more
    

    View Slide

16. PhpStorm
    

    View Slide

17. Xdebug Client for Sublime Text
    

    View Slide

18. Xdebug Client for Atom
    

    View Slide

19. Codebug for OS X
    

    View Slide

20. How do breakpoints work?
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. A proficient developer should
    be familiar with breakpoints
    and stepping through code
    

    View Slide

36. Why?
    

    View Slide

37. Breakpoints are used in
    many different areas
    of software development
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. var_dump()
    print_r()
    alert()
    console.log()
    

    View Slide

42. Investigating Regressions
    

    View Slide

43. a.k.a.
    “But it used to work”
    

    View Slide

44. How can I find out
    at what point something
    stopped working as expected?
    

    View Slide

45. git bisect
    

    View Slide

46. bisect
    “To cut or divide into
    two equal parts”
    

    View Slide

47. View Slide

48. View Slide

49. $ git bisect start
    $ git bisect good “2.6.10”
    $ git bisect bad 4e05243
    Bisecting: 74 revisions left to test after
    this (roughly 6 steps).
    [c20280a] Further tweaks to QM's output if
    JavaScript isn't available for any reason.
    

    View Slide

50. View Slide

51. $ git bisect start
    $ git bisect good “2.6.10”
    $ git bisect bad 4e05243
    Bisecting: 74 revisions left to test after
    this (roughly 6 steps).
    [c20280a] Further tweaks to QM's output if
    JavaScript isn't available for any reason.
    $ git bisect bad
    Bisecting: 36 revisions left to test after
    this (roughly 5 steps).
    [a59860e] Correct some output priorities.
    

    View Slide

52. View Slide

53. $ git bisect good
    Bisecting: 18 revisions left to test after
    this (roughly 4 steps).
    [c5f91e4] Consistent and correct output
    for closures and anonymous functions.
    

    View Slide

54. View Slide

55. $ git bisect good
    6b3c8c2 is the first bad commit
    commit 6b3c8c2
    Author: John Blackbourn
    Date: Mon Mar 16 00:27:08 2015 +0000
    Don't add a warning indicator to the admin
    bar menu if the `all` hook is in use. The
    warning in the Hooks output is sufficient.
    

    View Slide

56. $ git diff 1bd84ab 6b3c8c2
    - public function admin_menu( array $menu ) {
    - $data = $this->collector->get_data();
    - $args = array(
    - 'title' => $this->collector->name(),
    - );
    - $menu[] = $this->menu( $args );
    - return $menu;
    - }
    $ git bisect reset
    Previous HEAD position was 6b3c8c2...
    Don't add a warning indicator to the admin
    bar menu if the `all` hook is in use.
    Switched to branch 'master'
    

    View Slide

57. git bisect
    

    View Slide

58. HTTP Request Debugging
    

    View Slide

59. Ever dealt with API calls to a third party?
    • Payment gateways
    • Pushing content to social media
    • Pulling from external sources
    Even indirectly via someone else’s plugin?
    Why?
    

    View Slide

60. You should be able to inspect

    server-side HTTP requests.
    Forget dumping data to the screen.
    Why?
    

    View Slide

61. Charles HTTP Proxy
    

    View Slide

62. Charles HTTP Proxy
    Routes server-side HTTP traffic through Charles
    

    View Slide

63. Charles HTTP Proxy
    

    View Slide

64. Charles HTTP Proxy
    

    View Slide

65. Charles HTTP Proxy
    

    View Slide

66. View Slide

67. Charles HTTP Proxy
    

    View Slide

68. Charles HTTP Proxy
    

    View Slide

69. Charles HTTP Proxy
    

    View Slide

70. View Slide

71. Mobile Debugging
    

    View Slide

72. Remote Debugging on
    Android with Chrome
    

    View Slide

73. Mobile Device Dev Tools on Desktop
    sofia.wordcamp.org/2015/
    

    View Slide

74. Stream screen to dev tools on desktop
    

    View Slide

75. Safari dev tools for iOS devices and iOS emulator
    

    View Slide

76. • Breakpoints in PHP with Xdebug
    • Breakpoints in browser dev tools
    • Investigating regressions with git bisect
    • Debugging server-side HTTP requests
    • Debugging sites on mobile devices
    Recap
    

    View Slide

77. Debugging as a Key Skill
    Much of a developer’s time is spent reading, inspecting,
    and debugging, in addition to writing code.
    It makes sense that becoming proficient at debugging code
    should be as important as becoming proficient at writing it.
    

    View Slide

78. WordPress specific developer tools:
    wpgear.org
    

    View Slide

79. John Blackbourn
    Find me on Twitter, GitHub, WordPress.org, etc:
    @johnbillion
    Any questions?
    WordCamp Sofia 2015
    

    View Slide