Downloaded 21 times
![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);
});](https://image.slidesharecdn.com/debuggingjavascript-131127111115-phpapp02/75/Debugging-JavaScript-by-Thomas-Bindzus-Founder-Vinagility-Thanh-Loc-Vo-CTO-Epsilon-Mobile-23-2048.jpg)
Uploaded byJavaScript Meetup HCMC
Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )
The document outlines debugging techniques for JavaScript client-side scripting, covering tools like browser built-ins, extensions, and external applications. It introduces a fishbone diagram for cause-and-effect analysis in debugging, as well as various best practices for setting breakpoints and using console commands. Additionally, it provides workshop problems for practical application and offers links for further learning resources.
More Related Content
Similar to Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )
![Class[3][5th jun] [three js]](https://cdn.slidesharecdn.com/ss_thumbnails/class35thjun-threejs-210609051622-thumbnail.jpg?width=640&height=640&fit=bounds)
![Writing testable js [by Ted Piotrowski]](https://cdn.slidesharecdn.com/ss_thumbnails/writingtestablejs-140722232350-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Js hcm] Java script- Testing the awesome](https://cdn.slidesharecdn.com/ss_thumbnails/js-hcmjavascript-testingtheawesome-2014-140305000220-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Debugging JavaScript (by Thomas Bindzus, Founder, Vinagility & Thanh Loc Vo, CTO, Epsilon Mobile )
- 1. Debugging JavaScript Client sidescripting
- 2. Outline 1. Debugging tools a.Built-ins and beyond, but mostly built-ins 2. Fishbone diagram 3. Debugging workshop
- 3. Getting started withdebugging 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’llbe 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 thecode!
- 7. Breaking the code- Dynamically Dynamic breakpoints Best practice!
- 8. The pain ofminified 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 consolecommands 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 learnmore? ● 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 ● Othername: Ishikawa diagram. ● Used for cause and effect analysis.
- 14.
- 15. Fishbone diagram (3) 1. 2. 3. 4. Collectall 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 usingthe 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.
- 18.
- 19.
- 20.
- 21.
- 22. Problem #3 http://jsfiddle.net/Q7vhS/embedded/result/ http://jsfiddle.net/Q7vhS/ What isthe 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.
- 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.