Question

我希望能够在我的生产网站上调试缩小的压缩javascript代码。我们的网站使用django压缩器来创建缩小和压缩的js文件。我最近读到有关chrome可以使用源映射来帮助调试这样的javascript。但是我不知道如何在压缩js文件时告诉django压缩器创建源映射

Answer 1

关于输出单独的源地图文件，我没有一个好的答案，但我能够在线工作。

在添加源映射之前，我的settings.py文件使用了以下预编译器

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'coffee --compile --stdio'),
    ('text/less', 'lessc {infile} {outfile}'),
    ('text/x-sass', 'sass {infile} {outfile}'),
    ('text/x-scss', 'sass --scss {infile} {outfile}'),
    ('text/stylus', 'stylus < {infile} > {outfile}'),
)

快速

之后

$ lessc --help

您发现可以将less和map文件放入输出css文件中。所以我的新文本/较少预编译器条目看起来像

('text/less', 'lessc --source-map-less-inline --source-map-map-inline {infile} {outfile}'),

希望这有帮助。

编辑：忘记添加，lessc＆gt; = 1.5.0，升级使用

$ [sudo] npm update -g less

Answer 2

虽然我无法使用django-compressor（尽管它应该可行，但我认为我只是在设置正确的应用程序时遇到了问题），我能够使用django-assets 。

您需要将相应的命令行参数添加到less过滤器源代码中，如下所示：

diff --git a/src/webassets/filter/less.py b/src/webassets/filter/less.py
index eb40658..a75f191 100644
--- a/src/webassets/filter/less.py
+++ b/src/webassets/filter/less.py
@@ -80,4 +80,4 @@ class Less(ExternalTool):
     def input(self, in_, out, source_path, **kw):
         # Set working directory to the source file so that includes are found
         with working_directory(filename=source_path):
-            self.subprocess([self.less or 'lessc', '-'], out, in_)
+            self.subprocess([self.less or 'lessc', '--line-numbers=mediaquery', '-'], out, in_)

除了那个小小的补充：

确保你的路径中有节点 - 而不是ruby gem-less编译器（＆gt; = 1.3.2 IIRC）。
打开chrome的web检查器配置页中隐藏的sass source-maps选项。（是的，'sass'并不少：因为sass已经实现了与Chrome兼容的映射，并且他们的格式与开始时没有什么不同，所以调整后的调试信息格式与sass相比较少...）

Answer 3

不是开箱即用，但您可以扩展自定义过滤器：

from compressor.filters import CompilerFilter

class UglifyJSFilter(CompilerFilter):
        command = "uglifyjs -c -m " /
            "--source-map-root={relroot}/ " /
            "--source-map-url={name}.map.js" /
            "--source-map={relpath}/{name}.map.js -o {output}"

有没有办法让django压缩器创建源映射

3 个答案: