diff --git a/index.html b/index.html index f14d09e..455d6a6 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,7 @@ #network-table { grid-area: b; cursor: pointer; + overflow: scroll; } .selected-row { @@ -83,6 +84,7 @@ const networkTableBody = document.querySelector('#network-table tbody'); const networkDetail = document.querySelector('#network-detail'); const networkDetailEditor = new JSONEditor(networkDetail, {}) + const networkDetailDelaySeconds = 5; let networkBucket = null; function onNewNetworkData(raw) { @@ -145,21 +147,24 @@ }); function networkOnSeek(elapsed) { - const records = networkBucket[elapsed] || []; const rows = []; - console.log(records); - for (let recordIdx = 0; recordIdx < records.length; recordIdx++) { - const record = records[recordIdx]; - if (record.requestMethod === "OPTIONS") { - continue; + + for (let currentTime = elapsed - networkDetailDelaySeconds; currentTime <= elapsed; currentTime++) { + const records = networkBucket[currentTime] || []; + for (let recordIdx = 0; recordIdx < records.length; recordIdx++) { + const record = records[recordIdx]; + const contentType = record.responseHeaders["content-type"] || ""; + if (record.requestMethod === "OPTIONS" || record.requestType != "fetch" || !contentType.toLowerCase().includes("json")) { + continue; + } + rows.push(` + + ${record.responseStatus} + ${record.requestMethod} + ${record.requestUrl} + + `) } - rows.push(` - - ${record.responseStatus} - ${record.requestMethod} - ${record.requestUrl} - - `) } networkTableBody.innerHTML = rows.join(""); } diff --git a/index.js b/index.js index 318bd72..ae2bf07 100644 --- a/index.js +++ b/index.js @@ -1,39 +1,56 @@ 'use strict'; +const VERSION = '1.0'; // This will determine breaking changes on the record format. const puppeteer = require('puppeteer'); const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder'); const fs = require('fs'); -const url = "https://app.dev.bluecrewenv.com/app.html#!/roster"; +if (process.argv.length != 3) { + console.error(`Usage: ${process.argv[0]} ${process.argv[1]} `); + process.exit(1); +} -function asleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)) -} +const url = process.argv[2]; (async () => { - const browser = await puppeteer.launch({ headless: false, devtools: false }); + const browser = await puppeteer.launch({ + headless: false, devtools: false, defaultViewport: null, args: [ + "--start-fullscreen", + ] + }); const page = await browser.newPage(); - await page.setViewport({ width: 1366, height: 768}); const customUA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36'; const records = []; await page.setUserAgent(customUA); page.on('response', async response => { - if (response.request().resourceType() != "xhr") { + if (response.timing() === null) { return; } + const timestamp = Date.now(); + const timing = response.timing(); const requestUrl = response.url(); const responseHeaders = response.headers(); const responseStatus = response.status(); const requestMethod = response.request().method(); + const requestType = response.request().resourceType(); + let responseJson; + try { + responseJson = await response.json(); + } catch (err) { + responseJson = { "error": `invalid json: ${err}` }; + } records.push({ - timestamp: Date.now(), + timestamp, + timing, requestUrl, responseHeaders, responseStatus, requestMethod, + requestType, + responseJson, }); }); @@ -43,24 +60,32 @@ function asleep(ms) { console.log(`Going to ${url}`) page.goto(url); - // TODO: Figure out how to close the browser - await asleep(10000); + await new Promise((resolve) => { + page.on("close", () => { + resolve(); + }); + }) await recorder.stop(); console.log("Stopped recorder"); - // const pages = await browser.pages(); - // for (let i = 0; i < pages.length; i++) { - // await pages[i].close(); - // } - // await browser.close(); - // console.log("Closed browser"); const report = { + version: VERSION, startTimestamp, - records: records, + records, }; const reportJson = JSON.stringify(report, null, 2); const reportPath = `report_${startTimestamp.toString()}.json` fs.writeFileSync(reportPath, reportJson); console.log(`Recorded to ${reportPath}`) + + // HACK: + // This should be the correct way to exit. But, it always hangs. For now, use process.exit(0) to cleanup + // const pages = await browser.pages(); + // for (let i = 0; i < pages.length; i++) { + // await pages[i].close(); + // } + // await browser.close(); + // console.log("Closed browser"); + process.exit(0); })()