PyCharmで、anyenv + nodenv で構築した ReactとDjango REST Frameworkの両方をデバッグしてみた

今までPyCharmでDjango REST framework(以下、DRF)のデバッグを行ったことはありました。

そんな中、以前 React + TypeScript + DRFでアプリを作りました。

ただ、ReactとDRFをPyCharmだけでデバッグしたことがなかったため、どのように設定すればデバッグできるか試してみました。

　
目次

環境

• macOS
• PyCharm Professional 2021.1.1
• anyenv 1.1.2
• nodenv 1.4.0+3.631d0b6
  • anyenvでインストール
• デバッグ対象のReact + DRFは、以前作ったアプリ
  • https://github.com/thinkAmi-sandbox/todolist_by_react_ts_drf

DRFを起動する設定

PyCharmでDRFを開発していれば、以下の設定があるはず。。。

項目	値
Configuration Template	Django Server
Name	任意 (backendなど)
Host	localhost
Port	8000
Environment variables	(デフォルト値)
Python interpreter	Projectで使ってる venv のインタプリタ
Add content roots to PYTHONPATH	チェックする
Add source roots to PYTHONPATH	チェックする

yarnでReactを起動する設定

React側は

• Reactを起動する設定
• JavaScriptをデバッグする設定

の2つが必要になります。

まずは、yarnでReactを起動する設定です。

項目	値
Configuration Template	npm
Name	任意
package.json	[Reactアプリのpackage.json forntend/package.json のパス
Command	start
Node interpreter	anyenv + nodenvで入れたNodeのパス (~/.anyenv/envs/nodenv/versions/<version>/bin/node )
Package manager	yarn (~/.anyenv/envs/nodenv/versions/<version>/lib/node_modules/yarn)

　
yarnの設定後、実行ボタンをクリックし、Reactが起動すればOKです。

Runのログにはこんな感じで表示されます。

yarn run v1.22.10
$ react-scripts start
...
Starting the development server...

JavaScriptのデバッグ設定

yarnでReactを起動する設定を行いデバッグ実行したとしても、まだブレークポイントでは停止しません。

そこで、JavaScriptのデバッグ設定を追加します。

項目	値
Configuration Template	JavaScript Debug
Name	任意
URL	[Reactアプリを起動した時のURL ( http://localhost:3000 など)
Browser	Chrome

　
以上で準備ができました。

動作確認

流れとしては、

1. DRFをデバッグ起動
2. Reactを Run で起動
3. JavaScript Debugを Debug で起動

の順で起動します。

また、DRFとReactの両方にブレークポイントを置いてみます。

　
3. の実行後、拡張機能が何もインストールされていない別のChromeウィンドウが起動します*1。

試しに適当な値を入力し、「登録」ボタンを押してみます。　

　
まずはReactのところで止まりました。

　
続行してみると、DRFの方でも止まりました。

なお、Reactのコードを修正したところ、Chromeにも反映されました。

　
これで良さそうです。

*1:今回はReactをポート3600で起動していますが、3000でも問題ないはず