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

Question

我在生产服务器上调试 minified JS 时遇到问题。

虽然您在测试 dev/prod 服务器时无法在您的计算机上捕获某些错误，但有机会将用户的一些前端错误和异常发送到特殊日志。

当JS文件被缩小后，调试这段代码就变成了地狱。
执行此类工作的最佳做法是什么？

Answer 1

你不能完全"un-minify"它但你可以"beautify"它，这不会恢复原来的变量名，但它至少会使代码更容易理解。这里是 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 2

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

Answer 3

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

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

Answer 4

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

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

代理位于您的浏览器和网络服务器之间（可能是运行在远程服务器或您的本地机器上）。除了您配置为从不同位置提供服务的请求外，所有 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）提供服务。

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

Answer 5

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

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

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

https://raygun.com/sourcemaps

https://sourcemaps.info/

Answer 6

你可以使用这个Unminify Js. Also you can use CSS Unminify for unminify css codes or you need to unminify all html , use HTML Unminifier.

unminify js代码

当然，您可以在使用此站点取消 javascript 代码后简单地识别错误。

Answer 7

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

define( 'SCRIPT_DEBUG', true );

SCRIPT_DEBUG is a related constant that will force WordPress to use the “dev” versions of scripts and stylesheets in wp-includes/js, wp-includes/css, wp-admin/js, and wp-admin/css will be loaded instead of the .min.css and .min.js versions.

Answer 8

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

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

How to effectively debug minified JS files?

javascript

debugging

minify