
<p>手順</p>



<ul><li>terminalでyarn start | npm start等の起動コマンド実行</li><li>IntelliJでこちらの設定を追加</li></ul>



<p>設定は画面上部の<code>Edit configuration</code> から選択することができ、npmではなく<code>Javascript debug</code> を選択することが重要です!!!!</p>



<figure class="wp-block-image size-large"><img src="https://mokubo.website/wp-content/themes/streetist/assets/img/trans.gif" data-lazyload="https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-644x452.png" loading="lazy" width="644" height="452" alt class="wp-image-3967" srcset="https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-644x452.png 644w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-300x211.png 300w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-768x539.png 768w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59.png 843w" sizes="(max-width: 644px) 100vw, 644px"><noscript><img loading="lazy" width="644" height="452" src="https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-644x452.png" alt="" class="wp-image-3967" srcset="https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-644x452.png 644w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-300x211.png 300w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59-768x539.png 768w, https://mokubo.website/wp-content/uploads/2021/07/Screen-Shot-2021-07-28-at-0.41.59.png 843w" sizes="(max-width: 644px) 100vw, 644px" /></noscript></figure>



<p>設定が終わって、任意の箇所にbreak point入れておくと自動的にデバッグが発火します</p>



<h2>参考記事</h2>



<p><a href="http://IntelliJ IDEA で Angular や React のデバッグをする">IntelliJ IDEA で Angular や React のデバッグをする</a></p>


Masahiro's tech note

React / Angular等のSPAをIntelliJでデバッグさせる

参考記事

関連記事