Question

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

Answer 1

咬紧牙关;）在chrome中，您可以从sources面板中自动格式化缩小的代码

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

Answer 2

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

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

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

https://raygun.com/sourcemaps

https://sourcemaps.info/

Answer 3

大多数人通常做的是他们有javascript.min.js和javascript.js。如果您有一个最小化的文件，您可以使用在线工具，如：http://unminify.com/来缩小它。所以你可以更轻松地调试它。

Answer 4

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

Chrome的美化功能还可以，但我发现代理方法更稳定（你不必按下那个讨厌的{}按钮）它会在每个浏览器上运行（比如那些不适合的浏览器）有Chrome的美化功能）。

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

以下示例步骤和配置：

配置你的nginx \ conf \ nginx.conf文件，重要的部分是位置别名（拦截JavaScript文件请求）和位置proxy_pass（将所有其他请求转发到上游服务器）：

        8
        9

启动nginx

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;
        }
    }
}

打开浏览器，例如http://localhost:8081/context/index.html

代理从远程服务器获取所有资源，但代理现在从本地缓存（未分解的）文件（即文件uncompressed.js）提供的http://localhost:8081/context/js/compressed.js请求的文件除外。

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

Answer 5

你不能完全＆＃34;不缩小＆＃34;但你可以＆＃34;美化＆＃34;它，它不会恢复原始变量名称，但它至少会使代码更容易遵循。这里a good explanation of how that can be done in the browser. 这是一个website where you can copy and paste code to beautify it。几乎每个文本编辑器和IDE都有插件，可以完成相同的结果。

我希望有所帮助。快乐的编码！

Answer 6

您可以使用此Unminify Js使js代码最小化。另外，您可以使用CSS Unminify来使CSS代码最小化，或者需要使所有html都最小化，请使用HTML Unminifier。

当然，通过使用此网站，您可以在最小化javascript代码之后简单地识别错误。

Answer 7

如果是Wordpress网站，there is the SCRIPT_DEBUG constant可以在wp-config.php中设置为true。

define( 'SCRIPT_DEBUG', true );

SCRIPT_DEBUG是一个相关的常数，它将迫使WordPress使用wp-includes/js，wp-includes/css，wp-admin/js和wp-admin/css中的脚本和样式表的“开发”版本。而不是.min.css和.min.js版本。

Answer 8

由于这个问题对很多人来说似乎很现实，我想提一下，我们已经开始使用 Sentry 来处理客户端错误。它能够获取您的源映射文件（或者您可以手动或通过 API 自动上传它们）并显示调用异常的实际源代码。它无法完美运行，但在大多数情况下非常有用。

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

8 个答案: