web-dev-qa-db-ja.com

操り人形師のデバッグ

人形劇のスクリプトをデバッグする方法はありますか?なんらかの理由でボタンの1つがクリックされません。私はさまざまな方法を試しましたが、実際には別のスクリプトでクリックしましたが、このスクリプトではクリックしません。

await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script
14
elena

応答が遅れるようなものですが、参考として役立つかもしれません。次のようにクライアントスクリプトをデバッグできます。

_await page.evaluate(() => {
  debugger;
  const btn = document.querySelector(...);
  btn.click();
});
_

次に、以下を使用してpuppeteerを起動します。

puppeteer.launch({devtools: true})

Chromiumが開き、ブレークポイントで停止します。

15
Yaniv Efraim

Visual Studioコードを使用します。テキストエディターの左バーをクリックするだけでブレークポイントを設定できます- https://code.visualstudio.com/docs/nodejs/nodejs-debugging

1
Porus Whitekar

私はこれが役に立ったとわかった: https://github.com/GoogleChrome/puppeteer#debugging-tips ここからこのリードを得た: https://github.com/GoogleChrome/puppeteer/issues/868

0
elena

インタラクティブなものを探している場合は、インタラクティブデバッガーに同梱されているGithub repo/dockerイメージを使用すると、ブラウザーレベルでのデバッグが非常に簡単になります。 node/puppeteerスクリプトでデバッグを行うことは、すべてのアクションがリモートブラウザーで行われているため、実際には価値がないことがわかりました。

Github repoはこちらdocker repoはこちら

0
browserless

intellijを使用すると、webstormは非常に簡単です。これは、操り人形師やノードとうまく統合され、他に何も構成せずに左側にブレークポイントを設定することができるためです。また、無料のビジュアルスタジオコードでも同じ結果を得ることができますが、launch.jsonを構成する必要があります。これはかなり難しいため、webstormに移動しました。

0
Andrea Bisello

asyncawaitを使用すると、コード行にブレークポイントを設定し、関数呼び出しにステップインできます。

node inspect testscript.js

testscript.js

...
await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
debugger;
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script
...

これはpage.clickを呼び出すと、デバッガーでstepまたはsコマンドを使用してステップインできます。

もちろん、これはVisual Studio CodeのようなIDEによって本当に便利になります。

0
nilobarp