The Base Ingredients of Debugging

by Jenny Wong

Slide 1

Slide 1 text

www.reasondigital.com @miss_jwo 1 Saturday, 13 July 13

Slide 2

Slide 2 text

www.reasondigital.com @miss_jwo The Base Ingredients of Debugging Jenny Wong Web Developer 1 Saturday, 13 July 13

Slide 3

Slide 3 text

www.reasondigital.com @miss_jwo The Principles of Debugging Jenny Wong Web Developer 2 Saturday, 13 July 13

Slide 4

Slide 4 text

www.reasondigital.com @miss_jwo Jenny Wong Web Developer PHPNW usergroup & conference organiser @miss_jwo 3 Saturday, 13 July 13

Slide 5

Slide 5 text

www.reasondigital.com @miss_jwo 4 Saturday, 13 July 13

Slide 6

Slide 6 text

www.reasondigital.com @miss_jwo More Info: h p://conference.phpnw.org.uk 5 Saturday, 13 July 13

Slide 7

Slide 7 text

www.reasondigital.com @miss_jwo "This is all true because it came off the internet." Wise Words : 6 Saturday, 13 July 13

Slide 8

Slide 8 text

www.reasondigital.com @miss_jwo Actually it was a book. 7 Saturday, 13 July 13

Slide 9

Slide 9 text

www.reasondigital.com @miss_jwo What is debugging? 8 Saturday, 13 July 13

Slide 10

Slide 10 text

www.reasondigital.com @miss_jwo Debugging is ﬁnding out why something does not work & ﬁxing it. 9 Saturday, 13 July 13

Slide 11

Slide 11 text

www.reasondigital.com @miss_jwo en.wikipedia.org/wiki/Debugging Debugging is a methodical process of ﬁnding and reducing the number of bugs, or defects, in a computer program or a piece of electronic hardware, thus making it behave as expected. 10 Saturday, 13 July 13

Slide 12

Slide 12 text

www.reasondigital.com @miss_jwo The Principles 11 Saturday, 13 July 13

Slide 13

Slide 13 text

www.reasondigital.com @miss_jwo 1. Understand the system 12 Saturday, 13 July 13

Slide 14

Slide 14 text

www.reasondigital.com @miss_jwo Think about where the problem may be Database? PHP Javascript / CSS / HTML User issue? Server issue? 13 Saturday, 13 July 13

Slide 15

Slide 15 text

www.reasondigital.com @miss_jwo codex.wordpress.org/ Working_with_WordPress 14 Saturday, 13 July 13

Slide 16

Slide 16 text

www.reasondigital.com @miss_jwo 15 Saturday, 13 July 13

Slide 17

Slide 17 text

www.reasondigital.com @miss_jwo 2. Make it fail 16 Saturday, 13 July 13

Slide 18

Slide 18 text

www.reasondigital.com @miss_jwo 3. Quit thinking and look 17 Saturday, 13 July 13

Slide 19

Slide 19 text

www.reasondigital.com @miss_jwo 4. Divide & Conquer 18 Saturday, 13 July 13

Slide 20

Slide 20 text

www.reasondigital.com @miss_jwo /* Javascript */ var foo = 'hello world'; alert(foo); console.log(foo); 19 Saturday, 13 July 13

Slide 21

Slide 21 text

www.reasondigital.com @miss_jwo 20 Saturday, 13 July 13

Slide 22

Slide 22 text

www.reasondigital.com @miss_jwo 21 Saturday, 13 July 13

Slide 23

Slide 23 text

www.reasondigital.com @miss_jwo 22 Saturday, 13 July 13

Slide 24

Slide 24 text

www.reasondigital.com @miss_jwo /* PHP */ $foo = 'hello php code'; var_dump($foo); die($foo); 23 Saturday, 13 July 13

Slide 25

Slide 25 text

www.reasondigital.com @miss_jwo /* PHP */ var_dump('line2'); var_dump(wp_is_mobile()); die($variable); 24 Saturday, 13 July 13

Slide 26

Slide 26 text

www.reasondigital.com @miss_jwo 25 Saturday, 13 July 13

Slide 27

Slide 27 text

www.reasondigital.com @miss_jwo 26 Saturday, 13 July 13

Slide 28

Slide 28 text

www.reasondigital.com @miss_jwo 27 Saturday, 13 July 13

Slide 29

Slide 29 text

www.reasondigital.com @miss_jwo 28 Saturday, 13 July 13

Slide 30

Slide 30 text

www.reasondigital.com @miss_jwo 5. Change one thing at a time 29 Saturday, 13 July 13

Slide 31

Slide 31 text

www.reasondigital.com @miss_jwo 6. Keep an audit trail 30 Saturday, 13 July 13

Slide 32

Slide 32 text

www.reasondigital.com @miss_jwo 31 Saturday, 13 July 13

Slide 33

Slide 33 text

www.reasondigital.com @miss_jwo 7. Check the plug 32 Saturday, 13 July 13

Slide 34

Slide 34 text

www.reasondigital.com @miss_jwo 8. Get a fresh view 33 Saturday, 13 July 13

Slide 35

Slide 35 text

www.reasondigital.com @miss_jwo 9. If you didn’t ﬁx it , it is not ﬁxed. 34 Saturday, 13 July 13

Slide 36

Slide 36 text

www.reasondigital.com @miss_jwo Tools & Methods 35 Saturday, 13 July 13

Slide 37

Slide 37 text

www.reasondigital.com @miss_jwo HTML Check diﬀerent browsers / machines Validate the source code at W3C Clear the cache Write text into your ﬁle Inspect the element 36 Saturday, 13 July 13

Slide 38

Slide 38 text

www.reasondigital.com @miss_jwo CSS Check diﬀerent browsers / machines Validate the source code at W3C Clear the cache Inspect the element Colour the target a crazy colour 37 Saturday, 13 July 13

Slide 39

Slide 39 text

www.reasondigital.com @miss_jwo PHP deﬁne('WP_DEBUG', true); error_reporting(E_ALL); ini_set('display_errors', 1); XDebug 38 Saturday, 13 July 13

Slide 40

Slide 40 text

www.reasondigital.com @miss_jwo /* PHP */ 39 Saturday, 13 July 13

Slide 41

Slide 41 text

www.reasondigital.com @miss_jwo Rubber Duck Debugging upload.wikimedia.org/wikipedia/commons/d/d5/ Rubber_duck_assisting_with_debugging.jpg 40 Saturday, 13 July 13

Slide 42

Slide 42 text

www.reasondigital.com @miss_jwo Questions? 41 Saturday, 13 July 13

Slide 43

Slide 43 text

www.reasondigital.com @miss_jwo @miss_jwo [email protected] Ask me later: (Feedback would be awesome) t: e: 42 Saturday, 13 July 13

Slide 44

Slide 44 text

43 Saturday, 13 July 13