Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri...
Transcript of Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri...
![Page 1: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/1.jpg)
Esri UC 2014 | Technical Workshop |
Effectively Debugging Web Applications Kelly Hutchins Matt Priour
![Page 2: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/2.jpg)
Esri UC 2014 | Technical Workshop |
Overview
- Prevention tips - Browser based debugging - Mobile application debugging - Gotchas
![Page 3: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/3.jpg)
Esri UC 2014 | Technical Workshop |
Text Editors
Type Presentation Title Here
![Page 4: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/4.jpg)
Esri UC 2014 | Technical Workshop |
Prevention • Code quality tools
- JSLint - JSHint
• The trailing comma problem
![Page 5: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/5.jpg)
Esri UC 2014 | Technical Workshop |
IDE integration
![Page 7: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/7.jpg)
Esri UC 2014 | Technical Workshop |
Beautifiers • Jsbeautifier.org • Cssbeautify.com • Plug-ins
![Page 8: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/8.jpg)
Esri UC 2014 | Technical Workshop |
Task automation • Automate tasks
- Linting - Beautify - Minification
• Grunt - http://gruntjs.com
• Gulp - http://github.com/gulpjs/gulp
![Page 9: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/9.jpg)
Esri UC 2014 | Technical Workshop |
Developer tools • Set breakpoints • Log information • View network traffic • Inspect CSS
![Page 10: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/10.jpg)
Esri UC 2014 | Technical Workshop |
Get the tools
• Firefox + Firebug • Chrome Developer Tools • IE
Type Presentation Title Here
![Page 11: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/11.jpg)
Esri UC 2014 | Technical Workshop |
CSS
• Inspect Elements • Modify on the fly • Save changes
Type Presentation Title Here
![Page 12: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/12.jpg)
Esri UC 2014 | Technical Workshop |
Box Model
Type Presentation Title Here
![Page 13: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/13.jpg)
Esri UC 2014 | Technical Workshop |
CSS Preprocessors
Type Presentation Title Here
![Page 14: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/14.jpg)
Esri UC 2014 | Technical Workshop |
Network
Type Presentation Title Here
![Page 15: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/15.jpg)
Esri UC 2014 | Technical Workshop |
Resources
• View application files • Prettify
Type Presentation Title Here
![Page 16: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/16.jpg)
Esri UC 2014 | Technical Workshop |
Storage
Type Presentation Title Here
![Page 17: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/17.jpg)
Esri UC 2014 | Technical Workshop |
Console
• Log info • Write commands
Type Presentation Title Here
![Page 18: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/18.jpg)
Esri UC 2014 | Technical Workshop |
Console Shortcuts
Type Presentation Title Here
![Page 19: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/19.jpg)
Esri UC 2014 | Technical Workshop | Esri UC 2014 | Technical Workshop |
Matt Priour
Breakpoint debugging and mobile
Type Presentation Title Here
![Page 20: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/20.jpg)
Esri UC 2014 | Technical Workshop |
Browser based mobile tools
• Emulation • Touch
![Page 21: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/21.jpg)
Esri UC 2014 | Technical Workshop |
Geolocation
![Page 22: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/22.jpg)
Esri UC 2014 | Technical Workshop | Esri UC 2014 | Technical Workshop |
Kelly Hutchins
Mobile Browser
Type Presentation Title Here
![Page 23: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/23.jpg)
Esri UC 2014 | Technical Workshop |
Mobile Browser Tools
Type Presentation Title Here
• Emulate device • Touch testing • Responsive
![Page 24: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/24.jpg)
Esri UC 2014 | Technical Workshop |
Geolocation
Type Presentation Title Here
![Page 25: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/25.jpg)
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
![Page 26: Effectively Debugging Web Applications€¦ · Effectively Debugging Web Applications Author: Esri Subject: 2014 Esri User Conference -- Technical Workshop Keywords: 2014 Esri User](https://reader033.fdocuments.us/reader033/viewer/2022051814/6039b4ffa27cc52368106859/html5/thumbnails/26.jpg)
Esri UC 2014 | Technical Workshop | Type Presentation Title Here