如何有效地调试缩小的JS文件？

Question

我在生产服务器上调试缩小的JS时遇到了问题.虽然在测试dev/prod服务器时无法在计算机上发现一些错误,但是有机会将一些前端错误和异常从用户发送到特殊日志.当JS文件缩小时,调试此代码变得很糟糕.执行此类工作的最佳做​​法是什么？

Answer 1

咬住子弹;)在chrome中,您可以自动格式化源面板中的缩小代码

然后,您可以通过单击行号来添加调试器语句.运行您的代码,了解更多......

Answer 2

因此，一段时间后，我们继续尝试解决该死的问题，我们偶然发现了这个库，它允许您将堆栈映射到未缩小版本的构建。

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

我们需要将其嵌入到收集错误报告的内部系统中。如果不像我们那样需要您自己的解决方案，那么网络上也有现成的解决方案：

https://raygun.com/sourcemaps

https://sourcemaps.info/

Answer 3

您可以尝试的一种方法是反向代理。

Chrome 的美化功能还不错，但我发现代理方法更稳定（您不必一直按那个讨厌的 {} 按钮），并且它适用于所有浏览器（例如那些没有 Chrome 美化功能的浏览器）。

代理位于您的浏览器和 Web 服务器（可以在远程服务器或本地计算机上运行）之间。除您配置为从不同位置提供服务的请求外，所有 Web 请求都会通过代理。在这种情况下，您将从本地位置提供 JavaScript 文件的未缩小版本，而不是远程缩小版本。我为此使用了 nginx 反向代理（在 Windows 上），但希望其他人可以以类似的方式使用（例如 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）提供服务。

如果您没有，您可以使用 un-minifier / beautifier 轻松创建 uncompressed.js （尽管原始的预压缩文件是最好的，因为它具有所有有意义的名称）。重要的是它在功能上等同于缩小文件。