Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debugging your Apps with Google Chrome and Sencha

Debugging your Apps with Google Chrome and Sencha

Debugging enterprise JavaScript applications historically been a huge pain in the neck.

Thankfully the developer tools in most modern browsers have matured and make inspecting application logic easier than ever. Google Chrome in particular has a rich set of debugging tools, which can be further complimented with Chrome Extensions.

Join Arthur Kay, Developer Relations Manager at Sencha, as he discusses the Sencha platform, explains how Sencha built App Inspector for Sencha, and dives into techniques for building your own debugging extensions for Google Chrome.

Arthur Kay

July 22, 2014
Tweet

More Decks by Arthur Kay

Other Decks in Programming

Transcript

  1. Arthur  Kay   Developer  Relations  Mgr   Sencha,  Inc  

      www.akawebdesign.com   @arthurakay  
  2. ¡  Sencha   ¡  Chrome  DevTools   ¡  Building  your

     own  DevTools  extension   ¡  Example:  App  Inspector  for  Sencha  
  3. ¡  Founded  in  2007   ¡  Redwood  City,  CA  

    ¡  ~100  employees   ¡  VC  backed:   §  Sequoia  Captial   §  Jafco  Ventures   §  Radar  Partners  
  4. ¡  2,000,000     developers  worldwide     ¡  10,000

      commercial  customers   ¡  More  than  60%   of  the  Fortune  100  
  5. ¡  Design   §  Sencha  Architect   ¡  Develop  

    §  Ext  JS   §  Sencha  Touch   ¡  Deploy   §  Sencha  Space  
  6. !

  7. ¡  Settings  >  Experiments   §  Layers   ¡  ESC

     drawer   §  Emulation   §  Rendering   ¡  Sources   §  Pause  on  Exceptions   §  Async  call  stack   §  Watch  expressions  
  8. ¡  Inspected  Window   §  Content  Scripts   ¡  Background

     Page   ¡  DevTools  Page   §  Panels  
  9. ¡  content_security_policy   §  script-­‐src   §  object-­‐src   ¡ 

    permissions   §  tabs   §  contextMenus   §  <all_urls>  
  10. ¡  chrome.devtools   .inspectedWindow.eval()   ¡  Various  utilities   § 

    Long  running  operations   §  requestAnimationFrame()  
  11. Arthur  Kay   Developer  Relations  Mgr   Sencha,  Inc  

      www.akawebdesign.com   @arthurakay