SenchaCon Day3: Debugging SenchaTouch

Evan Trimboli and Tommy Maintz give this talk.

Common JS Gotchas:

  • No compiler so all errors at runtime.  Be sure you check case and check spelling. Declare variables in the appropriate scope by declaring vars at the top of a function to avoid accidental local vars.  Careful using reserved words like “class”.
  • Truthiness & Equality: in JS there’s multiple ways things can be true/false rather than explicit.  Type coercion not performed by “===”.  Note: null/undefined are different (e.g., undefined means it doesn’t exist).
  • Closure you have to check for variable binding (outside the closure) and variable shadowing (response is an example in an ajax call).
  • No block scope only function scope (e.g., a variable in an IF block is global to the function)
  • Prototypal inheritance
  • Higher Order Functions can be passed to functions and be variables.

Tools to Debug

Chrome Debugger

  • Elements screen to look at position in DOM, see styles and their precedence. You can search for DOM ids and modify styles dynamically.
  • Scripts screen allows you to debug and view local and global variables. You can look at the call stack and set conditional breakpoints.
  • Resources screen shows size and time it took to load various artifacts that come over HTTP or XHR.
  • Console screen allows interactive commands and use log(), warn() and error() to log to the console

JSLint

  • Code Quality Tool to check for undefined or inadvertently declared global vars, required blocking, unreachable code, trailing commas and much more.

RemoteJS

  • Made by Webkit staff on Sencha team to help debug Android devices (on Github and blog).

Sencha Touch Specifics

On Data

  • Is the URL correct?? Did the request complete?? Is data valid??
  • Does the model align with the Component (from JSON for example).

Event Driven Model

  • Use appropriate callbacks
  • Remember that things are typically async

Overnesting

  • Panels with no layout
  • Specify layouts instead (be sure to specify layouts for Panel and use “fit”).  Use the DOM view in the Chrome debugger to see if elements have the correct height (common mistake is that they’ll be zero).

Dynamic Layouts

  • Remember doLayout and doComponent to reset layout after changes to the component

What is “this”

  • Log console.log(this) to be sure you’re dealing with the right object especially in callbacks and handlers.  You may not be in the right context.
  • All callbacks allow you to specify scope

Event Handling

  • Use capture and observe to check events.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s