How to enable folders in Chrome devtools > Sources > Page > top > (no domain) (files with //# sourceURL=...) - google-chrome-devtools

Question

Is there a way to show folders for path's in Chrome devtool > Page panel
for tree nodes in top > (no domain)
these are node comming from js eval with a //# sourceURL=...
as my code contains a lot of these I want them to show as
- top
- MyDomain
- MyFile
- (no domain)
- FolderA
- Eval1
- Eval2
- FolderB
- Eval3
- Eval4
Instead of
- top
- MyDomain
- MyFile
- (no domain)
- FolderA/Eval1
- FolderA/Eval2
- FolderB/Eval3
- FolderB/Eval4

Answer 1

Include the domain (origin) in the sourceUrl.
I had to find this out by trial and error, it is not well-documented anywhere.
JS syntax:
//# sourceURL=http://mySite:8000/FolderA/File1.js
Css syntax:
/*# sourceURL=http://mySite:8000/FolderA/File1.css */
Build it in the browser:
Create a sourceUrl from a relative url:
function jsSrcUrl(path) {
return "//# sourceURL=" + window.origin + path + " \n";
}
var src = "/js/myScript.js"; // use this url in your GET request via fetch()
var sourceUrl = jsSrcUrl(src); // append this and eval it later
Create a sourceUrl during a fetch request:
var src = "/ui/vue.js";
var fullUrl;
fetch(src)
.then(function(response) {
fullUrl = response.url;
return response.text()
})
.then(function(text) {
console.log(text)
})
var sourceUrl = "//# sourceURL=" + fullUrl + " \n"
Add a sourceUrl to your script (which is a string before eval):
var scriptWithSrcUrl = script.concat(sourceUrl);
Eval your script to load your script (string) into the browser and sources panel
eval(scriptWithSrcUrl)
Put it all together: Create a sourceUrl during a fetch request AND append it to the script AND eval it:
async function loadScript(url) {
var fullUrl;
async function getScript() {
return fetch(url)
.then(function(response) {
fullUrl = response.url;
return response.text();
})
.then(function(text) {
return text;
});
}
var script = await getScript();
var sourceUrl = "\n//# sourceURL=" + fullUrl + " \n";
var scriptWithSrcUrl = script.concat(sourceUrl);
(1, eval)(scriptWithSrcUrl);
}
loadScript("/path/to/script.js");
Look in your devtools sources panel and find your file in the proper folder and domain!
Dear Google, Mozilla, Microsoft, & Apple:
The fetch api is nice, but fetching js/css/html via a get request, injecting a sourceUrl, and eval'ing it is not just lame, it's ultra lame. Loading everything in a script tag in the document head doesn't play nice with lazy-loading components, code-splitting, tree shaking, and SSR in general. Wouldn't it be nice if there was an api to load js, css, html templates, components, and js modules into global scope - all from js (not from html) natively using browser api's?
A way that doesn't involve:
ES6 module syntax and scope (for loading into local scope)
fetch() + sourceUrl + eval()
document.createElement('script') + set src + onload() (pollutes the doc head)
Some library/dependency (Jquery $.getScript(), Fetch inject, Requirejs, etc.)
I am sure that this api already exists within the browser, script tags probably already consume that js api...can't we just have nice things?
loadScript("path/to/js.js"); // for loading js into global scope
Such a simple use case, yet no API.