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 |

Github JSAPI Resources

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