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).
This commit is contained in:
melissachang 2019-05-09 18:00:32 -07:00 committed by Andrey Lushnikov
parent a0b54f041f
commit 5f66d82638

View File

@ -212,7 +212,11 @@ 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
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()`.
- Use `{devtools: true}` when launching Puppeteer:
@ -232,7 +236,27 @@ Puppeteer creates its own Chromium user profile which it **cleans up on every ru
The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode.
5. Enable verbose logging - internal DevTools protocol traffic
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)!)