2、Chrome DevTools入门：打开DevTools、Elements面板、Console面板、Sources面板

好，咱们正式开始动手了。调试 Electron 应用，说白了就是跟 Chrome DevTools 打交道。你想想看，Electron 的渲染进程本质上就是一个 Chromium 浏览器窗口，所以浏览器那套调试工具，在这儿全都能用。

我个人习惯，一打开 Electron 应用第一件事就是呼出 DevTools。为什么？因为我要确认渲染进程有没有报错，网络请求通不通，DOM 结构对不对。这些信息，全藏在 DevTools 里。

2.1 打开 DevTools 的几种姿势

打开方式其实有好几种，我挑最常用的三种说。

  • 快捷键法：Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）。这是最快的方式，我基本天天用。
  • 菜单法：点击菜单栏「视图」→「切换开发者工具」。如果你在开发阶段，菜单栏默认是显示的。
  • 代码控制法：在主进程或渲染进程里调用 win.webContents.openDevTools()。这个我常用在自动测试脚本里，让工具自己弹出来。
小技巧：如果你在渲染进程里按快捷键没反应，检查一下是不是焦点跑到了主进程的菜单上。点一下页面空白区域再按，基本都能解决。

2.2 Elements 面板：看透你的 DOM

Elements 面板，说白了就是 HTML 结构的实时快照。你在页面上看到的所有元素，都能在这里找到对应的节点。

我举个例子。假设你写了一个按钮：

<button id="myBtn" class="btn-primary">点击我</button>

在 Elements 面板里，你可以直接选中这个 <button> 节点。右侧的 Styles 子面板会显示它的所有 CSS 样式——继承的、覆盖的、甚至被划掉的（表示未生效）。

我最常用的几个操作：

  • 实时修改样式：双击某个 CSS 属性值，直接改。比如把 background-color: blue 改成 red，页面立刻变色。这比改完代码再刷新快多了。
  • 添加断点：右键点击 DOM 节点 → 「Break on」→「subtree modifications」。当这个节点的子元素发生变化时，调试器会自动暂停。我在排查动态渲染 bug 时经常用这招。
  • 查看盒模型：在右侧 Computed 面板里，能看到 margin、border、padding、content 的精确像素值。我曾经遇到一个布局错位的问题，查了半天，最后发现是 padding 多算了 2px。
注意：在 Elements 面板里修改的样式只在当前会话有效。刷新页面就没了。如果你想永久保存，记得把改动的代码复制回源文件。

2.3 Console 面板：你的交互式调试台

Console 面板，我愿称之为「调试第一站」。你可以在里面执行任意 JavaScript 代码，查看变量值，甚至调用函数。

基础用法：

// 打印日志
console.log('Hello Electron');
console.warn('这是一个警告');
console.error('这是一个错误');

// 查看对象
const user = { name: '张三', age: 25 };
console.table(user);  // 以表格形式展示

// 计算表达式
2 + 2  // 直接输入，回车就能看到结果

嗯，这里要注意一点。Console 里的代码是在当前页面的上下文中执行的。也就是说，你可以直接访问页面里的全局变量和函数。比如你的页面里有个 window.app 对象，在 Console 里输入 window.app 就能看到它的全部属性。

我曾经踩过的一个坑：在 Console 里执行了 document.querySelector('#myBtn').click()，结果触发了按钮的点击事件，导致页面跳转了。所以，操作 DOM 时一定要确认好选择器，别手滑。

实用技巧：用 $0 引用当前在 Elements 面板中选中的元素。比如你在 Elements 里选中了一个 <div>，然后在 Console 里输入 $0.style.backgroundColor = 'red'，这个 div 的背景色就变了。这比手动写选择器方便多了。

2.4 Sources 面板：断点调试的核心战场

Sources 面板，是调试 JavaScript 代码的主阵地。你可以在这里设置断点、单步执行、查看调用栈和变量值。

设置断点：

在 Sources 面板左侧的文件树里找到你的 JS 文件（比如 renderer.js），点击行号左侧的空白区域，就会出现一个蓝色箭头，这就是断点。当代码执行到这一行时，会自动暂停。

调试控制按钮：

按钮 快捷键 作用
▶ 继续执行 F8 恢复执行，直到下一个断点
⏭ 单步跳过 F10 执行当前行，不进入函数内部
⏬ 单步进入 F11 进入当前行调用的函数内部
⏫ 单步跳出 Shift+F11 跳出当前函数，回到调用处

查看变量：

代码暂停时，右侧的 Scope 面板会显示当前作用域内的所有变量。你可以看到它们的当前值。把鼠标悬停在代码中的变量名上，也会弹出一个小提示框显示值。

我个人习惯，在调试复杂逻辑时，会在关键路径上打三四个断点，然后一步步走。比如处理用户点击事件时，我会在事件监听函数的第一行、数据处理函数内部、以及 UI 更新函数处各打一个断点。这样能清晰地看到数据是怎么流转的。

避坑指南：我曾经在调试 Electron 的主进程时，发现 Sources 面板里找不到主进程的代码。后来才意识到，主进程的调试需要单独打开 DevTools。方法是在主进程代码里调用 BrowserWindow.getFocusedWindow().webContents.openDevTools()，或者启动时加 --inspect 参数。渲染进程的 DevTools 默认只能调试渲染进程的代码。

2.5 三个面板的配合使用

实际调试时，这三个面板往往是配合使用的。我给你说个真实场景。

有一次，我写了一个 Electron 应用，页面上的一个列表死活不显示数据。我先是打开 Console 面板，输入 console.log(data)，发现数据确实从后端返回了。然后我去 Sources 面板，在渲染列表的函数里打了断点，一步步执行，发现是 map 方法里有个条件判断写错了，导致数据被过滤掉了。最后我去 Elements 面板，确认列表的容器元素确实存在，只是内容为空。

你看，Console 查数据、Sources 查逻辑、Elements 查结构，三个面板一配合，问题很快就定位了。

总结一下：
- Elements 面板：看 DOM 和 CSS，适合排查布局和样式问题。
- Console 面板：执行代码、查看日志，适合快速验证数据和函数。
- Sources 面板：断点调试，适合深入分析代码逻辑。

嗯，这一章的内容就到这里。下一章我们会深入 Sources 面板，讲讲条件断点、日志断点和异步调试这些进阶技巧。到时候你会发现，调试 Electron 应用其实可以很优雅。

← 上一章 📖 返回目录 下一章 →