使用 DevTools 调试

仅 SDK 版本

DevTools 仅在 SDK 版本 中可用。建议使用 SDK 版本开发和测试您的应用程序。并使用其他版本进行生产。

打开开发者工具

DevTools 可以使用键盘快捷键 F12（Windows 和 Linux）或 ⌘+⌥+i（Mac）打开。

或者，您可以使用 NW.js API win.showDevTools() 以编程方式打开 DevTools。

Node.js 模块调试

默认情况下，NW.js 在 独立上下文模式 下运行。要调试 Node.js 模块，您可以右键单击应用程序并选择“检查背景页面”。在调试器中进入 Node.js 模块时，背景页面的 DevTools 会自动获得焦点并在特定语句处停止。

如果您的应用程序在 混合上下文模式 下运行，则可以在同一窗口的 DevTools 窗口中直接调试 Node.js 模块。有关差异，请参阅 NW.js 中的 JavaScript 上下文。

远程调试

您可以使用 --remote-debugging-port=port 命令行选项指定 DevTools 应该监听的端口。例如，通过运行 nw --remote-debugging-port=9222，您可以在浏览器中打开 http://localhost:9222/ 以远程访问调试器。

使用 DevTools 扩展

DevTools 扩展完全受支持，包括 ReactJS、Vue.js 等扩展。要使用它，请将权限“chrome-extension://*”添加到 devtools 扩展的 manifest.json 文件中，并在启动 nw 时使用 --load-extension=path/to/extension 加载它。devtools 扩展的文件可以在您从 Chrome 网上应用店安装它们后从 Chrome 浏览器的扩展文件夹中复制。

React 示例

解压缩它们，下载 SDK 构建并使用以下命令运行：nw.exe --load-extension=path/to/devtools path/to/app/folder

该应用程序是一个简单的 React 应用程序，添加了“package.json”。devtools 文件来自从 Chrome 网上应用店安装的官方 React devtools 扩展的 Chrome 浏览器扩展文件夹。仅修改了清单文件以添加权限：“chrome-extension://*”。

Vue 示例

  1. npm install --save-dev nw-vue-devtools-prebuilt
  2. 将此添加到您的 package.json 中
    "chromium-args": "--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
  3. 您的应用程序中必须使用 Vue.js，并且不能被压缩（使用 vue.js 而不是 vue.min.js）。

这将自动从 Chrome 网上应用店下载最新的 Vue-DevTools，解压缩并修改它以在 NW.js 中工作。

如果您使用的是 nwjs-builder-phoenix，则将 "chromium-args" 添加到您的 package.json build.strippedProperties 数组中。