Debugging Your Ext JS Code

5,338 views
5,136 views

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,338
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
179
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.
  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.
  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.







  • We’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 — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.



  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.

  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients — 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’s easy to mistype something...also easily caught.
  • it’s easy to mistype something...also easily caught.
  • it’s easy to mistype something...also easily caught.
  • it’s easy to mistype something...also easily caught.

  • Timing is everything
  • Timing is everything

  • Scope is sometimes easily forgotten, but again, it’s pretty easy to catch “this.whatever is not defined” is a signal
  • Scope is sometimes easily forgotten, but again, it’s pretty easy to catch “this.whatever is not defined” is a signal
  • Scope is sometimes easily forgotten, but again, it’s pretty easy to catch “this.whatever is not defined” is a signal



  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.


  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.



  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.









  • Debugging Your Ext JS Code

    1. 1. Debugging Your Ext JS Code Aaron Conran, SENCHA Jarred Nicholls, SENCHA
    2. 2. Agenda
    3. 3. Agenda Fundamentals of JavaScript Debugging Explore JavaScript Debugging Tools
    4. 4. A Little History
    5. 5. If this was SenchaCon
    6. 6. 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
    7. 7. We’ve Come a Long Way
    8. 8. Investigating The Tools
    9. 9. Web Inspector
    10. 10. Elements View current DOM state Searching View/Modify styles dynamically
    11. 11. Scripts Tab
    12. 12. Scripts Breakpoints, step line by line Call stack Inspect locals
    13. 13. 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
    14. 14. Resources Tab
    15. 15. Resources Loading time/size Load information Filtering
    16. 16. Firebug
    17. 17. Firebug DOM & CSS Inspector Resource & Network Inspector Script Debugging - (Conditional) Breakpoints - Step Execution - Watch Expressions - Stack Tracing Script Console JavaScript Profiling
    18. 18. Console Interactive commands log()/warn()/error() Counting/Grouping
    19. 19. Illumination for Developers
    20. 20. 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
    21. 21. JSLint Code quality tool
    22. 22. JSLint Global variables Trailing commas Unreachable code Required blocks Many more
    23. 23. Common Javascript Oversights
    24. 24. No Compiler Case sensitivity matters Check spelling Declare variables Reserved words
    25. 25. Truthy & Falsey No need for explicit true === does not perform type coercion null/undefined are different!
    26. 26. Closures Variable Binding Variable Shadowing
    27. 27. Language No block level scope Prototypal inheritance Higher order functions
    28. 28. Did we include all of our files? Simple Mistakes
    29. 29. Did we Are they the include all of right files? our files? Simple Mistakes
    30. 30. Did we Are they the include all of right files? our files? Simple Mistakes Did they actually load & execute?
    31. 31. 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?
    32. 32. Files? No Files Here...
    33. 33. Spleling Misteaks Tpyos
    34. 34. Spleling Case Misteaks Sensitivity Tpyos
    35. 35. Spleling Case Misteaks Sensitivity Tpyos Fat Fingers
    36. 36. Spleling Case Misteaks Sensitivity Tpyos Fat Fingers if (num = 5)
    37. 37. this.el is undefined Timing
    38. 38. this.el is undefined Timing store.load(); store.getCount();
    39. 39. “Oh no! We’re out of scope!”
    40. 40. Event Handlers Scope
    41. 41. Event Callback Handlers Methods Scope
    42. 42. Event Callback Handlers Methods Scope Blocks (e.g., Ext.each)
    43. 43. Ext Specific Debugging
    44. 44. Always use ext-(base| all)-debug.js
    45. 45. Data
    46. 46. Loading Data Is the url correct? Did the request complete? Was the data valid? Does the Model match the Component
    47. 47. Event Driven Model Ajax – ASYNCHRONOUS Execution doesn't stop Must use appropriate callbacks
    48. 48. Layouts
    49. 49. Overnesting Implicit layouts Carousel, TabPanel Panels with no layout
    50. 50. Dynamic Layouts Apply dimensions correctly Remember to call doLayout/doComponentLayout
    51. 51. Events & Scoping
    52. 52. Are you listening? Capture – All events on an instance Observe – Specific events on all instances
    53. 53. What is “this”? Contextual Information Handlers Callbacks Blocks (Ext.each)
    54. 54. General Tips
    55. 55. Use The Right Files sencha-touch.js Minified, Compressed sencha-touch-debug.js White space, comments intact
    56. 56. Getting Further Help Read the documentation (then read it again) Consult the source Write a test case Know how to ask for help
    57. 57. Common Problems
    58. 58. Typos “is not a constructor” xtype wrong?
    59. 59. Timing “this.el is undefined” Has the component rendered?
    60. 60. Scope “someVar is undefined” Did you pass a scope?
    61. 61. Missing ‘new’ this.addEvents is not a function
    62. 62. Happy Debugging!

    ×