Chrome/Vivaldi has the best set of developer tools of the available browsers in the labs, so we will be using this as the primary browser for developing the web site.  Vivaldi (which is what we use in the Linux lab) is base on Chrome.

 1. Hit <<keys "F12">> in Chrome/Vivaldi to bring up the developer tools.

 2. Click somewhere inside the developer tools pane to give it focus, and hit <<keys "F1">> to bring up the settings.

 3. In the <<menu "Sources">> section, untick <<menu "Enable JavaScript source maps">> and <<menu "Enable CSS source maps">>.  Source maps allow the tools to work with minified code. We won't be using minification and having these settings enabled means that Chrome will be asking our server for a bunch of map files that we don't have which will cause a lot of 404 errors to appear in the output. This is annoying, so we are disabling it.

    If you are wondering what minification is, it is when the code is processed to shrink all of the variable and function names and all unneeded white space is removed. This significantly reduces the amount of bandwidth required to send the files overs the internet, but makes them unusable to developers. Map files effectively allow the developer tools to reverse the minification process. Our code is not minified, so we don't need to use map files.

 4. In the <<menu "Network">> section, tick <<menu "Disable cache (while DevTools is open)">>. We don't ever want to be testing our system using cached versions of files that don't include our most recent changes. 

      So long as we have the developer tools open we now know that we will always be looking at the latest versions.  You should get into the habit of keeping the developer tools, and more specifically the console open.  This allows you to see any errors that occur, in addition to disabling the cache.

 5. Under the <<menu "Console">> section, tick <<menu "Preserve log upon navigation">>. We will be doing a lot of client-side redirection so we don't want the messages to vanish every time the browser is redirected to a new page.

6. Also in the <<menu "Console">> section, tick <<menu "Log XMLHttpRequests">>. With this option enabled, the log will now show you when your JavaScript code is sending HTTP requests to the service.