Help us understand the problem. What is going on with this article?

IntelliJ IDEA で Angular や React のデバッグをする

More than 1 year has passed since last update.

はじめに

  • IntellJ IDEA で Angular や React など npm で開発サーバーを起動する JavaScript アプリケーションのデバッグを行う手順をまとめた。
  • 開発サーバー設定については Angular は Angular CLI で、 React は create-react-app で作成したアプリケーションのデフォルト設定を想定して記載している。

環境

  • macOS
  • IntelliJ IDEA ULTIMATE 2017.2

手順

Chrome プラグインのインストール

IntelliJ IDEA プラグインのインストール

  • メニューの "Preferences" で "Plugins" を開く
  • "NodeJS" プラグインをインストール

npm 実行設定の追加

  • メニューの "Run" > "Edit Configurations" を開く
  • "+" 押下で "npm" を選択
  • Name を "npm start" とし、Command を "start" として "OK"
  • メニューの "Run" > "Run" で作成した "npm start" を実行
  • 以上の手順は Angular, React 共通

デバッグ設定の追加

  • メニューの "Run" > "Edit Configurations" を開く
  • "+" 押下で "JavaScript Debug" を選択
  • 接続先の URL を入力して "OK"
  • メニューの "Run" > "Debug" で作成したデバッグ設定を選択して実行
    • 前記の "npm start" 実行中に行う
  • ブラウザで対象の URL が開かれて Chrome プラグイン経由でデバッグ情報が IDEA に引き渡される
    • コードにブレークポイントを設定して正常にデバッガが利用できることを確認する。

参考 URL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした