From f44d5aa648317f204e3b5ea6a2833b7d9ac6545c Mon Sep 17 00:00:00 2001
From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com>
Date: Thu, 10 Dec 2020 19:37:06 +0100
Subject: [PATCH] Add VS Code debugger config (#16819)

* add config for using vscode debugger

reference: https://github.com/Microsoft/vscode-recipes/tree/master/nodemon

* some docs

Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>
---
 .vscode/launch.json         | 13 +++++++++++++
 contributing/development.md | 12 ++++++++++++
 package.json                |  1 +
 3 files changed, 26 insertions(+)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000000..e7265cc1f844
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Node: Nodemon",
+      "processId": "${command:PickProcess}",
+      "restart": true,
+      "protocol": "inspector",
+    },
+  ]
+}
\ No newline at end of file
diff --git a/contributing/development.md b/contributing/development.md
index 9a2c34ed2c09..439e75d8c5ab 100644
--- a/contributing/development.md
+++ b/contributing/development.md
@@ -32,6 +32,18 @@ As an alternative, you can simply use [GitHub Codespaces](https://github.com/fea
 
 In a matter of minutes, you will be ready to edit, preview and test your changes directly from the comfort of your browser.
 
+### Debugging with VS Code
+
+This repo has configuration for debugging with VS Code's built-in Node Debugger.
+
+1. After running the build steps, start the app by running `npm run debug`.
+2. In VS Code, click on the Debugging icon in the Activity Bar to bring up the Debug view.
+3. In the Debug View, select the **'Node: Nodemon'** configuration, then press F5 or click the green play button. You should see all of your running node processes.
+4. Select the node process that's started with the `--inspect` flag.
+5. Debugger has now been attached. Enjoy!
+
+For more detailed instructions, please see this [VS Code recipe](https://github.com/Microsoft/vscode-recipes/tree/master/nodemon). You can also learn more about debugging using VS Code [here](https://code.visualstudio.com/docs/editor/debugging).
+
 ### Viewing a top-level table of contents
 
 While running the local server, you can visit [localhost:4000/dev-toc](http://localhost:4000/dev-toc) to view a top-level TOC of all the content in the site. This page is not available on https://docs.github.com. It was created for internal GitHub writers' use.
diff --git a/package.json b/package.json
index 545de5882648..312235cd889e 100644
--- a/package.json
+++ b/package.json
@@ -150,6 +150,7 @@
   "scripts": {
     "start": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon server.js",
     "dev": "npm start",
+    "debug": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon --inspect server.js",
     "rest-dev": "script/rest/update-files.js && npm run dev",
     "build": "cross-env NODE_ENV=production npx webpack --mode production",
     "start-all-languages": "cross-env NODE_ENV=development nodemon server.js",