Debugging Your Ext JS Code
•Download as KEY, PDF•
1 like•4,451 views
To err is human, to code flawlessly is divine. During this session, you'll learn how to debug your JavaScript, Data, and Ext JS based applications using commonly available tools and advanced insight into the Ext JS component framework and life-cycle.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Debugging Your Ext JS Code
Similar to Debugging Your Ext JS Code (20)
More from Sencha
More from Sencha (20)
Recently uploaded
Recently uploaded (20)
Debugging Your Ext JS Code
- 2. Debugging Your Ext JS Code Aaron Conran, SENCHA Jarred Nicholls, SENCHA
- 3. Agenda
- 4. Agenda Fundamentals of JavaScript Debugging Explore JavaScript Debugging Tools
- 6. If this was SenchaCon
- 7. If this was SenchaCon We’d like IE 6 (because it didn’t exist!) We’d think Java and JavaScript were somehow related We’d give up debugging our JavaScript and play Counter-Strike instead alert() was our best (and only) friend
- 8. We’ve Come a Long Way
- 9. Investigating The Tools
- 10. Web Inspector
- 11. Elements View current DOM state Searching View/Modify styles dynamically
- 12. Scripts Tab
- 13. Scripts Breakpoints, step line by line Call stack Inspect locals
- 14. Web Inspector DOM & CSS Inspector Resource & Network Inspector Script Debugging - (Conditional) Breakpoints - Step Execution - Watch Expressions - Stack Tracing Script Console Performance Profiling & Auditing Storage Management
- 15. Resources Tab
- 16. Resources Loading time/size Load information Filtering
- 17. Firebug
- 18. Firebug DOM & CSS Inspector Resource & Network Inspector Script Debugging - (Conditional) Breakpoints - Step Execution - Watch Expressions - Stack Tracing Script Console JavaScript Profiling
- 21. Illumination for Add-on to Firebug Component Inspector - Properties - Events - HTML - Ext.Elements - Styles Data Store Inspector - Records - Fields Ext JS & Sencha Touch Support Commercial - Trial Version available now
- 23. JSLint Global variables Trailing commas Unreachable code Required blocks Many more
- 24. Common Javascript Oversights
- 25. No Compiler Case sensitivity matters Check spelling Declare variables Reserved words
- 26. Truthy & Falsey No need for explicit true === does not perform type coercion null/undefined are different!
- 28. Language No block level scope Prototypal inheritance Higher order functions
- 29. Did we include all of our files? Simple Mistakes
- 30. Did we Are they the include all of right files? our files? Simple Mistakes
- 31. Did we Are they the include all of right files? our files? Simple Mistakes Did they actually load & execute?
- 32. Did we Are they the include all of right files? our files? Simple Mistakes Did they Are they in actually load the correct & execute? order?
- 33. Files? No Files Here...
- 35. Spleling Misteaks Tpyos
- 36. Spleling Case Misteaks Sensitivity Tpyos
- 37. Spleling Case Misteaks Sensitivity Tpyos Fat Fingers
- 38. Spleling Case Misteaks Sensitivity Tpyos Fat Fingers if (num = 5)
- 40. this.el is undefined Timing
- 41. this.el is undefined Timing store.load(); store.getCount();
- 42. “Oh no! We’re out of scope!”
- 43. Event Handlers Scope
- 44. Event Callback Handlers Methods Scope
- 45. Event Callback Handlers Methods Scope Blocks (e.g., Ext.each)
- 47. Always use ext-(base| all)-debug.js
- 48. Data
- 49. Loading Data Is the url correct? Did the request complete? Was the data valid? Does the Model match the Component
- 50. Event Driven Model Ajax – ASYNCHRONOUS Execution doesn't stop Must use appropriate callbacks
- 51. Layouts
- 52. Overnesting Implicit layouts Carousel, TabPanel Panels with no layout
- 53. Dynamic Layouts Apply dimensions correctly Remember to call doLayout/doComponentLayout
- 54. Events & Scoping
- 55. Are you listening? Capture – All events on an instance Observe – Specific events on all instances
- 56. What is “this”? Contextual Information Handlers Callbacks Blocks (Ext.each)
- 57. General Tips
- 58. Use The Right Files sencha-touch.js Minified, Compressed sencha-touch-debug.js White space, comments intact
- 59. Getting Further Help Read the documentation (then read it again) Consult the source Write a test case Know how to ask for help
- 60. Common Problems
- 61. Typos “is not a constructor” xtype wrong?
- 62. Timing “this.el is undefined” Has the component rendered?
- 63. Scope “someVar is undefined” Did you pass a scope?
- 64. Missing ‘new’ this.addEvents is not a function
- 65. Happy Debugging!
Editor's Notes
- Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- We&#x2019;ve come a long way from those days...but we still make the same human errors as before.
- 86% run very current versions of WebKit. > 95% of web visitors Ubiquity.
- 86% run very current versions of WebKit. > 95% of web visitors Ubiquity.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- pretty stupid, right? these things happen all of the time, and before checking anything else, we make sure nothing stupid was accidentally done.
- it&#x2019;s easy to mistype something...also easily caught.
- it&#x2019;s easy to mistype something...also easily caught.
- it&#x2019;s easy to mistype something...also easily caught.
- it&#x2019;s easy to mistype something...also easily caught.
- Timing is everything
- Timing is everything
- Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal
- Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal
- Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
- opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.