If you find yourself doing in depth coding of questions it can be helpful to have the full flexibility of a debugging suite available. VScode is a code editor and can help 1) find common coding errors (missing brackets and missing semicolons) and/or 2) change one aspect of code (say, a variable or number) and have that aspect change everywhere in the problem.

Here is a suggested coding setup for the Chrome web-browser.

Table of Contents:

Basic Setup

1. Download and Install Visual Studio Code – Visual Studio Code is an Open Source IDE (Interactive Development Environment), in addition to being easier on the eyes than the internal Quest editor, it will allow more in depth debugging.
2. Go to the Extensions tab in VSC (headerbar, view, extensions), and install the debugger for Chrome (There is one available for Firefox as well, but debugging in Chrome is more reliable).

3. Download and unzip this configured workspace QuestVSCodeEnv.zip, the zip file contains a preconfigured workspace that can be used to emulate the Quest coding environment on your computer. This will enable greater debugging flexibility, as Visual Studio Code has a full debugging suite.

Included files:

1. QuestVSCodeEnv/ (Folder)
   
   1. .vscode/ (Hidden Folder)
      
      1. launch.json – This includes directions for VSCode to launch the code in Chrome and Firefox
   2. lib/ (Folder)
      1. math.js – This is the mathjs library, it is available on quest for better math support
      2. math.js.map – This contains the debugging symbols for math.js
      3. quest.js – Contains the printjs function, if needed place quest library functions in this file as well
   3. cuberoot.js – an example javascript program
   4. index.html – The html file which loads all of the javascript, and provides the text window where printjs outputs

1. Open the folder QuestVSCodeEnv, right click and choose open with Code.

If that is not an option (on a mac), instead open a folder (from left side bar or top toolbar line)

(or from the welcome screen)

and then open the QuestVSCodeEnv folder:

1. Click the Debug tab (icon second from the bottom on the left: play triangle with a bug), and ensure that the Launch index.html in Chrome configuration is selected
   1. 
2. Click the green play button, and look at the Chrome window it will open
   1. 
3. This is the index.html page mentioned earlier, clicking the execute button will run the js_answer function, just like in Quest. In this case, the js_answer function is located in the cuberoot.js file.
   1. 
   2. The above image shows where the javascript file is imported in the HTML. The below image shows the js_answer function in the js file.
   3. 
4. Changing the source file to something else within the workspace folder, will allow you to use multiple files for different questions without having to copy and paste over prior work. Just make sure you import a js_answer function.
   1. 

Using Breakpoints

Breakpoints allow you to check the state of variables at a specific point in the program's execution.

1. Set a break point by clicking to the left of the desired line number.
   
   1. 
2. Click the green play button, and run the debugging configuration. Click the execute button to run the code itself.
   1. When the break point is reached, VS Code will show it
   2. 
   3. At this point, any variables/objects in use should also be visible if you hover over them
   4. As well, local variables will be automatically available in the variables menu
   5. 
   6. If the break point becomes grey, simply remove and re-add the break point within the debug session
   7. 
3. Click the stop button, or exit out of the Chrome window when done.

Examples

Catch Simple Mistakes Automatically

Here is VS Code catching a misplaced semicolon, note that it will highlight these simple mistakes immediately, and if the code is ran it will show exceptions.

The semicolon after "Math.abs(q)" is incorrect, hence the red underlining and syntax error.

Change All Occurrences

Let's say that I want to change all of the occurrences of a function. This is simple to do, hit the change all occurrences button:

Make the changes desired, and then hit the escape key.

Check Variables at Specific Point in Program Execution

Suppose that the solveCubic function has some variables that you want to check on right before the function ends, set a breakpoint at the end:

Run the program, and look at the variables