[docs] Describe debugging in VS Code (DevExpress#1358)

* Describe debugging via VS Code

* Restructure debugging docs

* Merge the debugging description back in one topic

docs/README.md

@@ -23,9 +23,7 @@
     * [Specifying the Start Webpage](articles/documentation/test-api/test-code-structure.md#specifying-the-start-webpage)
     * [Initialization and Clean-Up](articles/documentation/test-api/test-code-structure.md#initialization-and-clean-up)
       * [Test Hooks](articles/documentation/test-api/test-code-structure.md#test-hooks)
-        * [Sharing Variables Between Test Hooks and Test Code](articles/documentation/test-api/test-code-structure.md#sharing-variables-between-test-hooks-and-test-code)
       * [Fixture Hooks](articles/documentation/test-api/test-code-structure.md#fixture-hooks)
-        * [Sharing Variables Between Fixture Hooks and Test Code](articles/documentation/test-api/test-code-structure.md#sharing-variables-between-fixture-hooks-and-test-code)
     * [Skipping Tests](articles/documentation/test-api/test-code-structure.md#skipping-tests)
   * [Selecting Page Elements](articles/documentation/test-api/selecting-page-elements/README.md)
     * [Selectors](articles/documentation/test-api/selecting-page-elements/selectors.md)
@@ -55,7 +53,7 @@
   * [Pausing the Test](articles/documentation/test-api/pausing-the-test.md)
   * [Handling Native Dialogs](articles/documentation/test-api/handling-native-dialogs.md)
   * [Working with <iframes>](articles/documentation/test-api/working-with-iframes.md)
-  * [Client-Side Debugging](articles/documentation/test-api/client-side-debugging.md)
+  * [Debugging](articles/documentation/test-api/debugging.md)
   * [A-Z Index](articles/documentation/test-api/a-z-index.md)
 * [EXTENDING TESTCAFE](articles/documentation/extending-testcafe/README.md)
   * [Reporter Plugin](articles/documentation/extending-testcafe/reporter-plugin/README.md)
@@ -64,7 +62,8 @@
   * [Browser Provider Plugin](articles/documentation/extending-testcafe/browser-provider-plugin/README.md)
     * [Browser Provider Methods](articles/documentation/extending-testcafe/browser-provider-plugin/browser-provider-methods.md)
 * [RECIPES](articles/documentation/recipes/README.md)
-  * [Debugging Tests](articles/documentation/recipes/debugging-tests.md)
+  * [Debugging with Chrome Developer Tools](articles/documentation/recipes/debugging-with-chrome-dev-tools.md)
+  * [Debugging with Visual Studio Code](articles/documentation/recipes/debugging-with-visual-studio-code.md)
   * [Running Tests in Firefox and Chrome Using Travis CI](articles/documentation/recipes/running-tests-in-firefox-and-chrome-using-travis-ci.md)
   * [Running Tests Using Travis CI and Sauce Labs](articles/documentation/recipes/running-tests-using-travis-ci-and-sauce-labs.md)
   * [Test Static HTML Pages](articles/documentation/recipes/test-static-html-pages.md)

docs/articles/documentation/recipes/README.md

@@ -7,7 +7,8 @@ permalink: /documentation/recipes/
 
 This section provides examples and recipes of how to use TestCafe in different scenarios.
 
-* [Debugging Tests](debugging-tests.md)
+* [Debugging with Chrome Developer Tools](debugging-with-chrome-dev-tools.md)
+* [Debugging with Visual Studio Code](debugging-with-visual-studio-code.md)
 * [Running Tests in Firefox and Chrome Using Travis CI](running-tests-in-firefox-and-chrome-using-travis-ci.md)
 * [Running Tests Using Travis CI and Sauce Labs](running-tests-using-travis-ci-and-sauce-labs.md)
 * [Test Static HTML Pages](test-static-html-pages.md)

docs/articles/documentation/recipes/debugging-with-chrome-dev-tools.md

@@ -0,0 +1,38 @@
+---
+layout: docs
+title: Debugging with Chrome Developer Tools
+permalink: /documentation/recipes/debugging-with-chrome-dev-tools.html
+---
+# Debugging with Chrome Developer Tools
+
+Starting with version 6.3.0, Node.js allows you to debug applications in Chrome Developer Tools.
+If you have Chrome and an appropriate version of Node.js installed on your machine,
+you can debug TestCafe test code.
+To do this, add the `--inspect` and `--debug-brk` flags to the test run command.
+
+```sh
+testcafe --inspect --debug-brk chrome ./tests
+```
+
+Put the `debugger` keyword in test code where you want to stop.
+
+```js
+fixture `My fixture`
+    .page `https://devexpress.github.io/testcafe/example`;
+
+test('My test', async t => {
+    debugger;
+    await t
+        .click('#populate')
+        .click('#submit-button');
+});
+```
+
+After the test run command is executed, a debugging URL will appear in the console.
+
+![Console with a debugging URL](../../images/debugging/server-debugging-console.png)
+
+Open this URL in a new Chrome instance. Chrome will invoke its Developer Tools and the debugger will stop test execution at the first line.
+Click the 'Resume script execution' button or press F5 to continue. After that, text execution will pause at the `debugger` keyword allowing you to debug test code.
+
+![Chrome Developer Tools](../../images/debugging/server-debugging-chrome.png)

docs/articles/documentation/recipes/debugging-with-visual-studio-code.md

@@ -0,0 +1,56 @@
+---
+layout: docs
+title: Debugging with Visual Studio Code
+permalink: /documentation/recipes/debugging-with-visual-studio-code.html
+---
+# Debugging with Visual Studio Code
+
+Before debugging in Visual Studio Code, ensure that your root test directory contains a `package.json` file that includes `testcafe` in the `devDependencies` section.
+
+```json
+{
+  "devDependencies": {
+    "testcafe": "x.y.z"
+  }
+}
+```
+
+where `x.y.z` is the TestCafe version you use.
+
+Then you need to install TestCafe locally in the tests directory via `npm`.
+
+```sh
+npm install
+```
+
+The next step is adding a launch configuration that runs TestCafe tests. See the [Visual Studio Code documentation](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) to learn how to create a configuration.
+
+You will need to add the following configuration to the `launch.json` file.
+
+```json
+{
+    "type": "node",
+    "request": "launch",
+    "name": "Launch test files with TestCafe",
+    "program": "${workspaceRoot}/node_modules/testcafe/bin/testcafe.js",
+    "args": [
+        "firefox",
+        "${file}"
+    ],
+    "cwd": "${workspaceRoot}"
+}
+```
+
+This configuration contains the following attributes:
+
+* `type` - specifies the type of the configuration. Set to `node` for a Node.js configuration.
+* `request` - specifies the request type. Set to `launch` since this configuration launches a program.
+* `name` - specifies the name of the configuration.
+* `program` - path to a JS file that will be executed. In this case, it is the TestCafe module.
+* `args` - [command line arguments](../using-testcafe/command-line-interface.md) passed to the launched program. In this case, they specify the browser in which the tests should run and the test file.
+* `cwd` - the current working directory. Set to the workspace root.
+
+Save the `launch.json` file. The new configuration will appear in the configuration drop-down.
+
+Now you can open a file with TestCafe tests, select the configuration you have just created and click the Run button.
+Tests will run with the debugger attached. You can put breakpoints in test code and the debugger will stop at them.

docs/articles/documentation/test-api/README.md

@@ -20,4 +20,4 @@ It contains the following subsections
 * [Pausing the Test](pausing-the-test.md)
 * [Handling Native Dialogs](handling-native-dialogs.md)
 * [Working with \<iframes\>](working-with-iframes.md)
-* [Client-Side Debugging](client-side-debugging.md)
+* [Debugging](debugging.md)

docs/articles/documentation/test-api/a-z-index.md

@@ -48,7 +48,7 @@ This topic lists test API members in alphabetical order.
     * [clearUpload](actions/upload.md#clear-file-upload-input)
     * [click](actions/click.md)
     * [ctx](test-code-structure.md#sharing-variables-between-test-hooks-and-test-code)
-    * [debug](client-side-debugging.md)
+    * [debug](debugging.md#client-side-debugging)
     * [doubleClick](actions/double-click.md)
     * [drag](actions/drag-element.md#drag-an-element-by-an-offset)
     * [dragtoElement](actions/drag-element.md#drag-an-element-onto-another-one)