Debugging JavaScript
Client side scripting
Outline
1. Debugging tools
a. Built-ins and beyond, but mostly built-ins

2. Fishbone diagram
3. Debugging workshop
Getting started with debugging JS
1. Brower built-ins
a. Chrome, Safari, Opera, Firefox, IE

2. Browser extension
a. Fireb...
The code we’ll be using
● index.html
○ Gluing it all together

● script.js
○ Declaration of our DebuggerExamples object

●...
Breaking the code - Statically
Static breakpoints using the debugger keyword
…
breakthru: function() {
// Queen
debugger;
...
Show me the code!
Breaking the code - Dynamically
Dynamic breakpoints

Best practice!
The pain of minified JavaScript
But my JavaScript is minified I can’t break in it?!

YES YOU CAN! :-)
The JavaScript GPS
● Navigate the code
● Get your position
● Breakpoints
○
○
○
○

Code
DOM
XHR
Event listener

?
The console.log command
● console.log('Most developers know this')
● console.log('And even ', this)
● console.log('What %s...
Some more console commands
Command

What is the result?

inspect

>inspect(document.body)

$0

>$0

$_

>$_

copy

>copy($...
Want to learn more?
●

Some resources
○
○

http://www.paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
...
Fishbone diagram
● Other name: Ishikawa diagram.
● Used for cause and effect analysis.
Fishbone diagram (2)
Fishbone diagram (3)
1.
2.
3.
4.

Collect all the effect of the errors.
With each effect, identify all the possible causes...
Pros for using the process?
● Help you to have an overview of the
problem.
● Easier to call for help, as well as better
co...
Cons
Take times….
Questions?
Workshop
Problem #1

http://jsfiddle.net/jECLf/1/
Problem #2

http://jsfiddle.net/t45UM/
Problem #3

http://jsfiddle.net/Q7vhS/embedded/result/

http://jsfiddle.net/Q7vhS/

What is the problem, and how to fix?
Problem #4
var elements = [1,2,3,4,5,6,7,8,9];

I want to create a grid with 3 elements
in each row. This code relies on
j...
References
●

http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/

●

http://tobyho.com/2011/11/09/life-witho...
Presentation made for “Javascript
Ho Chi Minh City” meetup group
You
●
●
●

can find us at:
http://meetup.com/JavaScript-H...
Thank you
Upcoming SlideShare
Loading in …5
×

Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )

1,251 views

Published on

Topic: Debugging JavaScript through Developer Tools in Google Chrome, FireBug in FireFox, and on Safari

-

Speakers:

Thomas Bindzus, Founder, Vinagility

Thanh Loc Vo, CTO, Epsilon Mobile

Published in: Technology, Design
  • Thank you for an informative slideshow. It's a pity that I couldn't join the meetup. I love Chrome DevTools and really enjoy debugging Javascript with that. Here is something I would share if I had joined then: http://karmiphuc.com/cong-nghe/4-tricks-to-debug-javascript-like-pro/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )

  1. 1. Debugging JavaScript Client side scripting
  2. 2. Outline 1. Debugging tools a. Built-ins and beyond, but mostly built-ins 2. Fishbone diagram 3. Debugging workshop
  3. 3. Getting started with debugging JS 1. Brower built-ins a. Chrome, Safari, Opera, Firefox, IE 2. Browser extension a. Firebug (lite) (Firefox, IE6+, Opera, Safari, Chrome) 3. External debugger application a. Weinre BIAS ALERT!!
  4. 4. The code we’ll be using ● index.html ○ Gluing it all together ● script.js ○ Declaration of our DebuggerExamples object ● style.css ○ Nothing stylish :-)
  5. 5. Breaking the code - Statically Static breakpoints using the debugger keyword … breakthru: function() { // Queen debugger; … } … Don’t do this!
  6. 6. Show me the code!
  7. 7. Breaking the code - Dynamically Dynamic breakpoints Best practice!
  8. 8. The pain of minified JavaScript But my JavaScript is minified I can’t break in it?! YES YOU CAN! :-)
  9. 9. The JavaScript GPS ● Navigate the code ● Get your position ● Breakpoints ○ ○ ○ ○ Code DOM XHR Event listener ?
  10. 10. The console.log command ● console.log('Most developers know this') ● console.log('And even ', this) ● console.log('What %s this %d?', 'about', 1) ● What is the output?!
  11. 11. Some more console commands Command What is the result? inspect >inspect(document.body) $0 >$0 $_ >$_ copy >copy($_) dir >dir($0) Bonus question (given that jQuery is present): clear >clear() >inspect($)
  12. 12. Want to learn more? ● Some resources ○ ○ http://www.paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ ○ http://www.paulirish.com/2011/quick-color-manipulation-with-the-chrome-devtools/ ○ http://www.randomthink.net/blog/2012/11/breakpoint-actions-in-javascript/ ○ http://www.youtube.com/watch?v=nOEw9iiopwI ○ ● https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be And of course much of the same is possible in Firebug ○ http://lmgtfy.com/?q=Firebug+tips+and+tricks
  13. 13. Fishbone diagram ● Other name: Ishikawa diagram. ● Used for cause and effect analysis.
  14. 14. Fishbone diagram (2)
  15. 15. Fishbone diagram (3) 1. 2. 3. 4. Collect all the effect of the errors. With each effect, identify all the possible causes. Analyze the causes, just to group and prioritize them. Pick a cause from the list in prioritized order, make a solution, then implement it. 5. If the error wasn’t been solved, back to step #4.
  16. 16. Pros for using the process? ● Help you to have an overview of the problem. ● Easier to call for help, as well as better collaboration. ● When you can’t discover the issue, you My code broke, and I don’t know why... know why.
  17. 17. Cons Take times….
  18. 18. Questions?
  19. 19. Workshop
  20. 20. Problem #1 http://jsfiddle.net/jECLf/1/
  21. 21. Problem #2 http://jsfiddle.net/t45UM/
  22. 22. Problem #3 http://jsfiddle.net/Q7vhS/embedded/result/ http://jsfiddle.net/Q7vhS/ What is the problem, and how to fix?
  23. 23. Problem #4 var elements = [1,2,3,4,5,6,7,8,9]; I want to create a grid with 3 elements in each row. This code relies on jQuery, but there is something wrong, $(elements).each(function(i, e) { can you spot it? var row; if (i % 3 == 0) { row = $('<div>').appendTo('body'); } $('<span>' + e + '</span>').appendTo(row); });
  24. 24. References ● http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/ ● http://tobyho.com/2011/11/09/life-without-compiler/ ● http://tobyho.com/2011/11/11/js-object-inheritance/ ● http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making/ ● http://nullprogram.com/blog/2012/11/19/ ● http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html
  25. 25. Presentation made for “Javascript Ho Chi Minh City” meetup group You ● ● ● can find us at: http://meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC https://plus.google. com/communities/116105314977285194967
  26. 26. Thank you

×