From 1bc04a088bf581f6613892d186ac09f660759614 Mon Sep 17 00:00:00 2001
From: Arjun Attam <arjunattam@gmail.com>
Date: Mon, 15 Jun 2020 18:34:58 -0700
Subject: [PATCH] docs: using DEBUG=pw:api (#2578)

---
 docs/intro.md        | 45 +++++++++++++++++++++++++++++++++++++++++++-
 docs/test-runners.md | 14 --------------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/docs/intro.md b/docs/intro.md
index 5231a93b67..527455febe 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -5,7 +5,10 @@
 - [Usage](#usage)
 - [First script](#first-script)
 - [System requirements](#system-requirements)
+- [TypeScript IDE support](#typescript-ide-support)
 - [Debugging scripts](#debugging-scripts)
+  * [Using editor debugger](#using-editor-debugger)
+  * [Verbose logging](#verbose-logging)
 <!-- GEN:stop -->
 
 <br>
@@ -80,17 +83,57 @@ Firefox and WebKit work across the 3 platforms (Windows, macOS, Linux):
 * **macOS**: Requires 10.14 or above.
 * **Linux**: Depending on your Linux distribution, you might need to install additional
   dependencies to run the browsers.
+  * Firefox requires Ubuntu 18.04+
   * For Ubuntu 18.04, the additional dependencies are defined in [our Docker image](docker/Dockerfile.bionic),
     which is based on Ubuntu.
 
 <br>
 
+## TypeScript IDE support
+
+Playwright comes with built-in support for TypeScript. Playwright type definitions will be imported automatically.
+
+It is also possible to add these types to your variables manually. In TypeScript:
+
+```ts
+let page: import('playwright').Page;
+```
+
+If you use JavaScript, you can still use TypeScript definitions for improved auto-completions and warnings in Visual Studio Code or WebStorm. Add the following to the top of your JavaScript file:
+
+```js
+//@ts-check
+// ...
+```
+
+You can also use JSDoc to set types for variables.
+
+```js
+/** @type {import('playwright').Page} */
+let page;
+```
+
+<br>
+
 ## Debugging scripts
 
+### Using editor debugger
+
 Playwright scripts can be developed just like any other Node.js script. For example, you can use the [Node.js debugger](https://nodejs.org/api/debugger.html) or [VS Code debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) to set breakpoints and get fine grained control over execution.
 
   <a href="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png"><img src="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png" width="300" alt="Chromium Developer Tools"></a>
 
 It is also possible to open **browser developer tools** during execution, to inspect the DOM tree or network activity.
 
-<br>
+### Verbose logging
+
+Playwright supports verbose logging with the `DEBUG` environment variable.
+
+```sh
+# Linux/macOS
+$ DEBUG=pw:api npm run test
+
+# Windows
+$ set DEBUG=pw:api
+$ npm run test
+```
diff --git a/docs/test-runners.md b/docs/test-runners.md
index 0dbcaaec39..2448a4f69c 100644
--- a/docs/test-runners.md
+++ b/docs/test-runners.md
@@ -6,7 +6,6 @@ With a few lines of code, you can hook up Playwright to your favorite JavaScript
 - [Jest / Jasmine](#jest--jasmine)
 - [AVA](#ava)
 - [Mocha](#mocha)
-- [IDE support](#ide-support)
 - [Multiple Browsers](#multiple-browsers)
 <!-- GEN:stop -->
 
@@ -98,19 +97,6 @@ it('should work', async () => {
 ```
 <br>
 
-## IDE support
-
-If using TypeScript, add types to your variables like:
-```ts
-let page: import('playwright').Page;
-```
-
-If using JavaScript, you can still get nice autocompletions in VSCode or WebStorm by using JSDoc.
-```js
-/** @type {import('playwright').Page} */
-let page;
-```
-
 ## Multiple Browsers
 
 These simple examples can be extended to support multiple browsers using an environment variable.