WebStormとnpmでのデバッグ

Question

私はWeb開発を初めて利用しています（通常、バックエンドの開発者です）。

現在のワークフローを反映するための開発環境を設定しようとしています。私はIntelliJ UltimateでJavaを開発しています。私はどのように進歩してデバッグするのが好きです。

現在のフロントエンド開発チームは、NPMを開始し、デバッグにクローム開発ツールウィンドウを使用します。

私はクローム開発ツールウィンドウを使用する代わりに、WebStormにブレークポイントを設定できるように、このプロセスにWebStormを接続する方法はありますか？

私はChromeでJetBrainsの拡張機能をインストールしていると私は自分のサイト上でこれを行う方法を見つけることができません。私は、フロントエンドの開発に非常に新しいですと

ここでも、自分の無知を言い訳してください。しかし、私はこの機能を得ることができれば素晴らしいだろう。

ご迷惑をおかけして申し訳ございません。

Answer 1

はあなたが がここであなたも

ショートカットキーを見ることができ、すべてのステップを実行する方法であるブレークポイントを有効知ってインストールすると、リンク ExtensionJetBrains IDE Support

はすでにここにインストールクローム拡張機能を必要としますあなたはブレークポイントを有効にしたら

そしてちょうど 別のオプション[ファイル] - > [設定に行くブレークポイントを設定するために数行目に近いクリックして、ブレークポイントを有効

あなたはあなたのコードのオープンを実行するときは、この魔法が表示されます、その後、同様の検査：D :)

Answer 2

は、ブレークポイントを追加し、https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserverで指示に従ってJavaScriptのデバッグ実行構成を作成し、 npm経由でサーバを起動し、上記の設定を選択してDebugを押してください。 もこれらのビデオを参照してください。

• クイックスタート：https://www.youtube.com/watch?v=a-IsnxZpRrQ
• ブレークポイント、ステッピング、時計：https://www.youtube.com/watch?v=CdXoeVRN1JU