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

kse8i1jr  于 2022-12-23  发布在  其他
关注(0)|答案(9)|浏览(177)

我在生产服务器上调试 minified JS 时遇到问题。
虽然在测试dev/prod服务器时无法捕获机器上的某些错误,但是可以将用户的一些前端错误和异常发送到一个特殊的日志中。
当JS文件被缩小时,调试这段代码就变成了一场地狱。
执行此类工作的最佳做法是什么?

u1ehiz5o

u1ehiz5o1#

咬紧牙关)在chrome中,你可以从源代码面板

自动格式化缩小的代码
然后您可以通过单击行号添加调试器语句。运行您的代码并了解更多信息...

fdx2calv

fdx2calv2#

所以,过了一段时间,我们继续尝试解决这个该死的问题,我们偶然发现了这个库,它允许你把你的栈Map到构建的未缩小版本。
https://github.com/mozilla/source-map
我们需要把这个嵌入到我们收集错误报告的内部系统中。如果你不像我们一样需要自己的解决方案,网上也有现成的解决方案:
https://raygun.com/sourcemaps
https://sourcemaps.info/

bzzcjhmw

bzzcjhmw3#

大多数人通常使用的是javascript.min.js和javascript.js。如果您有一个最小化的文件,您可以使用在线工具,如:http://unminify.com/来使它不缩小。这样你可以更容易地调试它。

wsewodh2

wsewodh24#

可以尝试的一种方法是反向代理。
Chrome的美化功能还不错,但我发现代理方法更稳定(你不必一直按那个讨厌的{}按钮),而且它可以在每一个浏览器上工作(比如那些没有Chrome美化功能的浏览器)。
代理位于浏览器和Web服务器之间(它可以运行在远程服务器或本地机器上)。除了那些您配置为从不同位置提供服务的Web请求外,所有Web请求都通过代理。在这种情况下,您将从本地位置提供JavaScript文件的未缩小版本,而不是远程缩小版本。我使用了nginx反向代理(在Windows上),但希望可以以类似的方式使用其他代理(例如HAProxy)。
示例步骤和配置如下:
如下配置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(尽管原始的预压缩文件会是最好的,因为它会有所有有意义的名字),重要的是它在功能上等同于缩小的文件。

bwntbbo3

bwntbbo35#

你不能完全“取消缩小”它,但是你可以“美化”它,这不会恢复原来的变量名,但是它至少会使代码更容易跟随。这里是a good explanation of how that can be done in the browser.,这里是website where you can copy and paste code to beautify it。几乎每一个文本编辑器和IDE都有插件可以达到同样的效果。
希望能有所帮助。编码快乐!

5n0oy7gb

5n0oy7gb6#

你可以用Unminify Js来缩小js代码,也可以用CSS Unminify来缩小css代码,或者你需要缩小所有的html,用HTML Unminifier
当然,你可以在使用这个网站对javascript代码进行unminify后简单地识别错误。

qyswt5oh

qyswt5oh7#

如果它是一个WordPress网站,有一个SCRIPT_DEBUG常量,你可以在wp-config.php中设置为true。
第一个月
SCRIPT_DEBUG是一个相关常量,它将强制WordPress使用wp-includes/jswp-includes/csswp-admin/jswp-admin/css中脚本和样式表的“dev”版本,而不是.min.css.min.js版本。

1cklez4t

1cklez4t8#

由于这个问题对很多人来说都是很现实的,我想提一下我们已经开始使用Sentry来处理客户端错误了。它能够获取源代码Map文件(或者你可以手动或通过API自动上传),并显示调用异常的实际源代码。它不能完美地工作,但在大多数情况下是很有帮助的。

w46czmvw

w46czmvw9#

Prettyifying minified版本在Chrome是好的,将有助于阅读,但变量名仍然会给你带来麻烦。
一个更好的方法是在配置文件中将minify设置为false,然后在浏览器中运行它,它会给你提供更可读的变量名。
示例vite配置:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: false,
  },
})

相关问题