Your SlideShare is downloading. ×
  • Like
Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 478 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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/
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
478
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Debugging JavaScript Client side scripting
  • 2. Outline 1. Debugging tools a. Built-ins and beyond, but mostly built-ins 2. Fishbone diagram 3. Debugging workshop
  • 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. The code we’ll be using ● index.html ○ Gluing it all together ● script.js ○ Declaration of our DebuggerExamples object ● style.css ○ Nothing stylish :-)
  • 5. Breaking the code - Statically Static breakpoints using the debugger keyword … breakthru: function() { // Queen debugger; … } … Don’t do this!
  • 6. Show me the code!
  • 7. Breaking the code - Dynamically Dynamic breakpoints Best practice!
  • 8. The pain of minified JavaScript But my JavaScript is minified I can’t break in it?! YES YOU CAN! :-)
  • 9. The JavaScript GPS ● Navigate the code ● Get your position ● Breakpoints ○ ○ ○ ○ Code DOM XHR Event listener ?
  • 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. 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. 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. Fishbone diagram ● Other name: Ishikawa diagram. ● Used for cause and effect analysis.
  • 14. Fishbone diagram (2)
  • 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. 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. Cons Take times….
  • 18. Questions?
  • 19. Workshop
  • 20. Problem #1 http://jsfiddle.net/jECLf/1/
  • 21. Problem #2 http://jsfiddle.net/t45UM/
  • 22. Problem #3 http://jsfiddle.net/Q7vhS/embedded/result/ http://jsfiddle.net/Q7vhS/ What is the problem, and how to fix?
  • 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. 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. 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. Thank you