Skip to content

Latest commit

 

History

History
286 lines (206 loc) · 7.34 KB

index.md

File metadata and controls

286 lines (206 loc) · 7.34 KB


## Webinar: Tips and Tricks for Developing and Debugging Apps Kelly Hutchins and Heather Gonzago

Ever have one of those days where nothing seems to work?

You keep staring at the same code, but you have nothing...

Debugging tools === Productive programmers



Slides and demos can be accessed at:

https://github.com/hgonzago/tips-tricks-webinar

Things we'll discuss


- Setting up your development environment - Troubleshoot web application - Popular browser developer tools - Give us your questions



Setting up your development environment

JavaScript IDE/Source code editor


- Lots of choices - Atom, Brackets, WebStorm, Sublime, VSCode - Debugging support - Extensions

Extensions

  • Beautify, Prettier
  • EsLint
  • Bracket colorizer
  • Themes,
  • GitLens

Extension Demo

Programming font


- Ligatures - Fira Code, Hasklig, Cascadia

Code snippets


example

- Templates for reuseable code - [ArcGIS API for JavaScript snippets](https://marketplace.visualstudio.com/items?itemName=Esri.arcgis-jsapi-snippets&ssr=false#overview) - [Snippet generator](https://pawelgrzybek.com/snippet-generator/)

** Emmet**

  • Emmet
  • Save keystrokes
  • HTML, CSS abbreviations
  • Plug-in page

TypeScript/Babel


- Code assist - ES6 - TypeScript setup

Local web server


- Setup IIS or Apache - Visit [http://localhost](http://localhost) - Local dev server with live reload: - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - [local-web-server](https://www.npmjs.com/package/local-web-server) - [http-server](https://www.npmjs.com/package/http-server) ----

** Starter App **




Troubleshooting your web application

Narrow down the problem


  • Is the problem with how the code is written?
  • Is the issue on the client (API) or server?
  • Is there a performance issue?
  • Is the issue with the data?

Browser developer tools

Debugging: Code issues


- Common examples of application-level problems: - Modules out of order - View, Map, Layer not ready - Typos (yes, it happens quite often)

Modules out of order

Multiple errors can stem from wrong module order

Not getting the results you expect

  • Has the view containing the map fully loaded before executing code?
  • Has the layer fully loaded before performing specific functions?
  • Wrap problem areas in try/catch statements for troubleshooting
 
// Create a MapView instance (for 2D viewing)
var view = new MapView({
  map: myMap,  // References a Map instance
  container: "viewDiv"  // References the ID of a DOM element
});

view.when(function(){
 // All the resources in the MapView and the map have loaded. Now execute additional processes
}, function(error){
 // Use the errback function to handle when the view doesn't load properly
 console.log("The view's resources failed to load: ", error);
});

Demo: Debugging code using breakpoints

** Debugging: Network requests**


  • Records all network requests
  • Inspect network traffic, e.g.
    • Search widget not displaying properly
    • GP task not executing as expected
    • Querying layer features


### Demo: Network requests

Console and CSS

Console: Log Messages

  • Log your own messages
  • Warning message logged by JSAPI

Console: Run JavaScript

  • Execute JavaScript
  • Check values of objects at an app breakpoint

CSS: Color Themes


- Detect user color scheme preferences - CSS media feature (light, dark, no-preference) - Emulate via dev tools

CSS: Inspect Styles


- Inspect element css - View classes applied to selected element

- View widget styles

## Questions?

- [https://github.com/hgonzago/tips-tricks-webinar](https://github.com/hgonzago/tips-tricks-webinar) - [ArcGIS API for JavaScript Snippets](https://github.com/hgonzago/tips-tricks-webinar) - [ArcGIS API for JavaScript Guide topic - TypeScript setup](https://developers.arcgis.com/javascript/latest/guide/typescript-setup/)