Back to Details

electrobun-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Electrobun Dev Mode

Electrobun 开发模式

Commands

命令

bash
electrobun dev          # build (dev env) once, then launch app
electrobun dev --watch  # build, launch, then watch for changes and rebuild+relaunch
Shorthand via package.json (standard templates):
bash
bun start               # → electrobun dev
bun run dev             # → electrobun dev --watch
bash
electrobun dev          # 构建一次（dev 环境），然后启动应用
electrobun dev --watch  # 构建、启动，然后监听变化并重新构建和启动应用
可通过 package.json 使用快捷命令（标准模板）：
bash
bun start               # → electrobun dev
bun run dev             # → electrobun dev --watch

What Happens on 
electrobun dev

执行 
electrobun dev
时的流程

  1. Reads 
    electrobun.config.ts
  2. Downloads any missing native binaries (Bun, launcher, WGPU/CEF if configured)
  3. Bundles 
    build.bun.entrypoint
    via 
    Bun.build()
    in dev mode (no minify, sourcemaps inline)
  4. Bundles each 
    build.views.*
    entrypoint
  5. Copies 
    build.copy
    files to build output
  6. Skips codesign and notarization
  7. Writes app bundle to 
    build/dev-<os>-<arch>/
  8. Launches the app, streaming stdout/stderr to your terminal
  1. 读取 
    electrobun.config.ts
  2. 下载缺失的 native binaries（Bun、launcher，以及已配置时的 WGPU/CEF）
  3. 在 dev 模式下通过 
    Bun.build()
    打包 
    build.bun.entrypoint
    （不压缩，sourcemaps 内联）
  4. 打包每个 
    build.views.*
    entrypoint
  5. 将 
    build.copy
    文件复制到构建输出目录
  6. 跳过 codesign 和 notarization
  7. 将 app bundle 写入 
    build/dev-<os>-<arch>/
  8. 启动应用，并将 stdout/stderr 流式输出到终端

Watch Mode (
--watch
)

Watch 模式（
--watch
）

After initial build+launch, watch mode monitors:
  • Dir containing 
    build.bun.entrypoint
  • Dir(s) containing each 
    build.views.*
    entrypoint
  • Dirs listed in 
    build.watch
    (extra paths)
  • Dirs of files listed in 
    build.copy
Debounce: 300ms — rapid saves are coalesced into one rebuild.
Ignored automatically: 
build/
, 
artifacts/
, 
node_modules/
, and patterns in 
build.watchIgnore
.
On change: kills running app → rebuilds → relaunches.
完成首次构建和启动后，watch 模式会监控：
  • 包含 
    build.bun.entrypoint
    的目录
  • 包含各个 
    build.views.*
    entrypoint 的目录
  • build.watch
    中列出的目录（额外路径）
  • build.copy
    中所列文件所在的目录
Debounce： 300ms——快速连续保存会合并为一次重新构建。
自动忽略： 
build/
、
artifacts/
、
node_modules/
，以及 
build.watchIgnore
中的 patterns。
发生变化时： 终止正在运行的应用 → 重新构建 → 重新启动应用。

Extra watch paths

额外的 watch 路径

typescript
// electrobun.config.ts
build: {
  watch: ["src/shared/", "assets/"],
  watchIgnore: ["src/**/*.test.ts", "src/**/*.spec.ts"],
}
typescript
// electrobun.config.ts
build: {
  watch: ["src/shared/", "assets/"],
  watchIgnore: ["src/**/*.test.ts", "src/**/*.spec.ts"],
}

CEF DevTools (Chromium inspector)

CEF DevTools（Chromium inspector）

When using 
renderer: "cef"
or 
defaultRenderer: "cef"
, the CEF renderer exposes Chrome DevTools at:
http://localhost:9222
Open in any Chrome/Chromium browser while the app is running. Lists all active renderer pages — click to inspect.
Note: DevTools are only available in 
dev
builds. They are not exposed in 
canary
or 
stable
.
使用 
renderer: "cef"
或 
defaultRenderer: "cef"
时，CEF renderer 会在以下地址暴露 Chrome DevTools：
http://localhost:9222
应用运行期间，可在任意 Chrome/Chromium browser 中打开该地址。页面会列出所有活动的 renderer pages，点击即可进行检查。
注意：DevTools 仅在 
dev
builds 中可用，不会暴露给 
canary
或 
stable
。

Native WebView Debugging (macOS)

Native WebView 调试（macOS）

For 
renderer: "native"
(WKWebView), enable the developer extras:
typescript
// In src/bun/index.ts — call openDevTools() on the BrowserView instance
const view = new BrowserView({ ... });
view.openDevTools();  // Opens Safari Web Inspector (uses private WKWebView _inspector API)
Or in Safari: Develop → [Your App] → [webview name]
对于 
renderer: "native"
（WKWebView），请启用 developer extras：
typescript
// 在 src/bun/index.ts 中——对 BrowserView 实例调用 openDevTools()
const view = new BrowserView({ ... });
view.openDevTools();  // 打开 Safari Web Inspector（使用私有 WKWebView _inspector API）
也可以在 Safari 中操作：Develop → [Your App] → [webview name]

Debugging Tips

调试技巧

  1. Console output: All 
    console.log
    from bun-side code appears in the terminal. Renderer-side 
    console.log
    only appears in devtools (not terminal).
  2. RPC tracing: Add 
    console.log
    to request/message handlers to trace cross-process calls.
  3. Source maps: Dev builds include inline source maps. Stack traces point to 
    .ts
    source lines.
  4. Slow reload? Add only changed dirs to 
    build.watch
    rather than broad patterns.
  5. App not relaunching? If the app process is holding a file lock, kill it manually: 
    pkill -f "<AppName>"
  1. Console 输出：bun-side 代码中的所有 
    console.log
    都会显示在终端中。Renderer-side 的 
    console.log
    仅显示在 devtools 中，不会输出到终端。
  2. RPC tracing：在 request/message handlers 中添加 
    console.log
    ，以跟踪跨进程调用。
  3. Source maps：Dev builds 包含内联 source maps。Stack traces 会指向 
    .ts
    源代码行。
  4. 重新加载较慢？ 仅将发生变化的目录添加到 
    build.watch
    ，避免使用宽泛的 patterns。
  5. 应用未重新启动？ 如果应用进程持有 file lock，请手动终止：
    pkill -f "<AppName>"

Build Output (dev)

构建输出（dev）

build/dev-macos-arm64/
└── <AppName>-dev.app/
    └── Contents/
        ├── MacOS/
        │   ├── launcher          # native launcher
        │   └── main.js           # bundled bun entrypoint
        ├── Resources/
        │   ├── <viewname>/       # bundled renderer
        │   └── bun               # bun runtime binary
        └── Info.plist
build/dev-macos-arm64/
└── <AppName>-dev.app/
    └── Contents/
        ├── MacOS/
        │   ├── launcher          # native launcher
        │   └── main.js           # 打包后的 bun entrypoint
        ├── Resources/
        │   ├── <viewname>/       # 打包后的 renderer
        │   └── bun               # bun runtime binary
        └── Info.plist