DevTools fail to show source files for SourceMap
TipTopSailor opened this issue · comments
Trying out the web-livereload example on windows and getting following error while trying to browse source code from DevTools
Could not load content for http://localhost:8181/src/app.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)
Do you know what changes are required to config or serve-http to enable linking source files
My workaround is:
require("serve-http").createServer({
port: 3000,
pubdir: ".",
indexFilename: "index-estrella.html"
});
where index-estrella.html
is a copy of docs/index.html
located in the parent directory and its script tag refers to docs/app.js
instead of app.js
.
Chrome needs HTTP access to src/
, which is why the existing approach fails, since it only serves doc/
.
also: for symlinked/monorepo stuff that uses estrella, make sure to use sourcemaps: "inline"
(make sure no .map
files exist in that case!). Or try sourcesContent: true
(doesn't seem to really work atm)
This happens since the web server in the web-livereload
example is serving a subdirectory, "outside" the source directory (which is why you get a 404; the files simply do not exist from the web server's perspective.) To "fix" this you simply need to either run the web server from a parent directory where the source code is or copy the source code into the directory your web server is serving (docs/
in the case of the web-livereload
example.)
Here's a pretty simple solution for the web-livereload example:
$ cd examples/web-livereload
$ npm install -D fs-extra # for its "copy directory tree" function
$ #edit build.js
build.js
const { build, cliopts } = require("estrella")
const Path = require("path")
const fse = require('fs-extra') // <- NEW ADDITION
build({
outfile: "docs/app.js",
bundle: true,
sourcemap: true,
onEnd: () => fse.copy('src', 'docs/src', {overwrite:true}), // <- NEW ADDITION
})
// Run a local web server with livereload when -watch is set
cliopts.watch && require("serve-http").createServer({
port: 8181,
pubdir: Path.join(__dirname, "docs"),
})
@maxkrieger Or try sourcesContent: true (doesn't seem to really work atm)
This has recently been fixed and will be included with the next release :-)
Closing this since it's not a bug