Chrome DevToolsでソースマップを無効にする

100

Chrome DevToolsに表示されているjsxコードから生のES5に簡単に切り替える方法はありますか？

— ジャック・アラン
ソース

回答:

152

デベロッパーツールを開き、デベロッパーツールの[設定]に移動して、[ Enable JavaScript Sourcemapsソース]設定の下のチェックボックスをオフにします。

— ガービー
ソース

ありがとうございます。残念ながら、このオプションを変更するには、有効にする前に更新する必要があります。更新せずにオプションを切り替える方法があることを望んでいました。

— ジャックアラン

いいえ。ソースは設定に基づいて再解釈する必要があるためです。

— Garbee、2016年

おかげで、なぜこれが常に内部でes5を実行し、ソースマッピングがデバッガーに現在のステートメントがソースコード内のどの行にあるかを通知するだけなので、なぜこれが必要なのか知りたいのですが？

— ジャックアラン

私のようなこれらの設定を見つけるのに苦労している人は、これを参照してください：i.imgur.com/9aMlBfg.png

— joshcomley

私はこれを試したところ、すぐに効果があるようです。つまり、ページの更新はもう必要ないようです。

— ジャクソン

行番号をダブルクリックすると、ソースファイルから非縮小出力ファイルにジャンプできます。それ以外は制限されているようです。以下のコメントを参照してください。

これは開発中に役立つことがわかりました。webpack-dev-serverjsを縮小せずに（または他のツールを使用して）ソースファイルの行番号をダブルクリックすると、コンパイルされているが縮小されていない出力ファイルにジャンプできます。

私はこれを偶然発見し、2016年12月21日からこのコメントを見つけました：https : //bugs.chromium.org/p/chromium/issues/detail?id=532174#c7

行番号をダブルクリックして元のファイルにジャンプできますが、縮小されたファイルですべての改行が削除されている場合は、ほとんど役に立ちません:(

ワードラップがあると、この作業はより良くなりますhttps://bugs.chromium.org/p/chromium/issues/detail?id=167287

ソースにマップされたファイルにジャンプするために、縮小されたファイルのセクションをダブルクリックするためのサポートがいくつかあったと思いますが、それは最近後退しているようです。

理想的には、ソースマップを含む縮小ファイルで、縮小ファイルの任意の場所を右クリック（またはダブルクリック）すると、その正確なファイル、行、および列にジャンプできるはずです。

— スコッティワゴナー
ソース

行番号をダブルクリックすると、ブレークポイントが追加されてから削除されます。何か不足していますか？

— emclain 2017

Idk。それは時々それをするようです。Chromeがソースマップを気に入っているように見える場合のみ。いくつかの別のラインや別のプロジェクトを試すこともできますが、実際にはこれ以上の提案はありません。Chromeはこれをよりよくサポートするはずです。

— スコッティワゴナー2017