Demo scripts and code for Dev Summit 2015
To test these samples download the contents of the DevSummit2016-Gotchas and set them up to run on your web server. Index.html has details about the included code samples.
Browser based tools to track down issues, inspect css, analyze performance and more.
All of the browser based dev tools have similar capabilites. We'll explore how to use these options to find and fix issues in your web apps.
Check out Chrome Canary or Firefox Developer Edition to explore the latest browser features and experiments.
Run the demo app with the dev tools open and inspect the network traffic. View the request and response info.
Demo App: Query Task
Run the demo app with the dev tools open and view the console tab. Note there is a 'mixed-content' error due to the fact the the https page reqeusted some insecure content. To see details about which content is problematic click the Security tab (available in Chrome Dev Tools).
Demo App: Mixed Content Demo
Open the dev tools to the console tab and run the demo app. Using the console you can log diagnostic info and enter commands to interact with the app. In this sample map is a global variable so we can access properties via the console.
// Get the current map extent
map.geographicExtent
// Get the current map extent in JSON
JSON.stringify(map.geographicExtent)Demo App: Console Demo
Use dev tools to set breakpoints and step through your code. Set a breakpoint at line 94 of index.html. Use the tools to step through and inspect the code.
Demo App: Debug Demo
Use the Inspect Element tool to find out the css class names for widgets in the JSAPI.
Demo App: Directions
Use snippets to run longer bits of code - can be used to replace bookmarklets. Here are the three esri-related snippets shown in the presentation. Note that these require that map be a global variable. Get Extent Snippet
(function(){require(["dojo/json"],function(j){console.log(j.stringify(function(){var e=map.extent.toJson();e.xmin=parseInt(e.xmin);e.ymin=parseInt(e.ymin);e.xmax=parseInt(e.xmax);e.ymax=parseInt(e.ymax);return e;}()));})})();Get Center Snippet
(function(){
var c= map.geographicExtent.getCenter();
console.log([parseFloat(c.x.toFixed(3)), parseFloat(c.y.toFixed(3))]);
})();Get Zoom Snippet
map.getLevel();