106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Interactive Browser Debugger for AI Agents
|
|
*
|
|
* This script launches a browser in non-headless mode so AI agents can
|
|
* visually debug issues during development.
|
|
*
|
|
* Usage:
|
|
* yarn debug:browser [url-path] [options]
|
|
*
|
|
* Examples:
|
|
* yarn debug:browser /influxdb3/core/
|
|
* yarn debug:browser /influxdb3/core/ --devtools
|
|
* yarn debug:browser /influxdb3/core/ --slow-mo 100
|
|
*
|
|
* Options:
|
|
* --devtools Open Chrome DevTools
|
|
* --slow-mo NUM Slow down by NUM milliseconds
|
|
* --viewport WxH Set viewport size (default: 1280x720)
|
|
* --base-url URL Set base URL (default: http://localhost:1313)
|
|
* --chrome PATH Path to Chrome executable
|
|
*/
|
|
|
|
import {
|
|
launchBrowser,
|
|
navigateToPage,
|
|
debugPage,
|
|
} from './utils/puppeteer-helpers.js';
|
|
|
|
async function main() {
|
|
const args = process.argv.slice(2);
|
|
|
|
// Parse arguments
|
|
const urlPath = args.find((arg) => !arg.startsWith('--')) || '/';
|
|
const devtools = args.includes('--devtools');
|
|
const slowMo = parseInt(
|
|
args.find((arg) => arg.startsWith('--slow-mo'))?.split('=')[1] || '0',
|
|
10
|
|
);
|
|
const viewport =
|
|
args.find((arg) => arg.startsWith('--viewport'))?.split('=')[1] ||
|
|
'1280x720';
|
|
const baseUrl =
|
|
args.find((arg) => arg.startsWith('--base-url'))?.split('=')[1] ||
|
|
'http://localhost:1313';
|
|
const chromePath = args
|
|
.find((arg) => arg.startsWith('--chrome'))
|
|
?.split('=')[1];
|
|
|
|
const [width, height] = viewport.split('x').map(Number);
|
|
|
|
console.log('\n🔍 Interactive Browser Debugger');
|
|
console.log('================================\n');
|
|
|
|
let browser;
|
|
try {
|
|
// Launch browser
|
|
console.log('Launching browser...');
|
|
browser = await launchBrowser({
|
|
headless: false,
|
|
devtools,
|
|
slowMo,
|
|
executablePath: chromePath,
|
|
});
|
|
|
|
// Navigate to page
|
|
const page = await navigateToPage(browser, urlPath, { baseUrl });
|
|
|
|
// Set viewport
|
|
await page.setViewport({ width, height });
|
|
console.log(`Viewport set to: ${width}x${height}`);
|
|
|
|
// Enable console logging
|
|
page.on('console', (msg) => {
|
|
console.log(`[Browser Console ${msg.type()}]:`, msg.text());
|
|
});
|
|
|
|
page.on('pageerror', (error) => {
|
|
console.error('[Page Error]:', error.message);
|
|
});
|
|
|
|
console.log('\n✓ Browser ready for debugging');
|
|
console.log('\nThe browser will remain open for manual inspection.');
|
|
console.log('Press Ctrl+C to close the browser and exit.\n');
|
|
|
|
// Keep the browser open until user interrupts
|
|
await new Promise((resolve) => {
|
|
process.on('SIGINT', () => {
|
|
console.log('\nClosing browser...');
|
|
resolve();
|
|
});
|
|
});
|
|
} catch (error) {
|
|
console.error('Error:', error.message);
|
|
process.exit(1);
|
|
} finally {
|
|
if (browser) {
|
|
await browser.close();
|
|
console.log('✓ Browser closed');
|
|
}
|
|
}
|
|
}
|
|
|
|
main();
|