企业官网建设流程全解析

pot-desktop 调试指南：DevTools 与日志调测实战

【免费下载链接】pot-desktop🌈一个跨平台的划词翻译和OCR软件 | A cross-platform software for text translation and recognition.项目地址: https://gitcode.com/GitHub_Trending/po/pot-desktop

本文围绕 pot-desktop（跨平台划词翻译与 OCR 软件）的调测场景，解决"运行时想看后端日志、想开 DevTools 排查前端"这两个问题。项目内置的 tauri-plugin-log（日志插件）与 dev_mode（开发者模式）开关，可覆盖日志打印、页面状态与网络请求的查看。

一、先搞清楚：这套调测能力是什么

pot-desktop 基于 Tauri 架构（Rust 后端 + Web 前端），调试能力分三层：Rust 侧日志宏、前端日志 API、WebView 的 DevTools（开发者工具）。核心 API 如下：

二、动手前：编译环境与前置检查

1. 安装 Rust 工具链（stable）与 Node.js（18 及以上），包管理器使用pnpm；
2. Linux 需预装libxdo-dev、libxcb1、libxrandr2、tesseract-ocr等系统库（对照src-tauri/tauri.conf.json中 deb/rpm 的 depends 段）；
3. 克隆仓库并安装依赖：

git clone https://gitcode.com/GitHub_Trending/po/pot-desktop # 克隆仓库 cd pot-desktop && pnpm install # 安装前端依赖

预期看到：pnpm install正常结束，node_modules生成，无依赖冲突类报错。

三、埋点：在关键函数里加一行打印

以截图裁剪命令cut_image为例，在src-tauri/src/cmd.rs中补一条路径日志，用于确认截图文件落盘位置：

// src-tauri/src/cmd.rs use image::GenericImage; info!("Cut image: {}x{}+{}+{}", width, height, left, top); let mut app_cache_dir_path = cache_dir().expect("Get Cache Dir Failed"); app_cache_dir_path.push(&app_handle.config().tauri.bundle.identifier); + info!("Screenshot cache dir: {:?}", app_cache_dir_path); app_cache_dir_path.push("pot_screenshot_cut.png");

为什么选在这里：cut_image是划词截图翻译的必经路径，打印缓存目录后，出问题时可直接对照磁盘上是否存在pot_screenshot_cut.png。

前端 DevTools 调测

前端已引入tauri-plugin-log-api，例如src/window/Translate/components/SourceArea/index.jsx里可直接调用debug('...')，日志与 Rust 侧写入同一文件；再配合 F12 打开的 DevTools 观察 Console 报错与翻译接口请求。

四、构建与运行：三步拿到调试输出

cd pot-desktop # 进入仓库目录 pnpm tauri dev # 以 debug 模式启动，Vite 固定占用 1420 端口 # 启动后触发一次划词翻译，观察终端 Stdout 与日志文件

参数说明：

预期看到：终端滚动输出Start App、Init Config Store等 INFO 日志，debug 模式下 WebView 自动弹出 DevTools。

五、读懂输出：字段逐个看

日志按系统约定落盘：Linux 位于~/.local/share/com.pot_app.pot/log/，macOS 位于~/Library/Logs/com.pot_app.pot/，Windows 位于%APPDATA%\com.pot_app.pot\logs\。每行格式为[时间] [级别] [模块] 消息，以你新增的埋点为例：

• 2026-09-07T18:20:11.123：时间戳，用于和触发操作的时刻对齐；
• INFO：级别，支持 TRACE/DEBUG/INFO/WARN/ERROR 五档，按问题严重程度选debug或info；
• 模块名：来源模块，Rust 侧对应宏所在位置，前端侧为tauri-plugin-log-api调用方；
• Screenshot cache dir: ...：消息体，即第三步埋点打印的缓存路径；
• Console：DevTools 中前端 JS 报错与console.*输出；
• Network：DevTools 中各翻译服务接口的请求/响应、状态码与耗时。

预期看到：触发一次划词翻译后，终端与日志文件中同步出现你新增的Screenshot cache dir记录，即埋点生效。

六、踩坑提醒与版本限制

⚠ 以下限制在动手前先确认：

• open_devtools命令虽已全局注册，但前端只有在设置页"通用 → 开发模式"（dev_mode）开启后按 F12 才会调用它；debug 构建下 DevTools 会自动打开；
• pnpm tauri build出的 release 包启用压缩且无 sourcemap，前端堆栈不可读，调测一律使用pnpm tauri dev或 debug 构建；
• vite.config.js固定 1420 端口且strictPort为 true，端口被占用时tauri dev直接报错退出，需先释放端口再启动。

至此，一条info!埋点加一次pnpm tauri dev即构成 pot-desktop 的日常调测闭环，更多接口细节请查阅 tauri-plugin-log 与 Tauri 的官方 API 文档。

【免费下载链接】pot-desktop🌈一个跨平台的划词翻译和OCR软件 | A cross-platform software for text translation and recognition.项目地址: https://gitcode.com/GitHub_Trending/po/pot-desktop