docs(readme): Document debugging with node --inspect-brk (#4345)

To me, this is the most important type of debugging. It's what I think of when I think of debugging my test. I was happy to find the instructions [buried here](https://github.com/GoogleChrome/puppeteer/issues/398#issuecomment-323551586).

README.md

@@ -212,27 +212,51 @@ Puppeteer creates its own Chromium user profile which it **cleans up on every ru
 
         await page.evaluate(() => console.log(`url is ${location.href}`));
 
-4. Stop test execution and use a debugger in browser
+4. Use debugger in application code browser
 
-  - Use `{devtools: true}` when launching Puppeteer:
+    There are two execution context: node.js that is running test code, and the browser
+    running application code being tested. This lets you debug code in the
+    application code browser; ie code inside `evaluate()`.
 
-      `const browser = await puppeteer.launch({devtools: true});`
+    - Use `{devtools: true}` when launching Puppeteer:
 
-  - Change default test timeout:
+        `const browser = await puppeteer.launch({devtools: true});`
 
-      jest: `jest.setTimeout(100000);`
+    - Change default test timeout:
 
-      jasmine: `jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;`
+        jest: `jest.setTimeout(100000);`
 
-      mocha: `this.timeout(100000);` (don't forget to change test to use [function and not '=>'](https://stackoverflow.com/a/23492442))
+        jasmine: `jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;`
 
-  - Add an evaluate statement with `debugger` inside / add  `debugger` to an existing evaluate statement:
+        mocha: `this.timeout(100000);` (don't forget to change test to use [function and not '=>'](https://stackoverflow.com/a/23492442))
 
-    `await page.evaluate(() => {debugger;});`
+    - Add an evaluate statement with `debugger` inside / add  `debugger` to an existing evaluate statement:
 
-     The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode.
+      `await page.evaluate(() => {debugger;});`
 
-5. Enable verbose logging - internal DevTools protocol traffic
+       The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode.
+
+5. Use debugger in node.js
+
+    This will let you debug test code. For example, you can step over `await page.click()` in the node.js script and see the click happen in the application code browser.
+
+    Note that you won't be able to run `await page.click()` in
+    DevTools console due to this [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=833928). So if
+    you want to try something out, you have to add it to your test file.
+
+    - Add `debugger;` to your test, eg:
+      ```
+      debugger;
+      await page.click('a[target=_blank]');
+      ```
+    - Set `headless` to `false`
+    - Run `node --inspect-brk`, eg `node --inspect-brk node_modules/.bin/jest tests`
+    - In Chrome open `chrome://inspect/#devices` and click `inspect`
+    - In the newly opened test browser, type `F8` to resume test execution
+    - Now your `debugger` will be hit and you can debug in the test browser
+
+
+6. Enable verbose logging - internal DevTools protocol traffic
    will be logged via the [`debug`](https://github.com/visionmedia/debug) module under the `puppeteer` namespace.
 
         # Basic verbose logging
@@ -241,7 +265,7 @@ Puppeteer creates its own Chromium user profile which it **cleans up on every ru
         # Protocol traffic can be rather noisy. This example filters out all Network domain messages
         env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'
 
-6. Debug your Puppeteer (node) code easily, using [ndb](https://github.com/GoogleChromeLabs/ndb)
+7. Debug your Puppeteer (node) code easily, using [ndb](https://github.com/GoogleChromeLabs/ndb)
 
   - `npm install -g ndb` (or even better, use [npx](https://github.com/zkat/npx)!)