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.

Transcript

1. July  2014  
2. Arthur  Kay   Developer  Relations  Mgr   Sencha,  Inc     www.akawebdesign.com   @arthurakay  
3. ¡  Sencha   ¡  Chrome  DevTools   ¡  Building  your  own  DevTools  extension   ¡  Example:  App  Inspector  for  Sencha  
4. At  a  glance...  
5. ¡  Founded  in  2007   ¡  Redwood  City,  CA   ¡  ~100  employees   ¡  VC  backed:   §  Sequoia  Captial   §  Jafco  Ventures   §  Radar  Partners  
6. ¡  2,000,000     developers  worldwide     ¡  10,000   commercial  customers   ¡  More  than  60%   of  the  Fortune  100  
7. ¡  Design   §  Sencha  Architect   ¡  Develop   §  Ext  JS   §  Sencha  Touch   ¡  Deploy   §  Sencha  Space  
8. !
10. ¡  First  released  in  2008   ¡  6  Week  release  cycles   ¡  Currently  v35  
11. ¡  Elements   ¡  Network   ¡  Sources   ¡  Resources   ¡  Console  
12. ¡  Audits   ¡  Timeline   ¡  Profiles   §  CPU   §  Heap  
13. ¡  Settings  >  Experiments   §  Layers   ¡  ESC  drawer   §  Emulation   §  Rendering   ¡  Sources   §  Pause  on  Exceptions   §  Async  call  stack   §  Watch  expressions  
14. Building  your  own  
15. ¡  Inspected  Window   §  Content  Scripts   ¡  Background  Page   ¡  DevTools  Page   §  Panels  
20. ¡  Inspected  Window   ¡  Background  Page   ¡  DevTools  Page  
21. ¡  content_security_policy   §  script-­‐src   §  object-­‐src   ¡  permissions   §  tabs   §  contextMenus   §  <all_urls>  
22. ¡  Monitor  page  refresh   ¡  One  background  page…   many  tabs!  
23. ¡  Elements  panel   ¡  App  Inspector  panel   §  chrome.devtools   .inspectedWindow.eval()  
24. ¡  chrome.devtools   .inspectedWindow.eval()   ¡  Various  utilities   §  Long  running  operations   §  requestAnimationFrame()  
26. ¡  https://developer.chrome.com/devtools/index   ¡  https://developer.chrome.com/extensions/devtools   ¡  http://www.sencha.com/blog/app-­‐inspector-­‐for-­‐ sencha-­‐touch-­‐and-­‐ext-­‐js-­‐developers/  
27. Arthur  Kay   Developer  Relations  Mgr   Sencha,  Inc     www.akawebdesign.com   @arthurakay