mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
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:
parent
a0b54f041f
commit
5f66d82638
30
README.md
30
README.md
@ -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)!)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user