Introduction to IDEs and Debugging

Integrated Development Environments (IDEs) and Debugging – discover what the fuss is all about!

An IDE is a very powerful tool that helps you to understand your code. Imagine being able to jump to a function’s declaration, find all usages of said function, and even be able to step through the function line by line to truly understand what is happening in your program (and fix those pesky, hard to find bugs!).

For a long time I thought using a simple text editor like Sublime or Textmate was all a web developer needed. You make a code change, save the file, refresh your browser and it either works or it doesn’t!. If you wanted to be fancy you could even output your variables in a ‘var_dump’!

However, using ‘var_dump’ interjected in your code is not always the best solution (and would sometimes be impossible in an XMLRPC or delayed script), and relying on your editor’s ‘Find’ to search through your entire project to find a function’s declaration is disjointed and can be extremely time consuming.

We’ll walk through using and understanding an IDE (the basics) as well as run through how to set up and step through our code, line by line.

Just imagine, being able to stop at any point of execution in your code, walk line-by-line through it and at any point see what variables are alive and what values they hold. It’s analogous to taking the blindfold off and truly seeing (and understanding) your code.

Transcript

1. Introduction to IDEs and Debugging aaronjholbrook.com aaronjholbrook
2. get_info( ‘aaronholbrook’ );
7. How I Learned to Stop Worrying and Love Interactive Debugging (Also IDEs are the shit)
8. How I Learned to Stop Worrying and Love Interactive Debugging (Also IDEs are the shit)
9. Integrated Development Environment
10. A software application that provides comprehensive facilities to computer programmers for software development
12. It is more than a text editor
14. Use the right tool for the job
16. Jump to a declaration (function, method, variable, etc)
18. Visualize version control changes
20. See unused variables and syntax errors
22. How I Learned to Stop Worrying and Love Interactive Debugging (Also IDEs are the shit)
23. How I Learned to Stop Worrying and Love Interactive Debugging (Also IDEs are the shit)
24. what IS debugging?
25. Debugging is a process of finding and reducing the number of bugs in a computer program, thus making it behave as expected
26. WHY INTERACTIVE DEBUGGING?
27. Ever do this?
28. echo( $variable );
29. print_r( $array ); var_dump( $array );
30. public function get_instagram_data( $parameter, $type = null ) { ! var_dump( $parameter ); // Needed to see what parameter was passed ! $access_token = get_option( 'easy_instagram_access_token' ); ! if ( false === $access_token ) return false; ! var_dump( $access_token ); // Was it false? What was it? ! ! . . .
31. protected function get_instagram_url( $parameter ) { ! $preg_match = preg_match( '/^(@|#)([a-z]+)/', $parameter, $matches ); var_dump( $preg_match ); // What was the result? var_dump( $matches ); // Any matches? ! if ( ! empty( $preg_match ) ) { ! ! . . .
32. var_dump( );
33. Well - there IS a better way.
34. Follow program execution
35. Examine variables at a specific point of execution
36. Achieve a quicker and greater understanding of new code
38. HOW TO: INTERACTIVELY DEBUG
39. 1. USE IDE (Integrated Development Environment)
40. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE
41. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG
42. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT
43. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE
44. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE 6. EXAMINE VARIABLES & WALK THROUGH CODE
45. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE 6. EXAMINE VARIABLES & WALK THROUGH CODE REPEAT STEPS 4-6 AS NECESSARY
46. 1. USE IDE (Integrated Development Environment)
47. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE
49. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE
50. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG
53. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG
54. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT
55. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE
56. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE 6. EXAMINE VARIABLES & WALK THROUGH CODE
57. 1. USE IDE (Integrated Development Environment) 2. CONFIGURE 3. ENABLE XDEBUG 4. SET BREAKPOINT 5. LOAD PAGE 6. EXAMINE VARIABLES & WALK THROUGH CODE REPEAT STEPS 4-6 AS NECESSARY
58. THE DEBUGGER
59. Program Execution
61. Show execution point
63. Show execution point
64. Step over
67. Step over
68. Step into
71. Step into
72. Step out
74. .2
75. Step out
76. Run to cursor
79. Run to cursor
80. Program Flow
82. Rerun
83. Resume
84. Stop
85. Call Stack
86. In computer science, a call stack is a stack data structure that stores information about the active subroutines of a computer program
94. Variables
111. Contrived Example problem happens on page load
113. Real life debugging not seeing correct ad zone in author archive
114. Questions?
115. Aaron Holbrook THANKS! aaronjholbrook aaronjholbrook.com aaronjholbrook.com/interactive-debugging