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
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
6. Debugging PHP
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?
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
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”
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.
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.
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.
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
67. Charles HTTP Proxy
68. Charles HTTP Proxy
69. Charles HTTP Proxy
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