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