Node.jsツールを使用したVisual Studio（VSCodeではない）を使用したElectronアプリの作成
VSCodeではなくVisual Studioを使用して、単純なElectronアプリを作成しようとしています。これは、Visual Studio（v1.1）拡張用のNode.jsツールを使用して行っています。 npm startから起動すると正常に動作する基本的なクイックスタートアプリを使用していますが、Visual Studioから起動すると、起動時に次のエラーが発生します。
「最初の行にモジュール「電子」が見つかりません：
const electron = require('electron');
Node.jsデバッガーを起動する前に、まずElectronアプリを起動するようにVisual Studioに指示できますか？他の誰かがこのセットアップをまったく機能するように設定しましたか？
これは可能です。以下を実行してみてください。
- Visual Studioで空のNode.js JavaScriptコンソールアプリを作成します。最新バージョンのノードがインストールされている必要があります：5.6.0があります。 VS 2015を使用しています。
作成されたpackage.jsonに依存関係セクションを追加し、electronを参照します。それが私が使用しているバージョンであるため、私は以下のように0.36.2を参照しました：
「依存関係」：{「電子構築済み」：「0.36.2」}、
- これにより、ソリューションエクスプローラーにnpmの下にエントリが追加されるため、実際にインストールするには、npmパッケージを右クリック/インストールするか、コマンドプロンプトを起動してnpm installを実行します。
- GitHubのelectron-quick-startからコードをコピーします。GitHubと同じindex.htmlを作成し、クイックスタートmain.jsの内容をapp.jsに貼り付けます。名前を変更する必要はありません。
- コンソールアプリプロジェクトファイルのプロパティに移動します。 「Node exe path：」と表示されている場所には、サブフォルダーnode_modules\electron-prebuilt\dist\electron.exeにあるインストールされたelectron.exeへのパスを入力します。
- App.jsのcreateWindowの最初の行にブレークポイントを配置します。
- デバッグで開始：ブレークポイントで中断し、続行すると基本的な電子アプリが表示されます。
これはすべてうまくいきますが、それがどれほど役立つかは、Visual Studioで何をしたいかによって異なります。メインスレッドでのみ中断しますが、通常どおりChrome devツールを使用してレンダラースレッドをデバッグできます。ノードツールアプリには少し制限があります。方が良いだろう。
2017年5月編集：これは、Visual Studio 2017およびelectron 1.6.6および現在の electron-quick-start で引き続き動作します。 電子独自のクイックスタートコード 。 「electron-prebuilt」の代わりに「electron」をインストールできるようになりました（「dependencies」：{"electron"： "1.6.6"}、）。
2017年11月編集：このアプローチは、Electron 1.7.x以降では動作しなくなりました。それはまだ電子がリリースされているelectron 1.6.xバージョンで動作します。バージョン1.7.x以降では、上記の手順に従うことができますが、デバッグを開始してもVisual Studioはすぐに壊れません。代わりに、さらに追加する必要があります。
- [プロジェクトプロパティ]の[Node.exeオプション]の下に[--inspect-brk]を追加します。
- デバッグで開始
- Visual Studioでデバッグ/プロセスへのアタッチを行い、Webkit websocketプロセスにアタッチします ' http://127.0.0.1:5858 '
- コードが破損し、続行できます。
詳細と写真は別の スタックオーバーフローに関する回答 にあります。