Skip to content

WINDOWS_DEBUG_GUIDE.md

Latest commit

 

History

History
175 lines (137 loc) · 4.87 KB

WINDOWS_DEBUG_GUIDE.md

File metadata and controls

175 lines (137 loc) · 4.87 KB
Raw

Windows 图片显示问题调试指南

最新修复 (2025-12-15)

问题分析

从日志可以看到:

[ScriptManager] Preview image for recording_1765766962807: D:\vrt\VRT-1.0.0-win\recordings\recording_1765766962807\step_02.png

文件路径是正确的,但图片没有渲染。问题出在 media:// 协议处理 Windows 驱动器号路径时的逻辑。

修复内容

1. 改进 Windows 路径处理

在 src/main/index.ts 的 media 协议处理器中:

之前的逻辑:

// 简单地在路径前加 /
if (!filePath.startsWith('/')) {
    filePath = '/' + filePath;
}
// 结果: /D:/vrt/... (可能不正确)

新的逻辑:

if (process.platform === 'win32') {
    // 规范化反斜杠
    filePath = filePath.replace(/\\/g, '/');
    
    // 检测并处理驱动器号 (D:/, C:/, etc.)
    const driveLetterMatch = filePath.match(/^\/?([A-Za-z]:\/.*)/);
    if (driveLetterMatch) {
        filePath = '/' + driveLetterMatch[1];
        // 结果: /D:/vrt/... (正确格式)
    }
}

2. 添加详细错误日志

return net.fetch(finalUrl).catch(err => {
    log.error('[Media Protocol] Failed to fetch:', finalUrl, err);
    log.error('[Media Protocol] Error details:', err.message);
    throw err;
});

3. 添加前端调试日志

在 src/renderer/App.tsx 的 formatScreenshotPath 函数中添加 console.log:

console.log('[App] formatScreenshotPath - Input:', path);
console.log('[App] formatScreenshotPath - Output:', mediaUrl);

测试步骤

1. 重新打包应用

npm run dist:win

2. 安装并运行

  1. 安装打包好的应用
  2. 创建一个新的 recording (确保有截图)
  3. 返回首页查看 recordings 列表

3. 查看日志

打开开发者工具 (如果需要)

在应用中按 Ctrl+Shift+I 打开开发者工具

查看主进程日志

  1. 打开应用
  2. 进入 Settings → Advanced
  3. 点击 "Open Folder" 打开日志目录
  4. 打开 main.log 文件

期望看到的日志

成功的情况:

[Media Protocol] Original URL: media://D:\vrt\VRT-1.0.0-win\recordings\recording_xxx\step_02.png
[Media Protocol] Initial path: D:\vrt\VRT-1.0.0-win\recordings\recording_xxx\step_02.png
[Media Protocol] Decoded path: D:\vrt\VRT-1.0.0-win\recordings\recording_xxx\step_02.png
[Media Protocol] After backslash normalization: D:/vrt/VRT-1.0.0-win/recordings/recording_xxx/step_02.png
[Media Protocol] Windows drive letter detected: /D:/vrt/VRT-1.0.0-win/recordings/recording_xxx/step_02.png
[Media Protocol] Final file URL: file:///D:/vrt/VRT-1.0.0-win/recordings/recording_xxx/step_02.png

失败的情况 (会有额外的错误信息):

[Media Protocol] Failed to fetch: file:///D:/vrt/...
[Media Protocol] Error details: [具体错误信息]

查看渲染进程日志 (Console)

在开发者工具的 Console 中查看:

[App] formatScreenshotPath - Input: D:\vrt\VRT-1.0.0-win\recordings\recording_xxx\step_02.png
[App] formatScreenshotPath - Output: media://D:\vrt\VRT-1.0.0-win\recordings\recording_xxx\step_02.png

可能的问题和解决方案

问题 1: 图片仍然不显示

检查点:

  1. 确认文件确实存在

    [ScriptManager] Preview image for recording_xxx: D:\vrt\...\step_02.png

    如果看到 "Preview image not found",说明文件不存在

  2. 检查 media 协议日志

    • 是否有 "Windows drive letter detected" 日志?
    • Final file URL 格式是否正确?

  3. 检查是否有错误日志

    [Media Protocol] Failed to fetch: ...
[Media Protocol] Error details: ...

问题 2: 路径中有特殊字符

如果路径中有空格或特殊字符,检查:

[Media Protocol] Decoded path: ...

确保 URL 编码被正确解码

问题 3: 权限问题

Windows 可能阻止应用访问某些目录。尝试:

  1. 以管理员身份运行应用
  2. 检查文件权限
  3. 将 recordings 目录移到用户文档目录

额外的调试技巧

1. 手动测试 file:// URL

在浏览器中直接打开:

file:///D:/vrt/VRT-1.0.0-win/recordings/recording_xxx/step_02.png

如果能打开,说明路径格式正确

2. 检查图片文件

确认 step_02.png 是有效的图片文件:

  • 文件大小 > 0
  • 可以用图片查看器打开

3. 对比开发模式和生产模式

在开发模式下 (npm run dev) 测试是否正常,帮助定位是打包问题还是代码问题

预期结果

修复后,你应该能够:

  1. ✅ 在首页看到 recordings 的预览图片
  2. ✅ 在日志中看到完整的路径转换过程
  3. ✅ 没有 "Failed to fetch" 错误
  4. ✅ 图片加载正常,没有 404 错误

如果问题仍然存在

请提供以下信息:

  1. 完整的 main.log 文件内容 (特别是 Media Protocol 相关的部分)
  2. 浏览器控制台的错误信息
  3. 一个具体的图片路径示例
  4. Windows 版本信息

这将帮助我们进一步诊断问题。