Debugging in VS Code

These instructions are based on notes I found at these links:

• https://vuejs.org/v2/cookbook/debugging-in-vscode.html
• https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
• https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

The debug configuration is stored in the project at ~/.vscode/launch.json and ~/vue.config.js. You shouldn't need to edit those files now that they're working.

---

CHROME

To debug in Chrome, you need to launch a special instance of Chrome which listens on a debug port (9222) and has its own user profile.

1. Create a new launch icon for Chrome with some special parameters.
   • Windows: Copy the launch shortcut somewhere, and right-click properties. On the "Target" line, append the following:
     • --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-debugger-profile
   • Mac: (to be added)
2. Open your new Chrome instance, (dismissing all the "make default" and other nagware), and then go to settings and change the startup page to http://localhost:8080
3. In VS Code, open the Debugger Panel (or press F5) and choose 'Attach Chrome". Click the play button (or F5).
4. If your debug Chrome instance is open and open to the correct URL above, the debugger should attach and show an orange bar to confirm. You can now set breakpoints and step thru code! Yay, have fun.

---

FIREFOX

Kinda janky at the moment but it kinda works. I found debugging much nicer on Chrome, not breaking on every entered class, for example.