Add Waterfall Chart & Request Inspector

Features Added:
- Interactive waterfall timeline visualization
- Color-coded timing bars (DNS, Connect, SSL, TTFB, Download)
- Request filtering by resource type (HTML, JS, CSS, Images, Fonts)
- Detailed request inspector dialog with timing breakdown
- HAR data extraction from Lighthouse results
- Size/compression metrics display
- Third-party resource identification
- Render-blocking resource detection

Technical Implementation:
- Created lib/har-parser.js for network data extraction
- Built waterfall.html with SVG-based timeline renderer
- Added waterfall.js with interactive controls
- Integrated HAR generation into test runner workflow
- Updated main UI with View Waterfall link
This commit is contained in:
2025-12-28 01:32:27 +11:00
parent 541f451f15
commit 4aa890da6f
12 changed files with 891 additions and 1 deletions

18
test-db.js Normal file
View File

@@ -0,0 +1,18 @@
const db = require('./lib/db');
(async () => {
console.log('Testing DB connectivity...');
try {
const client = await db.pool.connect();
console.log('Successfully connected to PostgreSQL!');
client.release();
console.log('Initializing Schema...');
await db.initSchema();
console.log('Schema Check Complete.');
} catch (err) {
console.error('DB Connection Failed:', err);
} finally {
process.exit();
}
})();