我在生产服务器上调试 minified JS 时遇到问题。虽然在测试dev/prod服务器时无法捕获机器上的某些错误,但是可以将用户的一些前端错误和异常发送到一个特殊的日志中。当JS文件被缩小时,调试这段代码就变成了一场地狱。执行此类工作的最佳做法是什么?
dev/prod
u1ehiz5o1#
咬紧牙关)在chrome中,你可以从源代码面板自动格式化缩小的代码然后您可以通过单击行号添加调试器语句。运行您的代码并了解更多信息...
fdx2calv2#
所以,过了一段时间,我们继续尝试解决这个该死的问题,我们偶然发现了这个库,它允许你把你的栈Map到构建的未缩小版本。https://github.com/mozilla/source-map我们需要把这个嵌入到我们收集错误报告的内部系统中。如果你不像我们一样需要自己的解决方案,网上也有现成的解决方案:https://raygun.com/sourcemapshttps://sourcemaps.info/
bzzcjhmw3#
大多数人通常使用的是javascript.min.js和javascript.js。如果您有一个最小化的文件,您可以使用在线工具,如:http://unminify.com/来使它不缩小。这样你可以更容易地调试它。
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(尽管原始的预压缩文件会是最好的,因为它会有所有有意义的名字),重要的是它在功能上等同于缩小的文件。
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都有插件可以达到同样的效果。希望能有所帮助。编码快乐!
5n0oy7gb6#
你可以用Unminify Js来缩小js代码,也可以用CSS Unminify来缩小css代码,或者你需要缩小所有的html,用HTML Unminifier。当然,你可以在使用这个网站对javascript代码进行unminify后简单地识别错误。
qyswt5oh7#
如果它是一个WordPress网站,有一个SCRIPT_DEBUG常量,你可以在wp-config.php中设置为true。第一个月SCRIPT_DEBUG是一个相关常量,它将强制WordPress使用wp-includes/js、wp-includes/css、wp-admin/js和wp-admin/css中脚本和样式表的“dev”版本,而不是.min.css和.min.js版本。
wp-includes/js
wp-includes/css
wp-admin/js
wp-admin/css
.min.css
.min.js
1cklez4t8#
由于这个问题对很多人来说都是很现实的,我想提一下我们已经开始使用Sentry来处理客户端错误了。它能够获取源代码Map文件(或者你可以手动或通过API自动上传),并显示调用异常的实际源代码。它不能完美地工作,但在大多数情况下是很有帮助的。
w46czmvw9#
Prettyifying minified版本在Chrome是好的,将有助于阅读,但变量名仍然会给你带来麻烦。一个更好的方法是在配置文件中将minify设置为false,然后在浏览器中运行它,它会给你提供更可读的变量名。示例vite配置:
import { defineConfig } from 'vite'; export default defineConfig({ build: { minify: false, }, })
9条答案
按热度按时间u1ehiz5o1#
咬紧牙关)在chrome中,你可以从源代码面板
自动格式化缩小的代码
然后您可以通过单击行号添加调试器语句。运行您的代码并了解更多信息...
fdx2calv2#
所以,过了一段时间,我们继续尝试解决这个该死的问题,我们偶然发现了这个库,它允许你把你的栈Map到构建的未缩小版本。
https://github.com/mozilla/source-map
我们需要把这个嵌入到我们收集错误报告的内部系统中。如果你不像我们一样需要自己的解决方案,网上也有现成的解决方案:
https://raygun.com/sourcemaps
https://sourcemaps.info/
bzzcjhmw3#
大多数人通常使用的是javascript.min.js和javascript.js。如果您有一个最小化的文件,您可以使用在线工具,如:http://unminify.com/来使它不缩小。这样你可以更容易地调试它。
wsewodh24#
可以尝试的一种方法是反向代理。
Chrome的美化功能还不错,但我发现代理方法更稳定(你不必一直按那个讨厌的{}按钮),而且它可以在每一个浏览器上工作(比如那些没有Chrome美化功能的浏览器)。
代理位于浏览器和Web服务器之间(它可以运行在远程服务器或本地机器上)。除了那些您配置为从不同位置提供服务的Web请求外,所有Web请求都通过代理。在这种情况下,您将从本地位置提供JavaScript文件的未缩小版本,而不是远程缩小版本。我使用了nginx反向代理(在Windows上),但希望可以以类似的方式使用其他代理(例如HAProxy)。
示例步骤和配置如下:
如下配置nginx\conf\nginx. conf文件,重要的部分是位置别名(拦截JavaScript文件请求)和位置proxy_pass(将所有其他请求转发到上游服务器):
启动nginx
打开浏览器,例如http://localhost:8081/context/index.html
代理从远程服务器获取所有资源,除了从http://localhost:8081/context/js/compressed.js请求的文件,代理现在从本地缓存(未缩小)文件(即文件uncompressed.js)中提供该文件。
如果你没有,你可以用un-minifier/beautifier轻松创建你的uncompressed.js(尽管原始的预压缩文件会是最好的,因为它会有所有有意义的名字),重要的是它在功能上等同于缩小的文件。
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都有插件可以达到同样的效果。
希望能有所帮助。编码快乐!
5n0oy7gb6#
你可以用Unminify Js来缩小js代码,也可以用CSS Unminify来缩小css代码,或者你需要缩小所有的html,用HTML Unminifier。
当然,你可以在使用这个网站对javascript代码进行unminify后简单地识别错误。
qyswt5oh7#
如果它是一个WordPress网站,有一个SCRIPT_DEBUG常量,你可以在wp-config.php中设置为true。
第一个月
SCRIPT_DEBUG是一个相关常量,它将强制WordPress使用
wp-includes/js
、wp-includes/css
、wp-admin/js
和wp-admin/css
中脚本和样式表的“dev”版本,而不是.min.css
和.min.js
版本。1cklez4t8#
由于这个问题对很多人来说都是很现实的,我想提一下我们已经开始使用Sentry来处理客户端错误了。它能够获取源代码Map文件(或者你可以手动或通过API自动上传),并显示调用异常的实际源代码。它不能完美地工作,但在大多数情况下是很有帮助的。
w46czmvw9#
Prettyifying minified版本在Chrome是好的,将有助于阅读,但变量名仍然会给你带来麻烦。
一个更好的方法是在配置文件中将minify设置为false,然后在浏览器中运行它,它会给你提供更可读的变量名。
示例vite配置: