Update VS Code debugging FAQ to include Karma test debugging config

Closes #445 [ci skip]
insin · Mar 27, 2018 · b6d5210 · b6d5210
1 parent 97f8298
commit b6d5210
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/docs/FAQ.md b/docs/FAQ.md
@@ -114,26 +114,39 @@ Pass a [`--copy-files` flag](/docs/guides/ReactComponent.md#--copy-files) if you
   ```
 - Use React Hot Loader's `<AppContainer>` component in your app's entry module (usually `src/index.js` in apps using nwb) as per its [Getting Started docs](https://github.com/gaearon/react-hot-loader#getting-started).
 
-### How can I debug using VS Code when running an app with nwb?
+### How can I debug using VS Code when using nwb?
 
-Ensure you have the [Debugger for Chrome extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed and create `.vscode/launch.json` or add the following configuration to it:
+Ensure you have the [Debugger for Chrome extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed and add the following configurations to `.vscode/launch.json`:
 
 ```json
 {
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Chrome",
-      "type": "chrome",
+      "name": "Debug Dev Server",
       "request": "launch",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      },
+      "type": "chrome",
       "url": "http://localhost:3000",
       "webRoot": "${workspaceRoot}/src",
+    },
+    {
+      "name": "Debug Karma Tests",
+      "request": "launch",
+      "runtimeArgs": ["--headless"],
       "sourceMapPathOverrides": {
-        "webpack:///src/*": "${webRoot}/*"
-      }
+        "webpack:///src/*": "${workspaceRoot}/src/*",
+        "webpack:///tests/*": "${workspaceRoot}/tests/*"
+      },
+      "type": "chrome",
+      "url": "http://localhost:9876/debug.html",
     }
   ]
 }
 ```
 
-After you've started the dev server with `npm start` you should be able to press F5 and start debugging in VS Code.
+> **Note:** the above configuration assumes you're using the default host and port settings, and that the requested dev server port was available.
+
+After you've started the dev server with `npm start` or `nwb serve`, or started a watching test server with `npm run test:watch` or `nwb test --server`, you should be able to start debugging in VS Code by running a debugging configuration from the Debug panel or pressing F5.
diff --git a/docs/Stylesheets.md b/docs/Stylesheets.md
@@ -27,13 +27,13 @@ When running a production build, imported stylesheets will be extracted out to s
 
 ### Default Stylesheet Rules
 
-> Note: each generated Webpack rule and chained loader has an associated unique id which can be used in [`webpack.rules` configuration](/docs/Configuration.md#rules-object) to tweak its configuration.
+> **Note:** each generated Webpack rule and chained loader has an associated unique id which can be used in [`webpack.rules` configuration](/docs/Configuration.md#rules-object) to tweak its configuration.
 
 Without any [`webpack.styles` configuration](/docs/Configuration.md#styles-object--false), nwb generates a rule (id: `css-rule`) which handles `.css` files by chaining together a number of loaders:
 
 - loader id: `style` - applies styles using [style-loader][style-loader]
 
-  > Note: use of this loader is only configured when running a development server
+  > **Note:** use of this loader is only configured when running a development server
 
 - loader id: `css` - handles URLs, minification and can be configured to enable [CSS Modules][Css Modules], using [css-loader][css-loader]