Puppeteer – 调试

在编写代码时,我们应该了解有哪些方法可以调试程序。

1. 查看浏览器的执行

puppeteer脚本执行时,可以查看浏览器的执行和界面显示情况。

puppeteer有头(headful)模式会显示浏览器界面,设置slwMo参数可以减慢puppeteer执行每个操作时的速度。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false, slowMo: 200 });

  // 浏览器操作

  await browser.close();
})();

使用这种方法,可以清楚地查看浏览器执行指令的过程。

2. 在浏览器中调试应用程序代码

puppeteer有头(headful)模式会显示浏览器界面,可以使用DevTools调试应用程序本身。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ devtools: true });

  // 浏览器操作

  // 保持浏览器打开,直到显式终止进程
  await browser.waitForTarget(() => false);

  await browser.close();
})();

puppeteer启动时,设置devtools: true,默认情况下会以有头(headful)模式启动浏览器,并自动打开devtools。使用waitForTarget来保留浏览器进程,直到浏览器被显式关闭。

要让浏览器休眠一段时间,可以使用:

  • setTimeout方法
  • page.waitFor方法

如下所示:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ devtools: true });

  // 浏览器操作

  // 选项1 - 在“setTimeout”结束时resolve一个承诺
  const sleep = duration => new Promise(resolve => setTimeout(resolve, duration));
  await sleep(3000);

  // 选项2 -如果我们有一个页面实例,只需使用' waitFor '
  await page.waitFor(3000);

  await browser.close();
})();

第一种方法只是一个函数,它在setTimeout结束时resolve一个承诺;第二种方法要简单很多,但是需要有一个page实例(我们将在稍后讨论)。

3. 调试Puppeteer脚本的执行进程

Puppeteer脚本是在Node.js进程中执行的,与浏览器进程完全分离。因此,可以像调试常规Node.js应用程序一样调试Puppeteer脚本。

node inspect 命令行调试

例如,在命令行中,可以使用node inspect <脚本>调试脚本:

Kevin@QIKEGU g:\qikegu\puppeteer
> node inspect puppeteer_demo4.js
< Debugger listening on ws:/
< /127.0.0.1:9229/1cb8b015-de7a-4927-8f24-aa5dec28a1c7
< For help, see: https://nodejs.org/en/docs/inspector
< Debugger attached.
Break on start in file:///g:/qikegu/puppeteer/puppeteer_demo4.js:1
> 1 const puppeteer = require('puppeteer');
  2
  3 (async () => {
debug>

可以输入help查看调试命令:

debug> help
run, restart, r       Run the application or reconnect
kill                  Kill a running application or disconnect

cont, c               Resume execution
next, n               Continue to next line in current file
step, s               Step into, potentially entering a function
out, o                Step out, leaving the current function
backtrace, bt         Print the current backtrace
list                  Print the source around the current line where execution
                      is currently paused

setBreakpoint, sb     Set a breakpoint
clearBreakpoint, cb   Clear a breakpoint
breakpoints           List all known breakpoints
breakOnException      Pause execution whenever an exception is thrown
breakOnUncaught       Pause execution whenever an exception isn't caught
breakOnNone           Don't pause on exceptions (this is the default)

watch(expr)           Start watching the given expression
unwatch(expr)         Stop watching an expression
watchers              Print all watched expressions and their current values

exec(expr)            Evaluate the expression and print the value
repl                  Enter a debug repl that works like exec

scripts               List application scripts that are currently loaded
scripts(true)         List all scripts (including node-internals)

profile               Start CPU profiling session.
profileEnd            Stop current CPU profiling session.
profiles              Array of completed CPU profiling sessions.
profiles[n].save(filepath = 'node.cpuprofile')
                      Save CPU profiling session to disk as JSON.

takeHeapSnapshot(filepath = 'node.heapsnapshot')
                      Take a heap snapshot and save to disk as JSON.
debug>

node inspect 图形界面调试(VS code)

VS code 已经对node inspect做了很好的集成,使用起来很方便:

1. 点击Debug按钮,添加调试配置,如下图所示:

图

2. 启动调试

如下图所示,先设置断点,然后启动调试:

图



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载