Debugging Lab

Open a terminal window in your HW11 or HW12 directory.

Run:
$ node --inspect app.js

You will see a message something like:

Debugger listening on ws://127.0.0.1:9229/596fd29e-a245-48cd-808b-00b61692cddd
For help see https://nodejs.org/en/docs/inspector
Listening on http://localhost:50000/

In Chrome, connect DevTools to node.
  - Go to the URL chrome://inspect
  - Click on "inspect" under the app.js remote target
    - Notice you are in a "console" for node
    - type "process.argv" and you will see the node program you are in.
  - Click on the "Sources" tab, the "Filesystem" subtab and "Add folder to
    workspace" to tie the debugger to your source code directory
      - Now you can browse your code

Experiment:
  - Visit your welcome page (e.g. index.html)
  - Create/PUT a record into your app.
  - Set a breakpoint on the client before the ajax request for Retrieve/GET
  - Set a breakpoint on the client in the first line of your response (success)
    handler.
  - Set a breakpoint on the server within the Retrieve/GET route handler BEFORE
    your model is called
  - Initiate a user request to Retrieve/GET from the initial web page
      - Display variables being used for the ajax request
      - Clarify in your mind: is this breakpoint on the client or server?
        - (It is on the client.)
      - "Resume" execution
  - Your server should then hit the breakpoint you set.
      - Display the request.param values
      - "Step over" the function call to your model
      - Display the values returned from your model
      - Change one of the values returned from your model
      - "Resume" execution 
  - Your client should now have hit the breakpoint in the response handler
      - Display the values in the ajax response.
      - "Resume" execution
      - Confirm that the value you changed from the model is displayed
      
Update your code from within DevTools
  - Edit a JavaScript module in a simple way that does not break it 
    (e.g. change a string that is returned).
  - "Save" the change
  - Confirm that the change was made to the filesystem (with another editor).
  - Notice that node was implicitly restarted (like nodemon does).
  - Revisit the route from the client browser window and confirm the changed
    response.
      
Practice the following debugger actions:
  - Setting a breakpoint
  - Inspecting the value of a variable
  - Changing the value of a variable within the Scope tab
  - Changing the value of a variable by the console
  - Running a function (e.g. a model function) from the console

Network tab:
  - Change to the Network tab on the client
  - Select the last ajax request
    - What was the HTTP response status code?
    - What is the value of the X-Powered-By response header?
    - Show the HTTP response body
    
Once you can do all this easily and quickly demonstrate to a TA today 
(or during office hours before the end of Friday Nov 3.)
  1. Setting a breakpoint in the client
  2. Setting a breakpoint in the server
  3. Hitting the breakpoints by visiting a URL
  4. Inspecting values of variable on client and server
  5. Changing variable values on the server