web-dev-qa-db-ja.com

firebugで縮小されたJSをデバッグするにはどうすればよいですか？


非常に多くの縮小されたJSファイルを含むWebページがあります。 Webページはローカルネットワーク上では完全に正常に機能しますが、ステージング時にJSエラーが発生します。 JSに問題があり、デバッグする必要はありません。 FirebugのスクリプトタグにJSをロードすると、1本の長い水平線で表示されます。 Firebugでデバッグ用のスクリプトを拡張または美化する方法はありますか？私はjsbeautifierを使用できることを知っていますが、彼らは私を助けてくれません。拡張ファイルをCDNにアップロードできません。CDNを使用する目的に反します。

注意すべき点、
a）JSを提供するボックス、CDNを制御することはできません。
b）ビューティファイヤーなどを使用できますが、実行時にスクリプトをデバッグするのに役立ちますか？私見、いいえ
c）NDAおよびその他の法的事項に縛られているため、スクリプトを共有することはできませんが、一般的な問題であるため、縮小されたjQueryで遭遇する可能性があります

javascriptdebuggingfirefoxfirebug
60
Kumar
  1. 美化 スクリプト
  2. CDNホストを / etc/hosts またはローカルDNSに追加して、独自のWebサーバーに解決します
  3. 美化されたバージョンと必要なものすべてを前述のWebサーバーでホストする
  4. FirefoxとChrome（この編集時点のバージョン）は両方とも、{}ボタンはインスペクターで使用できます。
49
rsp

更新：JavaScriptを美しくするfirebug拡張があります：

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Firefox 12.0では完全に機能しています。

これを信用してください answer 発見してください。

55
Jonathan Sayce

縮小したファイルをロードして、{}ボタンを下に押すとすぐに美しくなり、ブレークポイントやその他のデバッグが可能になります。 （Chromeも）に対して真）

29
Kyle Heironimus

これは一般的な問題であり、Chrome devチームは最近Source Mapsと呼ばれるエレガントなソリューションを考案しました- http://www.html5rocks.comを参照してください/ en/tutorials/developertools/sourcemaps / 詳細については、あなた（そして私たちの残りの人）がまさに叫んでいるものであることがわかると思います！:)

14
MarcusTucker

変更を検討してください！

Firefox w/Firebugは、ほぼ1年間私のお気に入りのJavaScriptデバッグ方法でしたが、最近、はるかに優れたGoogle-ChromeのDeveloper-Toolsに移行しました。

  • ChromeはJavaScriptリソースのOn-The-Fly（組み込み機能）美化をサポートしています enter image description here

  • 美しくなったら、JavaScriptサーバーのファイルを「自然に」ダウンロードしたので、JavaScriptリソースファイルを自由にデバッグできます。行番号をクリックして、ブレークポイントを設定します。 enter image description here

  • 最も強力な機能の1つ、
    は、ブレークポイントで停止した後、ブレークポイントにいる同じスコープ内で（コンソールを使用して）コマンドを自由に実行できます 。 Firefoxではそれはできません。 enter image description here デバッグが非常に簡単なので（匿名関数も）、Firefoxに戻ることはありません。
    試してみてください！

7
user257319

これは回避策ですが、役立つ場合があります。アイデアは、サーバーからのファイルをマシン上のファイルに置き換えることです。
これはどのブラウザでも動作します。
最初のセットアップには少し時間がかかります（15分程度）が、その後は非常に便利です。
また、ライブ/製品環境でのバグ修正のテストにも役立ちます。

  1. Fiddler（Webデバッグプロキシ）を取得し、インストールして実行します。
    http://www.fiddler2.com/fiddler2/
    （インストール後にブラウザーを再起動して、Fiddler拡張機能を取得します）
  2. HTTPS Webサイトをデバッグする場合は、最初にこれを確認してください。
    http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
  3. これからは、JSファイルを含め、ブラウザーで行われたすべてのダウンロードがFiddler（左側の「Webセッション」ペイン）に表示されます。
    そうでない場合は、これを確認してください： フィドラーがセッションを表示しない
  4. リストでデバッグするファイルを見つけます（Ctrl + Fが機能します）
  5. ファイルをクリックします。次に：
    • インスペクターペイン（textViewタブ）からファイルコンテンツを取得し、それを美化し、ローカルコンピューターのファイルに保存する
    • または、ソースコードを含むファイルにアクセスできる（例：ソース管理から）
  6. [AutoResponder]タブ（左上のペイン）に移動します。
    「自動応答を有効にする」チェックボックスを選択します。
    「一致しないリクエストのパススルー」チェックボックスを選択します。
  7. ファイルを左ペインから右ペインにドラッグします（下部のルールエディターに事前入力します）
  8. 他のフィールドにローカルファイルのパスを設定します
  9. 保存ボタンをクリックします
  10. ページをリロードして、デバッグセッションをお楽しみください。

Fiddlerはさらに多くのことを実行できますが、このユースケースは最初の質問に答えます。

7
JB Hurteaux

JavaScriptをきれいに印刷します。これをグーグルで検索すると、複数のオンラインJS美人が見つかります。

私はたまたま http://jsbeautifier.org/ を使用していますが、問題なく動作しますが、他を検索し、ニーズに合ったものを使用します。

警告：意味のあるlocal変数名（通常は名前変更機能によって名前が変更されます）を取得することはできません。コードがClosure Compilerによってコンパイルされた場合、all 変数、関数、およびプロパティはマングルされます（ローカルのものだけでなく）。

さて、もしあなたの問題が外部から来るコード（例えばCDN）をデバッグすることであるなら、明らかにそのコードは縮小され、美化されたバージョンをそこに保存することはできません。この場合、CDNからコードをロードするタグをローカルバージョンを指すURLに置き換えてから、（CDNからダウンロードした）コードを自分のサーバーに美化して、FireBugでデバッグできます。

これらのタグを含むHTMLを制御することさえしないと（たとえば、外部サーバーに存在する場合）、残念ながら、サイト全体を自分のサーバーに物理的にダウンロードすることなく、あなたが望むことをする方法はありません。サイト全体（すべてのファイルを含む）をダウンロードした場合でも、サイトはバックエンド処理言語によって駆動されたり、バックエンドデータベースにアクセスしたりするため、機能しない場合があります。そのような場合、これらのデータをすべてシミュレートする必要もあります。ただし、canは実行できますが、多くの苦痛を経験する必要があります。私の推奨事項は、Webページのバージョンを保存して独自のサーバーで実行し、独自のサーバーから美化コードを提供してデバッグすることです。

3
Stephen Chung

JavaScriptにブレークポイントを配置すると、デバッグがはるかに簡単になりますが、コードが既に本番環境に到達している場合は、おそらく縮小されています。縮小されたコードをデバッグするにはどうすればよいですか？いくつかのブラウザには、JavaScriptを縮小するオプションがあります。

ChromeとSafariでは、[スクリプト]タブを選択し、関連するファイルを見つけて、下部パネルにある[{}]（きれいな印刷）アイコンを押します。

Internet Explorerで、スクリプト選択ドロップダウンの横にあるツールアイコンをクリックして、JavaScriptをフォーマットするオプションを見つけます。

Operaは、縮小されたJavaScriptを自動的にプリティファイします。 ソース

0
Aamol