Slide 1
Slide 1 text
Debugging as a Key Skill
John Blackbourn
WordPresser at Human Made Ltd
WordCamp Sofia 2015
Slide 2
Slide 2 text
Debugging as a Key Skill
or
Why var_dump() isn’t good enough
John Blackbourn
WordPresser at Human Made Ltd
WordCamp Sofia 2015
Slide 3
Slide 3 text
John Blackbourn
• WordPress core developer
• Senior engineer at Human Made
• Find me on Twitter, GitHub, WordPress.org, etc:
@johnbillion
WordCamp Sofia 2015
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Debugging PHP
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Dumping data to the screen
in order to debug it isn’t
appropriate in many cases.
Slide 12
Slide 12 text
• Admin area
• AJAX calls
• REST API calls
• XML-RPC calls
• Media manager
• RSS feeds
• Cron events
• The list goes on…
Slide 13
Slide 13 text
Breakpoints
A point at which code execution gets paused
so its state can be inspected
(with an external client of your choice)
Slide 14
Slide 14 text
Breakpoints
• Inspect state
• Step through code
• Modify code
Slide 15
Slide 15 text
Xdebug
• PHP extension
• Provides breakpoint functionality
• And lots more
Slide 16
Slide 16 text
PhpStorm
Slide 17
Slide 17 text
Xdebug Client for Sublime Text
Slide 18
Slide 18 text
Xdebug Client for Atom
Slide 19
Slide 19 text
Codebug for OS X
Slide 20
Slide 20 text
How do breakpoints work?
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
A proficient developer should
be familiar with breakpoints
and stepping through code
Slide 36
Slide 36 text
Why?
Slide 37
Slide 37 text
Breakpoints are used in
many different areas
of software development
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
var_dump()
print_r()
alert()
console.log()
Slide 42
Slide 42 text
Investigating Regressions
Slide 43
Slide 43 text
a.k.a.
“But it used to work”
Slide 44
Slide 44 text
How can I find out
at what point something
stopped working as expected?
Slide 45
Slide 45 text
git bisect
Slide 46
Slide 46 text
bisect
“To cut or divide into
two equal parts”
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
$ 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.
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
$ 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.
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
$ git bisect good
Bisecting: 18 revisions left to test after
this (roughly 4 steps).
[c5f91e4] Consistent and correct output
for closures and anonymous functions.
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
$ 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.
Slide 56
Slide 56 text
$ 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'
Slide 57
Slide 57 text
git bisect
Slide 58
Slide 58 text
HTTP Request Debugging
Slide 59
Slide 59 text
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?
Slide 60
Slide 60 text
You should be able to inspect
server-side HTTP requests.
Forget dumping data to the screen.
Why?
Slide 61
Slide 61 text
Charles HTTP Proxy
Slide 62
Slide 62 text
Charles HTTP Proxy
Routes server-side HTTP traffic through Charles
Slide 63
Slide 63 text
Charles HTTP Proxy
Slide 64
Slide 64 text
Charles HTTP Proxy
Slide 65
Slide 65 text
Charles HTTP Proxy
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Charles HTTP Proxy
Slide 68
Slide 68 text
Charles HTTP Proxy
Slide 69
Slide 69 text
Charles HTTP Proxy
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Mobile Debugging
Slide 72
Slide 72 text
Remote Debugging on
Android with Chrome
Slide 73
Slide 73 text
Mobile Device Dev Tools on Desktop
sofia.wordcamp.org/2015/
Slide 74
Slide 74 text
Stream screen to dev tools on desktop
Slide 75
Slide 75 text
Safari dev tools for iOS devices and iOS emulator
Slide 76
Slide 76 text
• 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
Slide 77
Slide 77 text
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.
Slide 78
Slide 78 text
WordPress specific developer tools:
wpgear.org
Slide 79
Slide 79 text
John Blackbourn
Find me on Twitter, GitHub, WordPress.org, etc:
@johnbillion
Any questions?
WordCamp Sofia 2015