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);
})()