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

23e12888dcd87d07434b7621bc164958?s=128

John Blackbourn

October 22, 2016
Tweet

Transcript

  1. Debugging as a Key Skill John Blackbourn WordPresser at Human

    Made Ltd WordCamp Sofia 2015
  2. Debugging as a Key Skill or Why var_dump() isn’t good

    enough John Blackbourn WordPresser at Human Made Ltd WordCamp Sofia 2015
  3. John Blackbourn • WordPress core developer • Senior engineer at

    Human Made • Find me on Twitter, GitHub, WordPress.org, etc: @johnbillion WordCamp Sofia 2015
  4. None
  5. None
  6. Debugging PHP

  7. None
  8. None
  9. None
  10. None
  11. Dumping data to the screen in order to debug it

    isn’t appropriate in many cases.
  12. • Admin area • AJAX calls • REST API calls

    • XML-RPC calls • Media manager • RSS feeds • Cron events • The list goes on…
  13. Breakpoints A point at which code execution gets paused so

    its state can be inspected (with an external client of your choice)
  14. Breakpoints • Inspect state • Step through code • Modify

    code
  15. Xdebug • PHP extension • Provides breakpoint functionality • And

    lots more
  16. PhpStorm

  17. Xdebug Client for Sublime Text

  18. Xdebug Client for Atom

  19. Codebug for OS X

  20. How do breakpoints work?

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. A proficient developer should be familiar with breakpoints and stepping

    through code
  36. Why?

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

  38. None
  39. None
  40. None
  41. var_dump() print_r() alert() console.log()

  42. Investigating Regressions

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

  44. How can I find out at what point something stopped

    working as expected?
  45. git bisect

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

  47. None
  48. None
  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.
  50. None
  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.
  52. None
  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.
  54. None
  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.
  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'
  57. git bisect

  58. HTTP Request Debugging

  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?
  60. You should be able to inspect
 server-side HTTP requests. Forget

    dumping data to the screen. Why?
  61. Charles HTTP Proxy

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

  63. Charles HTTP Proxy

  64. Charles HTTP Proxy

  65. Charles HTTP Proxy

  66. None
  67. Charles HTTP Proxy

  68. Charles HTTP Proxy

  69. Charles HTTP Proxy

  70. None
  71. Mobile Debugging

  72. Remote Debugging on Android with Chrome

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

  74. Stream screen to dev tools on desktop

  75. Safari dev tools for iOS devices and iOS emulator

  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
  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.
  78. WordPress specific developer tools: wpgear.org

  79. John Blackbourn Find me on Twitter, GitHub, WordPress.org, etc: @johnbillion

    Any questions? WordCamp Sofia 2015