人形劇のスクリプトをデバッグする方法はありますか?なんらかの理由でボタンの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
応答が遅れるようなものですが、参考として役立つかもしれません。次のようにクライアントスクリプトをデバッグできます。
_await page.evaluate(() => {
debugger;
const btn = document.querySelector(...);
btn.click();
});
_
次に、以下を使用してpuppeteerを起動します。
puppeteer.launch({devtools: true})
Chromiumが開き、ブレークポイントで停止します。
Visual Studioコードを使用します。テキストエディターの左バーをクリックするだけでブレークポイントを設定できます- https://code.visualstudio.com/docs/nodejs/nodejs-debugging
私はこれが役に立ったとわかった: https://github.com/GoogleChrome/puppeteer#debugging-tips ここからこのリードを得た: https://github.com/GoogleChrome/puppeteer/issues/868
インタラクティブなものを探している場合は、インタラクティブデバッガーに同梱されているGithub repo/dockerイメージを使用すると、ブラウザーレベルでのデバッグが非常に簡単になります。 node/puppeteerスクリプトでデバッグを行うことは、すべてのアクションがリモートブラウザーで行われているため、実際には価値がないことがわかりました。
intellijを使用すると、webstormは非常に簡単です。これは、操り人形師やノードとうまく統合され、他に何も構成せずに左側にブレークポイントを設定することができるためです。また、無料のビジュアルスタジオコードでも同じ結果を得ることができますが、launch.jsonを構成する必要があります。これはかなり難しいため、webstormに移動しました。
async
await
を使用すると、コード行にブレークポイントを設定し、関数呼び出しにステップインできます。
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によって本当に便利になります。