Esri UC 2014 | Technical Workshop |
Effectively Debugging Web Applications Kelly Hutchins Matt Priour
Esri UC 2014 | Technical Workshop |
Overview
- Prevention tips - Browser based debugging - Mobile application debugging - Gotchas
Esri UC 2014 | Technical Workshop |
Text Editors
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Prevention • Code quality tools
- JSLint - JSHint
• The trailing comma problem
Esri UC 2014 | Technical Workshop |
IDE integration
Esri UC 2014 | Technical Workshop |
Beautifiers • Jsbeautifier.org • Cssbeautify.com • Plug-ins
Esri UC 2014 | Technical Workshop |
Task automation • Automate tasks
- Linting - Beautify - Minification
• Grunt - http://gruntjs.com
• Gulp - http://github.com/gulpjs/gulp
Esri UC 2014 | Technical Workshop |
Developer tools • Set breakpoints • Log information • View network traffic • Inspect CSS
Esri UC 2014 | Technical Workshop |
Get the tools
• Firefox + Firebug • Chrome Developer Tools • IE
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
CSS
• Inspect Elements • Modify on the fly • Save changes
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Box Model
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
CSS Preprocessors
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Network
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Resources
• View application files • Prettify
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Storage
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Console
• Log info • Write commands
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Console Shortcuts
Type Presentation Title Here
Esri UC 2014 | Technical Workshop | Esri UC 2014 | Technical Workshop |
Matt Priour
Breakpoint debugging and mobile
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Browser based mobile tools
• Emulation • Touch
Esri UC 2014 | Technical Workshop |
Geolocation
Esri UC 2014 | Technical Workshop | Esri UC 2014 | Technical Workshop |
Kelly Hutchins
Mobile Browser
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Mobile Browser Tools
Type Presentation Title Here
• Emulate device • Touch testing • Responsive
Esri UC 2014 | Technical Workshop |
Geolocation
Type Presentation Title Here
Esri UC 2014 | Technical Workshop |
Thank you…
• Please fill out the session survey:
First Offering ID: 1334 Second Offering ID: 1427
Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box
Type Presentation Title Here
Esri UC 2014 | Technical Workshop | Type Presentation Title Here