web-dev-qa-db-ja.com

縮小されたJSファイルを効果的にデバッグする方法は？

本番サーバーで縮小されたJSのデバッグに問題があります。 dev/prodサーバーのテスト中にマシンのエラーを検出することはできませんが、フロントエンドのエラーと例外をユーザーから特別なログに送信する機会があります。 JSファイルが縮小されると、このコードのデバッグは地獄になります。そのような作業を行う際のベストプラクティスは何ですか？

javascriptdebuggingminify
14
Sergey Solomatin

それで、しばらくして、私たちはいまいましいトラブルを解決しようと試み続け、スタックを非縮小バージョンのビルドにマップできるようにするこのライブラリに出くわしました。

https://github.com/mozilla/source-map

エラーレポートを収集する内部システムに埋め込むために、これが必要でした。私たちのように独自のソリューションが必要ない場合は、ウェブ全体にソリューションが用意されています。

https://raygun.com/sourcemaps

https://sourcemaps.info/

5
Sergey Solomatin

弾丸をかむ;）chromeでは、ソースパネルから縮小されたコードを自動フォーマットできます click the brackets icon in the bottom left to format

次に、行番号をクリックしてデバッガーステートメントを追加できます。コードを実行して詳細を確認してください...

add debugger by clicking line number

25
Mettin Parzinski

ほとんどの人は通常、javascript.min.jsとjavascript.jsを持っています。最小化されたファイルがある場合は、次のようなオンラインツールを使用できます： http://unminify.com/ それを縮小解除するしたがって、デバッグが簡単になります。

1
user6589747

試すことができる1つのアプローチは、リバースプロキシです。

Chrome prettify機能は問題ありませんが、プロキシアプローチの方が安定している（その厄介な{}ボタンを押し続ける必要はありません）ので、すべてのブラウザで動作します（そうでないブラウザなど） Chromeのプリティファイ機能はありません）。

プロキシは、ブラウザとWebサーバー（リモートサーバーまたはローカルマシンで実行されている可能性があります）の間にあります。別の場所から提供するように設定したものを除いて、すべてのWebリクエストはプロキシを経由します。この場合、リモートの縮小バージョンではなく、ローカルの場所からJavaScriptファイルの非縮小バージョンを提供します。私はこれに（Windows上で）nginxリバースプロキシを使用しましたが、他のもの（HAプロキシなど）も同様の方法で使用できることを期待しています。

以下の手順と設定の例：

Nginx\conf\nginx.confファイルを次のように構成します。重要な部分は、場所のエイリアス（JavaScriptファイルのリクエストをインターセプトするため）と場所のproxy_pass（他のすべてのリクエストを上流のサーバーに転送するため）です。

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout  65;
    server {
        listen       8081;
        server_name  localhost;
        # the unminified version of the JavaScript file you want to debug
        location /context/js/compressed.js {
            alias "C:/dev/nginx-1.10.2/html/uncompressed.js";
        }
        # your remote web server
        location / {
            proxy_pass http://1.2.3.4:8080/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Nginxを起動します

open a command window (run cmd.exe)
cd\
cd C:\dev\nginx-1.10.2
start nginx

ブラウザを開きます。 http：// localhost：8081/context/index.html

プロキシは、リモートサーバーからすべてのリソースをフェッチします http：// localhost：8081/context/js/compressed.js からリクエストされたファイルを除き、プロキシはローカルでキャッシュされた（縮小化されていない）ファイル（つまり、ファイルuncompressed.js）。

ファイルがない場合は、非圧縮/美化機能を使用してuncompressed.jsを簡単に作成できます（ただし、元の事前圧縮されたファイルは、意味のある名前がすべて含まれているため、最も適しています）。重要なことは、機能的には縮小ファイルと同等です。

1
Moika Turns

完全に「縮小」することはできませんが、「美化」することはできます。これにより、元の変数名は復元されませんが、少なくともコードがわかりやすくなります。これが これがブラウザでどのように実行できるかについての良い説明です。 そしてここに コピーして美化するためにコードを貼り付けます 。ほとんどすべてのテキストエディターとIDE=のプラグインもあり、同じ結果が得られます。

お役に立てば幸いです。幸せなコーディング！

0
Patrick DiGiovanni

nminify Js を使用すると、jsコードを非縮小化できます。また、CSSコードの非縮小に CSS Unminify を使用することも、すべてのhtmlを非縮小にする必要がある場合は HTML Unminifier を使用します。

確かに、このサイトを使用して、JavaScriptコードをunminifyした後、バグを簡単に特定できます。

0
Mohandas P G