web-dev-qa-db-ja.com

JSソースマップをChrome devtoolsに追加する方法は？

デプロイしたJavaScriptアプリケーションで例外が発生します。 Javascriptコードは難読化されています。元のソースコードのどの行で例外が発生するのか知りたいのですが。ソースマップがデプロイされていないため、Chrome Devtoolsはそれらを接続できません。ローカルホストにソースマップがある可能性があります。

したがって、基本的には、例外が発生する行番号を知るために、マシンからブラウザにソースマップを追加したいと思います。

私は試した Add Folder to WorkspaceおよびMap to File System Resource。それは役に立ちません。ブラウザのコンソールに例外が表示されますが、それでも難読化されたjavascriptソースを指しており、目的の行番号を検出できません。

私は何か間違ったことをするかもしれません。どんな助けでも大歓迎です（追加の拡張機能や他のブラウザの使用法を含む）。

javascriptgoogle-chrome-devtoolsremote-debuggingsource-maps
10
Andrii Skaliuk

ワークスペースは強力ですが、注意が必要な制限がいくつかあります。

制限

  • 要素パネルでのスタイルの変更のみが保持されます。 DOMへの変更は永続化されません。
  • 保存できるのは、外部CSSファイルで定義されたスタイルのみです。 element.styleまたはインラインスタイルへの変更は保持されません。 （インラインスタイルがある場合は、[ソース]パネルで変更できます。）
  • CSSリソースがローカルファイルにマップされている場合、[要素]パネルでのスタイルの変更は、明示的な保存（Ctrl + SまたはCmd + S（Mac））なしですぐに保持されます。
  • ローカルサーバーではなくリモートサーバーからファイルをマッピングしている場合、ページを更新すると、Chromeはリモートサーバーからページを再読み込みします。変更は引き続きディスクに保持され、次の場合に再適用されます。ワークスペースで編集を続けます。
  • ブラウザでマップされたファイルへのフルパスを使用する必要があります。ステージングされたバージョンを表示するには、インデックスファイルでさえURLに.htmlを含める必要があります。

https://developers.google.com/web/tools/setup/setup-workflow

3
Anjith K P