2

VS 2012、Web Essentials、TypeScript 0.8.3

TypeScriptファイル「test.ts」があります。これは「test.js」にコンパイルされ、最後にsourceMappingURLがあります。

//@ sourceMappingURL=test.js.map

Javascriptファイルは$.getScriptで動的にロードされます。ただし、Chromeデベロッパーツールではソースがどこにも見つからないため、ブレークポイントを設定できません。

sourceURLを追加して生成されたJavascriptを手動で編集すると、状況が改善されます。

//@ sourceMappingURL=test.js.map
//@ sourceURL=test.ts

「test.ts」という名前は、Chromeのソースツリーで提供されています。ただし、それをクリックすると、Javascriptファイル「test.js」が開きます。ブレークポイントを設定して使用できます。

実際には、正しい名前「test.ts」または他の名前がコーディングされているかどうかは関係ありません。

何をすべきか、生成されたJavascriptファイルが動的にロードされたTypeScriptファイルのデバッグはChromeで可能ですか？

カナリアも食べてみました。違いはありませんでした。

4

3 に答える 3

2

I am writing to affirm what WhyMe wrote. Appending tag to using jQuery.append() does not add filename to sources tree, but using DOM element to .appendChild DOES add filename to sources tree. 

var fileref = document.createElement('script');
                    fileref.setAttribute("type", "text/javascript");
                    fileref.setAttribute("src", 'Scripts/app/Views/Management/Spock.js');
                    document.getElementsByTagName("head")[0].appendChild(fileref)

Spock.js will be in the correct folder in Sources tree.

Using //# source=Path_to_file works, but A. must have the pathing correct, and B. filename appears under <No Domain>; which is really ugly.

PS - I do not have 50 reputation points, so I cannot reply as a comment next to WhyMe's comment, but I can add an Answer?

于 2014-03-22T02:57:50.623 に答える
1

Chrome Canary (25.0.1364.172 m) で作業し、require.js を使用してスクリプトを動的にロードすると、typescript ファイルにブレークポイントを設定して使用できます。

ここに画像の説明を入力

これは一部の JS 出力に一致するコードでのみ機能することに注意してください。したがって、(論理的には) インターフェイス定義内のどこにもブレークポイントを設定できません。

オンデマンド スクリプトの読み込みに require.js を使用するオプションがあるかどうかはわかりません。もしそうなら、それはあなたの問題を解決するはずです。

于 2013-03-17T10:59:37.510 に答える
0

$.getScript はおそらく xmlhttp を使用してファイルをロードし、後で JavaScript を DOM に追加するため、ブラウザーは JavaScript を js ブレークポイントにマップできません。

Requirejs は src 属性を持つスクリプト タグを追加するため、ブラウザは引き続きブレークポイントに到達できます。

于 2013-09-29T08:46:38.663 に答える