12

Closureコンパイラを使用してChrome拡張機能を作成していますが、デバッグ用にソースマップを機能させたいと考えています。コンパイルされたjavascriptファイルの最後に特別なsourceMappingURLが追加されたソースツリーのページにブラウザを直接向けることで、ソースマップを正常に機能させることができます（すべてが単一のディレクトリにあります）。

debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map

しかし、拡張機能と同じスクリプトにアクセスすると、コンパイルされたjavascriptのみが表示され、元のソースは表示されません。どちらの場合もソースマップを有効にするようにChromeデバッガーを構成していますが、それ以外の場合は、どちらもエラーなしで同じように実行されます。ソースマップが拡張機能で機能しないだけですか、それとも設定に欠けているものがありますか？

Chrome25安定版とChrome27カナリアを試しましたが、どちらも同じ動作です。

4

4 に答える 4

11

同じ問題が発生し、インラインソースマップに切り替えた後、すべてが正常に機能しました。

その理由は、Chrome拡張機能はインラインソースmpasのみをサポートしているためです

したがって、webpackを使用する場合は、

devtool: "inline-source-map"

可能なオプションの範囲があります。こちらのwebpackドキュメントの表を参照してください。

于 2020-03-03T17:44:50.040 に答える
8

パーティーに非常に遅れていることは知っていますが、Chromeではソースマップを使用できます。あなたが抱えているかもしれない問題は、それがデフォルトでマップをロードすることを拒否することです。web_accessible_resourcesこれは、ファイルのにマップを追加することで修正でき manifest.jsonます。

于 2013-12-10T16:31:19.590 に答える
4

コメントで解決された質問への回答を提供するという精神で、Chromeは以前は拡張機能でのソースマップの使用をサポートしていませんでしたが、これはChrome29で修正されました。

Chromiumにバグを報告して追跡してくれたコメント投稿者の@w00kieに感謝します。あなたの有益な努力に対する評判を受け取りたい場合は、自分の回答を投稿してください。これを削除します。

于 2014-05-02T23:13:31.857 に答える
2

Chromeは、すぐに使用できる拡張ソースマップをサポートしています。それらをインラインにweb_accessible_resourcesしたり、manifest.jsonファイルに追加したりする必要はありません。

マップされたファイルは、開発者ツールの[ソース]タブ内の[コンテンツスクリプト]タブに割り当てられます。

有効なすべての拡張機能のソースコードとwebpack://ファイル（ソースマップがWebpackで作成されている場合）があります。

Cmd+Pを使用してマップされたファイルを見つけることも可能です。

Chrome拡張機能のソースマップ

于 2020-06-01T23:18:44.367 に答える