Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debugging as a Key Skill - WCSOF - WCMIL

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

John Blackbourn

October 22, 2016
Tweet

More Decks by John Blackbourn

Other Decks in Technology

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