everything-is-suitable/playwright-diagnose-white-screen.js

const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:5174';

(async () => {
  console.log('🔍 开始诊断前端白屏问题...\n');
  
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  const page = await context.newPage();
  
  // 监听控制台消息
  const consoleMessages = [];
  const errorMessages = [];
  
  page.on('console', msg => {
    const text = msg.text();
    const type = msg.type();
    consoleMessages.push({ type, text });
    if (type === 'error') {
      errorMessages.push(text);
      console.log(`❌ 控制台错误: ${text}`);
    }
  });
  
  page.on('pageerror', error => {
    errorMessages.push(error.message);
    console.log(`❌ 页面错误: ${error.message}`);
  });
  
  // 监听网络请求
  const failedRequests = [];
  page.on('response', response => {
    if (!response.ok() && response.status() !== 0) {
      failedRequests.push({
        url: response.url(),
        status: response.status(),
        statusText: response.statusText()
      });
    }
  });
  
  try {
    console.log('📄 正在访问页面:', TARGET_URL);
    const startTime = Date.now();
    
    await page.goto(TARGET_URL, { 
      timeout: 60000,
      waitUntil: 'networkidle'
    });
    
    const loadTime = Date.now() - startTime;
    console.log(`⏱️ 页面加载耗时: ${loadTime}ms\n`);
    
    // 等待一段时间确保所有资源加载
    await page.waitForTimeout(3000);
    
    // 获取页面标题
    const title = await page.title();
    console.log(`📋 页面标题: "${title}"`);
    
    // 检查DOM结构
    const appDiv = await page.$('#app');
    console.log(`🔍 #app 元素存在: ${!!appDiv}`);
    
    if (appDiv) {
      const appHTML = await appDiv.innerHTML();
      const appText = await appDiv.innerText();
      console.log(`📄 #app 内容长度: ${appHTML.length} 字符`);
      console.log(`📝 #app 文本内容: "${appText.substring(0, 200)}${appText.length > 200 ? '...' : ''}"`);
      
      // 检查是否有子元素
      const childCount = await page.evaluate(() => {
        const app = document.getElementById('app');
        return app ? app.children.length : 0;
      });
      console.log(`👶 #app 子元素数量: ${childCount}`);
      
      if (childCount === 0) {
        console.log('\n⚠️ 警告: #app 元素为空，Vue应用可能未正确挂载！');
      }
    }
    
    // 检查body内容
    const bodyHTML = await page.evaluate(() => document.body.innerHTML);
    console.log(`\n📄 Body内容长度: ${bodyHTML.length} 字符`);
    
    // 检查是否是白屏
    const isWhiteScreen = await page.evaluate(() => {
      const body = document.body;
      const app = document.getElementById('app');
      // 检查body或app是否有可见内容
      const hasVisibleContent = body.innerText.trim().length > 0 || 
                                body.querySelectorAll('img, canvas, svg, video, iframe').length > 0;
      return !hasVisibleContent;
    });
    
    console.log(`\n${isWhiteScreen ? '⚠️ 检测到白屏！' : '✅ 页面有内容显示'}`);
    
    // 检查Vue是否挂载
    const vueMounted = await page.evaluate(() => {
      return !!window.__VUE__ || !!document.querySelector('[data-v-app]');
    });
    console.log(`🔧 Vue应用已挂载: ${vueMounted}`);
    
    // 检查是否有加载错误提示
    const hasErrorElement = await page.$('.error, .loading-error, [class*="error"], [class*="fail"]');
    console.log(`❌ 发现错误元素: ${!!hasErrorElement}`);
    
    // 网络请求统计
    console.log(`\n📊 网络请求统计:`);
    console.log(`   - 失败请求数: ${failedRequests.length}`);
    if (failedRequests.length > 0) {
      console.log(`   - 失败的请求:`);
      failedRequests.forEach(req => {
        console.log(`     • ${req.url} - ${req.status} ${req.statusText}`);
      });
    }
    
    // 控制台消息统计
    console.log(`\n📊 控制台消息统计:`);
    console.log(`   - 总消息数: ${consoleMessages.length}`);
    console.log(`   - 错误数: ${errorMessages.length}`);
    
    if (errorMessages.length > 0) {
      console.log(`\n❌ JavaScript错误列表:`);
      errorMessages.forEach((err, idx) => {
        console.log(`   ${idx + 1}. ${err}`);
      });
    }
    
    // 截图保存
    await page.screenshot({ path: '/Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-diagnosis.png', fullPage: true });
    console.log(`\n📸 截图已保存到: /Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-diagnosis.png`);
    
    // 总结
    console.log(`\n${'='.repeat(50)}`);
    console.log('📋 诊断总结:');
    if (isWhiteScreen) {
      console.log('   ⚠️ 页面显示为白屏');
      if (errorMessages.length > 0) {
        console.log('   ❌ 发现JavaScript错误，可能是导致白屏的原因');
      }
      if (!vueMounted) {
        console.log('   🔧 Vue应用未正确挂载');
      }
      if (failedRequests.length > 0) {
        console.log('   📡 部分资源加载失败');
      }
    } else {
      console.log('   ✅ 页面内容正常显示');
    }
    console.log(`${'='.repeat(50)}`);
    
  } catch (error) {
    console.error('❌ 诊断过程中出错:', error.message);
    await page.screenshot({ path: '/Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-error.png', fullPage: true });
    console.log(`📸 错误截图已保存到: /Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-error.png`);
  } finally {
    await browser.close();
  }
})();