JavaScript - express + bodyParser + puppeteer - ログ

1.　概要

2.　状況

3.　ログ出力

4.　参考サイト

1.　概要

　これ、どこに書くべきか、悩みましたがね。
　とりあえず、ここに書くことにします。

2.　状況

　前ページの状態になって、呼び出し先のブラウザ上の「JavaScript」「Vue.js」がうまく動作していないことがあったのです。
　これを、どうやってデバッグすべぇかな・・・と。
　「JavaScript」「Vue.js」のソース上で。


alert("message");


　と書いても、どこにも出力されないぞ・・・と。
　「ChatGPT」くんと相談して、方法がわかりました。

3.　ログ出力

　コンテンツ上の「JavaScript」「Vue.js」で、ログを出力したい箇所には。


console.log("message");


　と記述します。
　「server.js」側で。


        browser = await puppeteer.launch({
            headless: 'new',
			executablePath: '/usr/bin/chromium-browser',
            args: ['--no-sandbox', '--disable-setuid-sandbox'],
			userDataDir: '/path/.chromium', // apache が書き込み可能な場所
        });

        const page = await browser.newPage();
        await page.goto(url, {
            waitUntil: 'networkidle0', // Vue や Ajax が落ち着くまで待つ
            timeout: 60000
        });


　と書いてある箇所で、「const page = await browser.newPage()」の行の後に、下記のように記述します。


        const page = await browser.newPage();

		// ブラウザ側の console.log を拾う
		page.on("console", (msg) => {
			// 文字列に変換して出力
			console.log("[Browser log]", msg.text());
		});

        await page.goto(url, {
            waitUntil: 'networkidle0', // Vue や Ajax が落ち着くまで待つ
            timeout: 60000
        });


　こうしますと。
　「node server.js」の実行が、デーモンのままだと何もわかりませんが。
　「node seever.js」の実行を、端末上で行えば。
　端末上にログが出力されます。

4.　参考サイト

　本ページは、「ChatGPT」くんを参考にさせていただきました。