From f897f9412ea9cbc37f92d6eb7989a229170c7c53 Mon Sep 17 00:00:00 2001 From: Anderson Aguiar Date: Sat, 2 May 2020 23:36:14 +1000 Subject: [PATCH 1/2] Update README.md --- README.md | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index b74267b35f715..c452efdefb827 100644 --- a/README.md +++ b/README.md @@ -198,22 +198,28 @@ Puppeteer creates its own browser user profile which it **cleans up on every run displaying. Instead of launching in headless mode, launch a full version of the browser using `headless: false`: - const browser = await puppeteer.launch({headless: false}); +```js +const browser = await puppeteer.launch({headless: false}); +``` 2. Slow it down - the `slowMo` option slows down Puppeteer operations by the specified amount of milliseconds. It's another way to help see what's going on. - const browser = await puppeteer.launch({ - headless: false, - slowMo: 250 // slow down by 250ms - }); +```js +const browser = await puppeteer.launch({ + headless: false, + slowMo: 250 // slow down by 250ms +}); +``` 3. Capture console output - You can listen for the `console` event. This is also handy when debugging code in `page.evaluate()`: - page.on('console', msg => console.log('PAGE LOG:', msg.text())); +```js +page.on('console', msg => console.log('PAGE LOG:', msg.text())); - await page.evaluate(() => console.log(`url is ${location.href}`)); +await page.evaluate(() => console.log(`url is ${location.href}`)); +``` 4. Use debugger in application code browser @@ -223,7 +229,9 @@ Puppeteer creates its own browser user profile which it **cleans up on every run - Use `{devtools: true}` when launching Puppeteer: - `const browser = await puppeteer.launch({devtools: true});` +```js +const browser = await puppeteer.launch({devtools: true}); +``` - Change default test timeout: @@ -235,7 +243,9 @@ Puppeteer creates its own browser user profile which it **cleans up on every run - Add an evaluate statement with `debugger` inside / add `debugger` to an existing evaluate statement: - `await page.evaluate(() => {debugger;});` +```js +await page.evaluate(() => {debugger;}); +``` The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode. @@ -248,10 +258,11 @@ Puppeteer creates its own browser user profile which it **cleans up on every run 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]'); - ``` +```js +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` From 039cb2acf19610f51f21d99dba93c3f685325cda Mon Sep 17 00:00:00 2001 From: Anderson Aguiar Date: Tue, 5 May 2020 09:25:16 +1000 Subject: [PATCH 2/2] Indent changes --- README.md | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index c452efdefb827..9c275b3439100 100644 --- a/README.md +++ b/README.md @@ -198,28 +198,28 @@ Puppeteer creates its own browser user profile which it **cleans up on every run displaying. Instead of launching in headless mode, launch a full version of the browser using `headless: false`: -```js -const browser = await puppeteer.launch({headless: false}); -``` + ```js + const browser = await puppeteer.launch({headless: false}); + ``` 2. Slow it down - the `slowMo` option slows down Puppeteer operations by the specified amount of milliseconds. It's another way to help see what's going on. -```js -const browser = await puppeteer.launch({ - headless: false, - slowMo: 250 // slow down by 250ms -}); -``` + ```js + const browser = await puppeteer.launch({ + headless: false, + slowMo: 250 // slow down by 250ms + }); + ``` 3. Capture console output - You can listen for the `console` event. This is also handy when debugging code in `page.evaluate()`: -```js -page.on('console', msg => console.log('PAGE LOG:', msg.text())); + ```js + page.on('console', msg => console.log('PAGE LOG:', msg.text())); -await page.evaluate(() => console.log(`url is ${location.href}`)); -``` + await page.evaluate(() => console.log(`url is ${location.href}`)); + ``` 4. Use debugger in application code browser @@ -229,9 +229,9 @@ await page.evaluate(() => console.log(`url is ${location.href}`)); - Use `{devtools: true}` when launching Puppeteer: -```js -const browser = await puppeteer.launch({devtools: true}); -``` + ```js + const browser = await puppeteer.launch({devtools: true}); + ``` - Change default test timeout: @@ -243,9 +243,9 @@ const browser = await puppeteer.launch({devtools: true}); - Add an evaluate statement with `debugger` inside / add `debugger` to an existing evaluate statement: -```js -await page.evaluate(() => {debugger;}); -``` + ```js + await page.evaluate(() => {debugger;}); + ``` The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode. @@ -258,10 +258,11 @@ await page.evaluate(() => {debugger;}); you want to try something out, you have to add it to your test file. - Add `debugger;` to your test, eg: -```js -debugger; -await page.click('a[target=_blank]'); -``` + + ```js + debugger; + await page.click('a[target=_blank]'); + ``` - Set `headless` to `false` - Run `node --inspect-brk`, eg `node --inspect-brk node_modules/.bin/jest tests`