web-dev-qa-db-ja.com

ChromeでVisual Studio(IEのように)で完全なJavaScript / TypeScriptデバッグを取得する方法

Chrome= Internet Explorerで現在提供されている機能と同様のVisual StudioでJavaScriptとTypeScriptをインタラクティブにデバッグする方法はありますか?IEブレークポイントを設定できますJavaScriptまたはTypeScriptのIDEでIDE内のコードをステップ実行します。VisualStudioのChromeで同じ動作をすることはできません。

16
ASA2

JavaScript /ブラウザベースのアプリケーションとVisual Studioで完全に統合されたデバッグエクスペリエンスを得るには、今日Internet Explorerを使用する必要があります。 TypeScriptはJavaScriptにコンパイルされるため、統合デバッグにはInternet Explorerも必要です。

別のブラウザを使用する場合によく使用する「トリック」は、debugger;ステートメントをTypeScript/JavaScriptコードのどこかに置き、開発ツールをChrome ...で開くと、その命令で実行が停止します。ソースマップが有効になっている限り、元のTypeScriptコードがChromeデバッグウィンドウに表示されます。その後、Chromeデバッグツールを使用して、さらにブレークポイントを設定できます。ファイルが変更されない場合、ブレークポイントはページの「更新」から保持されます。

ただし、これによりVisual Studio内にブレークポイントを設定することはできませんが、それでも効果的であり、開発には十分に機能します。

2016年4月更新

いくつかのコメントが指摘しているように、この作業を少し改善する道はありますが、Internet Explorerの場合ほど完全なエクスペリエンスではありません。 here に概説されている手順に従います。カスタムコマンドラインで(リモートデバッグを有効にするために)Chromeを開始します):

chrome.exe --remote-debugging-port=9222

そして、WebKitデバッグを有効にしたChromeプロセスに接続します。カスタムブラウザを追加して、Chromeを簡単に起動できます。

Adding Custom Browser

(ただし、特にChromeを使用しているため、これを有用で一貫性のある方法で動作させることができなかったことを付け加えます=他のほとんどのWebブラウジング用。)

8
WiredPrairie