• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Debugging Your Ext JS Code
 

Debugging Your Ext JS Code

on

  • 4,070 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 ...

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.

Statistics

Views

Total Views
4,070
Views on SlideShare
3,974
Embed Views
96

Actions

Likes
1
Downloads
135
Comments
0

2 Embeds 96

http://www.sencha.com 95
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • Advanced Techniques Getting around what Designer can&#x2019;t do at the moment. <br />
  • Advanced Techniques Getting around what Designer can&#x2019;t do at the moment. <br />
  • Advanced Techniques Getting around what Designer can&#x2019;t do at the moment. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • We&#x2019;ve come a long way from those days...but we still make the same human errors as before. <br />
  • <br />
  • <br />
  • <br />
  • 86% run very current versions of WebKit. <br /> > 95% of web visitors <br /> Ubiquity. <br />
  • <br />
  • <br />
  • 86% run very current versions of WebKit. <br /> > 95% of web visitors <br /> Ubiquity. <br />
  • <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • pretty stupid, right? these things happen all of the time, and before checking anything else, we make sure nothing stupid was accidentally done. <br />
  • <br />
  • <br />
  • it&#x2019;s easy to mistype something...also easily caught. <br />
  • it&#x2019;s easy to mistype something...also easily caught. <br />
  • it&#x2019;s easy to mistype something...also easily caught. <br />
  • it&#x2019;s easy to mistype something...also easily caught. <br />
  • <br />
  • Timing is everything <br />
  • Timing is everything <br />
  • <br />
  • Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal <br />
  • Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal <br />
  • Scope is sometimes easily forgotten, but again, it&#x2019;s pretty easy to catch &#x201C;this.whatever is not defined&#x201D; is a signal <br />
  • <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • <br />
  • <br />
  • opacity, corners, shadows, gradients &#x2014;&#xA0;rotate, scale, depth, hardware accelerated. <br /> Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Debugging Your Ext JS Code Debugging Your Ext JS Code Presentation Transcript

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