VS Code Settings Update / Frontend Debug Documentation (#4346)

* Added Edge debug configuration for VS Code.

* Added frontend debug documentation.

* Some copy updates.

* Added the debugging docs to the TOC.

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "donjayamanne.git-extension-pack",
     "msjsdiag.debugger-for-chrome",
+    "msjsdiag.debugger-for-edge",
     "rebornix.ruby",
     "MS-vsliveshare.vsliveshare-pack"
   ]

.vscode/launch.json

@@ -4,6 +4,13 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "edge",
+      "request": "attach",
+      "name": "Attach to Edge",
+      "port": 2015,
+      "webRoot": "${workspaceFolder}"
+    },
     {
       "type": "chrome",
       "request": "attach",

docs/frontend/debugging.md

@@ -0,0 +1,30 @@
+---
+title: Debugging
+---
+
+# Debugging
+
+## In Browser
+
+Browsers ship with their own developer tools. These are amazing tools to help you debug your web application. Consider learning how to use them.
+
+- [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools)
+- [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)
+- [Safari Developer Tools](https://support.apple.com/en-ca/guide/safari/sfri20948/mac)
+
+## Visual Studio Code
+
+[Visual Studio Code](https://code.visualstudio.com) (VS Code) is a popular editor that allows you to debug many languages including JavaScript. Thanks to remote debugging technologies, we can debug our frontend code in VS Code. When you clone the DEV repository and open the project in VS Code, you will be prompted to install recommended extensions which include the [Chrome Debugger](https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code) and the [Edge Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge).
+
+Setup:
+
+- Refer to the repsective debugger extension documentation above to ensure that your browser is running with remote debugging enabled.
+- Once you have your local installation of DEV running, you can attach to either the Chrome or Edge Debugger.
+
+  ![Launch menu for debugger in VS Code](/vscode_launch_debugger.png 'Launch menu for debugger in VS Code')
+
+- From there you can do all the usual stuff that you would do while debugging JavaScript in the browser: setting breakpoints, setting [logpoints](https://code.visualstudio.com/docs/editor/debugging#_logpoints), watches etc.
+
+## Where is My Editor Debug Configuration?
+
+If you do not see your editor here, consider contributing to the documentation. 😉

docs/frontend/readme.md

@@ -5,6 +5,7 @@ items:
   - webpacker.md
   - preact.md
   - liquid-tags.md
+  - debugging.md
 ---
 
 # Frontend Guide