Weitere ähnliche Inhalte Ähnlich wie Debugging Your Ext JS Code (20) Kürzlich hochgeladen (20) Debugging Your Ext JS Code7. 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
11. Elements
View current DOM state
Searching
View/Modify styles dynamically
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
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
26. Truthy & Falsey
No need for explicit true
=== does not perform type coercion
null/undefined are different!
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?
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)
44. Event Callback
Handlers Methods
Scope
45. Event Callback
Handlers Methods
Scope
Blocks (e.g.,
Ext.each)
49. Loading Data
Is the url correct?
Did the request complete?
Was the data valid?
Does the Model match the
Component
53. Dynamic Layouts
Apply dimensions correctly
Remember to call doLayout/doComponentLayout
55. Are you listening?
Capture – All events on an instance
Observe – Specific events on all instances
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
63. Scope
“someVar is
undefined”
Did you pass a scope?
Hinweis der Redaktion
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.