使用 Visual Studio 2017 开发和调试 Electron Node js - 调试器附加但不正确的应用程序 window

Question

Visual Studio社区2017版本15.9.5 节点 JS 版本：10.11.0 Chrome版本：69.0.3497.106 电子版：4.0.1

按照此处所述使用对 vs 项目属性的修改：

以及此处

我能够附加到 VS 调试器并命中断点。

但是，Electron 应用程序 window 没有正确初始化。我只能通过执行 .npm start.

通过 node.js 交互式 window 将应用程序正确地运行

在调试配置下运行ning 并在 VS 中按 F5 或 Start 时，我得到一个控制台 window，然后我去附加调试器。断点命中，但 Electron 应用程序 window 看起来像这样：

项目的njsproj文件内容为：

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
    <Name>GitMon</Name>
    <RootNamespace>GitMon</RootNamespace>
    <SaveNodeJsSettingsInProjectFile>True</SaveNodeJsSettingsInProjectFile>
    <NodeExePath>D:\@Documents\My Open Source Repos\GitMon\node_modules\electron\dist\electron.exe</NodeExePath>
    <NodeExeArguments>main.js</NodeExeArguments>
    <JavaScriptTestFramework>ExportRunner</JavaScriptTestFramework>
    <ScriptArguments>--inspect-brk</ScriptArguments>
    <DebuggerPort>5858</DebuggerPort>
    <NodejsPort>
    </NodejsPort>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath)$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>0e3d7742-5973-41e0-8411-97f609c13491</ProjectGuid>
    <ProjectHome>.</ProjectHome>
    <StartupFile>main.js</StartupFile>
    <StartWebBrowser>False</StartWebBrowser>
    <SearchPath>
    </SearchPath>
    <WorkingDirectory>.</WorkingDirectory>
    <OutputPath>.</OutputPath>
    <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
    <ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
    <StartWebBrowser>True</StartWebBrowser>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="main.js" />
    <Compile Include="renderer\badgeHandler.js" />
    <Compile Include="renderer\directoryPickerCaller.js" />
    <Compile Include="renderer\externalLinkHandler.js" />
    <Compile Include="renderer\gitStatusResultDOMHandler.js" />
    <Compile Include="renderer\mainDivSizeHandler.js" />
    <Compile Include="renderer\preloader.js" />
    <Compile Include="renderer\sidenav.js" />
    <Compile Include="renderer\titlebar.js" />
    <Compile Include="renderer\zoomHandler.js" />
    <Compile Include="renderer\_requires.js" />
    <Compile Include="store.js">
      <SubType>Code</SubType>
    </Compile>
    <Content Include="css\colors.css" />
    <Content Include="css\content.css" />
    <Content Include="css\preloader.css" />
    <Content Include="css\scrollbar.css" />
    <Content Include="css\sidenav.css" />
    <Content Include="css\titlebar.css" />
    <Content Include="index.html">
      <SubType>Code</SubType>
    </Content>
    <Content Include="package.json" />
  </ItemGroup>
  <ItemGroup>
    <Folder Include="css\" />
    <Folder Include="renderer\" />
  </ItemGroup>
  <!-- Do not delete the following Import Project.  While this appears to do nothing it is a marker for setting TypeScript properties before our import that depends on them. -->
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="False" />
  <Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsTools.targets" />
</Project>

非常感谢您的帮助！

Answer 1

试试这个

在你的main.js

替换此行：

mainWindow.loadFile(`index.html`);

有了这个

mainWindow.loadURL(`file://${__dirname}/index.html`);

参考：https://www.ryadel.com/en/visual-studio-2017-setup-electron-project-run-hello-world-sample-vs2017-template-quick-start/

使用 Visual Studio 2017 开发和调试 Electron Node js - 调试器附加但不正确的应用程序 window

Using Visual Studio 2017 to develop and debug Electron Node js - Debugger attaches but incorrect application window

visual-studio-debugging

node.js

electron

visual-studio-2017