gpt4 book ai didi

google-chrome - 源映射是绝对路径,但 Chrome DevTool 假定它是一个 URL

转载 作者:行者123 更新时间:2023-12-04 15:44:26 30 4
gpt4 key购买 nike

我在我的 gulpjs 构建中通过 gulp-less 使用 LESS 编译器。我启用了 sourceMap 生成,它有点工作,正确的文件名和行号在那里。

使用源映射生成 LESS 的 gulp 行非常简单:

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
.pipe(less({
sourceMap: true
}))
.pipe(gulp.dest('dist/css'));

唯一的问题是源映射包含原始 .less 文件的 URL,它是作为我的文件系统的绝对路径生成的,例如 /Users/myuser/projects/project/web/css/myfile.less .

在开发过程中,我通过 Apache 为站点提供服务。当我使用 Chrome DevTools 打开站点时,我可以检查元素,并且源 map 正在工作,因为我可以看到 myfile.less在样式面板上包括正确的行号。但是,Chrome 正在尝试加载 less 文件,并且它使用的完整路径是源映射输出,但假设它是我网站的相对 url,因此它尝试加载 http://localhost/Users/myuser/projects/project/web/css/myfile.less这是不存在的。

我尝试使用工作区来修复它,但并没有真正进行管理。这个设置有什么问题吗?我错过了什么吗?

最佳答案

我认为你错过了这些最后的步骤:

  • 为您的站点创建一个工作区。将 Chrome 指向您系统上站点的根目录。
  • 在“源”面板中右键单击源映射的less 文件,然后选择“映射到文件系统资源...”。选择文件系统上较少的源文件。

  • 重新加载开发工具(你会得到一个提示),你应该很好。现在,当您点击 foo.less:45在样式面板中,您应该会被带到 foo.less 中的那个位置.现在您已经设置了工作区,如果您在开发工具中保存您的更改,它将持续到源代码较少的文件中。好的!

    请注意,Chrome 存在一个相当大的错误,您可能会立即注意到。当您通过开发工具添加样式规则时,源映射被破坏:
    https://github.com/less/less.js/issues/1050#issuecomment-26195595

    如果这有帮助,请告诉我。如果需要,我也可以稍后发布屏幕截图。

    关于google-chrome - 源映射是绝对路径,但 Chrome DevTool 假定它是一个 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22590839/

    30 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com