今まで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は、以前作ったアプリ
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 |
以上で準備ができました。
動作確認
流れとしては、
- DRFをデバッグ起動
- Reactを
Run
で起動 - JavaScript Debugを
Debug
で起動
の順で起動します。
また、DRFとReactの両方にブレークポイントを置いてみます。
3. の実行後、拡張機能が何もインストールされていない別のChromeウィンドウが起動します*1。
試しに適当な値を入力し、「登録」ボタンを押してみます。
まずはReactのところで止まりました。
続行してみると、DRFの方でも止まりました。
なお、Reactのコードを修正したところ、Chromeにも反映されました。
これで良さそうです。
*1:今回はReactをポート3600で起動していますが、3000でも問題ないはず