2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

WebStormでChrome attach debug

English

vscode-chrome-debug - Attachと同じことをWebStormでやる方法です。公式ドキュメント含め誰も書いてないっぽいのでメモ。

vscode-chrome-debug - Attachの方法でChromeを起動して、Port 9229でChrome Debugging protocolをlistenさせます。Linuxの場合は google-chrome --remote-debugging-port=9229 実行後、以下のコマンドでちゃんとlistenしているか確認。

$ netstat -an | grep 9229
tcp        0      0 127.0.0.1:9229          0.0.0.0:*               LISTEN

$ lsof -i :9229
COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
chrome  18347  wsh  132u  IPv4 729759      0t0  TCP localhost:9229 (LISTEN)

WebStormでConfiguration "Attach to Node.js/Chrome" を作成:
image.png

作成したConfigurationでDebugを開始すると、Chromeで開いているタブ一覧が表示されるので、デバッグしたいタブを選びます。今回はFirebaseチュートリアルのFriendly Chat
image.png

無事ブレークポイントにヒットして人権を手にしました。
image.png

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
Sign upLogin
2
Help us understand the problem. What are the problem?