Google chrome devtools 使用具有相对路径的sourceURL和sourceMappingURL

在Firefox和Chrome中，

sourceURL

的相对性似乎有所不同-当一些工具在JS文件中生成与放置文件相关的

/#sourceURL=…

字符串时，Firefox将URL视为与JS文件相关，而Chrome将其视为与原始HTML文件相关。哪一个是正确的，或者有更清晰的方式来说明这一点

---

在这个示例应用程序中，我尝试使用

sourceURL

将许多较小的文件合并到一个较大的文件中，但仍然允许浏览器知道应该调用哪个较小的文件，然后使用

sourceMappingURL

指定相对于原始文件的sourcemap文件

目录结构：

index.html
js/
  all.js
  uncompiled/
    app.js
    app.js.map
    app.min.js

index.html

是加载

js/all.js

或

js/uncompiled/app.min.js

的最小页面。在

JS/all.JS

中没有其他JS（因为这是一个最小的示例），但理论上这里可能有很多。该文件的目的只是将各种缩小的JS文件组合成一个更大的文件，但仍然允许开发人员查看原始代码，并相应地设置断点

app.js的内容

：

class应用程序{
建造师（姓名）{
this.name=名称；
}
(){
window.alert（“Hello”+this.name）；
}
}
新应用程序（“科林”）.sayHi（）；

然后，运行一个简单的minifier，使用匹配的

app.js.map

文件将其重建为

app.min.js

：

var-App=function（a）{this.name=a}；App.prototype.sayHi=function（）{window.alert（“Hello”+this.name）}；（新应用程序（“科林”））.sayHi（）；
//#sourceMappingURL=app.js.map

最后，将缩小的输出包装在eval中，并将

sourceURL

参数添加到末尾（为了可读性增加了换行符）：

---

如果

index.html

直接指向

js/uncompiled/app.min.js

，那么Firefox和Chrome都正确理解app.js.map位于同一目录中，并且应该在调试时使用。但是，如果

index.html

指向

js/all.js

，那么当两个浏览器都正确地显示单个文件中的

eval

'd内容时，只有Firefox会创建相对于

all.js

的路径

在此结构上使用

python-mhttp.server

可以在firefox中显示以下结果：

127.0.0.1 - - [14/Jun/2019 08:33:37] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:37] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:38] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:33:38] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js.map HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js HTTP/1.1" 200 -

另一方面，Chrome的尝试如下：

127.0.0.1 - - [14/Jun/2019 08:34:22] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /uncompiled/app.js.map HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:34:23] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:23] "GET /favicon.ico HTTP/1.1" 404 -

Chrome似乎假设

js/app.js

中的

sourceURL

是相对于

index.html

，而Firefox（从我的角度来看，这是正确的）将其解释为相对于

app.js

。我建议Firefox是正确的，因为它允许任何HTML文件在任何路径包含该JS，并且仍然正确加载了sourcemaps

示例源，包括位于不同相对路径的两个html文件：

来自规范（或位于的副本）：

如果源映射URL不是绝对的，那么它是相对于生成代码的“源源源”的。源原点由以下情况之一确定：

• 如果生成的源代码未与具有“src”属性的脚本元素关联，并且生成的代码中存在

  /#sourceURL

  注释，则应使用该注释确定源代码的来源。注意：之前，这是“/@sourceURL”，与“//@sourceMappingURL”一样，两者都接受是合理的，但是/#是首选
• 如果生成的代码与脚本元素关联，并且脚本元素具有“src”属性，则脚本元素的“src”属性将是源代码
• 如果生成的代码与脚本元素相关联，并且脚本元素没有“src”属性，则源源代码将是页面的源代码
• 如果使用

  eval（）

  函数或通过

  new function（）

  将生成的代码计算为字符串，则源代码将是页面的原点

在

js/all.js

的情况下，它属于最后一种情况：源原点将是页面的原点。因此，Chrome似乎遵循了规范，尽管这可能看起来有悖常理。

来自规范（或位于的副本）：

如果源映射URL不是绝对的，那么它是相对于生成代码的“源源源”的。源原点由以下情况之一确定：

• 如果生成的源代码未与具有“src”属性的脚本元素关联，并且生成的代码中存在

  /#sourceURL

  注释，则应使用该注释确定源代码的来源。注意：之前，这是“/@sourceURL”，与“//@sourceMappingURL”一样，两者都接受是合理的，但是/#是首选
• 如果生成的代码与脚本元素关联，并且脚本元素具有“src”属性，则脚本元素的“src”属性将是源代码
• 如果生成的代码与脚本元素相关联，并且脚本元素没有“src”属性，则源源代码将是页面的源代码
• 如果使用

  eval（）

  函数或通过

  new function（）

  将生成的代码计算为字符串，则源代码将是页面的原点

在

js/all.js

的情况下，它属于最后一种情况：源原点将是页面的原点。因此，Chrome似乎遵循了规范，尽管这可能看起来有悖常理。

没错，我更关注的是“这有什么用”，即“规范实际上规定了什么”——这不是浏览器规范第一次被定义为ambig

127.0.0.1 - - [14/Jun/2019 08:33:37] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:37] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:38] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:33:38] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js.map HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js HTTP/1.1" 200 -

127.0.0.1 - - [14/Jun/2019 08:34:22] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /uncompiled/app.js.map HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:34:23] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:23] "GET /favicon.ico HTTP/1.1" 404 -