WebStorm で angular2 のデバッグをしようとした話

最近、Angular2を使ってます。なんというかすごいですね、本当に高機能でよくできてるし、TypeScriptは使ってて気持ちがいいです。

IDEにWebStormを用いて、プロジェクトは Angular-CLI を使って新規作成、CSSフレームワークとして、Bootstrapを使ってみました。(以前の記事

何分、今風のフロントエンドのフレームワークを本腰入れて使うのは初めてなので、いろんなものが分からない…何もかもが新たな学習で面白いですね。

プロジェクトのテンプレートだったり、ビルドツールで話が変わるので、調べてもなかなかほしい情報にたどり着けないことが多いですね。難しい分野です。

今日特に困ったのが、WebStorm でデバッグするのはどうするんだろう? という話。

WEBで調べると、「Remote URLに、webpack:///.と入れればいいよ」と出てくるのですが、その通り入れても出てきませんでした。

試行錯誤して調べてみた結果…

20161103_ss

Angular CLI(内部でWebpack)で作られたプロジェクトの場合は、「Webpack:///(フルパスでプロジェクトのパス)」を設定してあげると良いようです。

ただ、この方法だと、.idea 以下にできるプロジェクトファイルにフルパスが入ってしまうので、それが難ですね。

とりあえず、今日はここまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*