75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
|
/**
|
||
|
|
* 调试页面加载问题
|
||
|
|
*/
|
||
|
|
const { chromium } = require('playwright');
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({
|
||
|
|
headless: false,
|
||
|
|
channel: 'chrome'
|
||
|
|
});
|
||
|
|
|
||
|
|
const page = await browser.newPage();
|
||
|
|
|
||
|
|
// 监听所有控制台消息
|
||
|
|
page.on('console', msg => {
|
||
|
|
console.log(`[${msg.type()}] ${msg.text()}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听页面错误
|
||
|
|
page.on('pageerror', error => {
|
||
|
|
console.error(`[PAGE ERROR] ${error.message}`);
|
||
|
|
console.error(error.stack);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听请求
|
||
|
|
page.on('request', request => {
|
||
|
|
console.log(`[REQUEST] ${request.method()} ${request.url()}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听响应
|
||
|
|
page.on('response', response => {
|
||
|
|
if (response.status() >= 400) {
|
||
|
|
console.error(`[RESPONSE ERROR] ${response.status()} ${response.url()}`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('正在访问 http://localhost:3000 ...');
|
||
|
|
await page.goto('http://localhost:3000', {
|
||
|
|
waitUntil: 'networkidle',
|
||
|
|
timeout: 30000
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\n等待 5 秒...');
|
||
|
|
await page.waitForTimeout(5000);
|
||
|
|
|
||
|
|
// 检查 DOM 内容
|
||
|
|
const bodyHTML = await page.evaluate(() => {
|
||
|
|
return {
|
||
|
|
root: document.getElementById('root')?.innerHTML.substring(0, 500),
|
||
|
|
bodyText: document.body.innerText.substring(0, 200),
|
||
|
|
hasReact: !!window.React,
|
||
|
|
scripts: Array.from(document.querySelectorAll('script')).map(s => s.src),
|
||
|
|
styles: Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(s => s.href)
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\n页面信息:');
|
||
|
|
console.log('Root 内容:', bodyHTML.root || '空');
|
||
|
|
console.log('Body 文本:', bodyHTML.bodyText || '空');
|
||
|
|
console.log('React 存在:', bodyHTML.hasReact);
|
||
|
|
console.log('脚本:', bodyHTML.scripts);
|
||
|
|
console.log('样式:', bodyHTML.styles);
|
||
|
|
|
||
|
|
// 截图
|
||
|
|
await page.screenshot({ path: 'debug-screenshot.png' });
|
||
|
|
console.log('\n截图已保存: debug-screenshot.png');
|
||
|
|
|
||
|
|
console.log('\n按 Enter 关闭浏览器...');
|
||
|
|
await new Promise(resolve => {
|
||
|
|
process.stdin.once('data', resolve);
|
||
|
|
});
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|