Source maps reference temporary file location

[deanmarano]

Source maps work well for me, however when trying to use Google Chrome workspaces, it tries to edit the temporary file (which doesn't work). It'd be nice if the source map referenced the original location of the file.

[simonexmachina]

Hi @deanmarano, can you provide some more information please. "Doesn't work for me" isn't really enough for me to help you with your issue.

Maybe provide the Brocfile.js and any other information you think might be useful.

[simonexmachina]

The problem's probably because the files referenced in the source map aren't available over HTTP. You can confirm this by looking for 404s in the Network tab in DevTools. I just add my project as a Workspace then use "Map to filesystem resource". Let me know if this doesn't work for you. I hope to add some docs covering this to the readme soon.

[deanmarano]

Sorry for the lack of clarity. I'm using it with ember-cli, so my knowledge of how that's using Broccoli is a little opaque. When looking at the sourcemap file (.css.map) the sources array references the temporary locations of the files:

  "sources": ["tmp/tree_merger-tmp_dest_dir-YGjY4M84.tmp//app/styles/app.scss",
"tmp/tree_merger-tmp_dest_dir-YGjY4M84.tmp//app/styles/main.scss",
"tmp/tree_merger-tmp_dest_dir-YGjY4M84.tmp//app/styles/weather.scss",
"tmp/tree_merger-tmp_dest_dir-YGjY4M84.tmp//app/styles/news.scss"]

Whereas it'd be nicer if it was:

  "sources": ["/app/styles/app.scss",
"/app/styles/main.scss",
"/app/styles/weather.scss",
"/app/styles/news.scss"]

So the actual source comes through, but Chrome's workspaces feature fails because it's linked to the temporary location (which gets overridden).

I'm unsure if this an issue with the way ember-cli works with brocolli-sass - if it looks to you that this is being handled properly on the broccoli-sass level then I will raise it with the ember-cli folks.

[simonexmachina]

Okay, are you using ember-cli-sass? That's a module that I wrote to provide sourceMap and includePaths support in ember-cli.

Also, my sourceMap refers to those intermediary files and works fine as long as I set up the workspace.

[deanmarano]

Ah - I hadn't heard of ember-cli-sass yet, as the ember-cli page references broccoli-sass.

[cbosco]

+1 for adding an example in the readme

Also, at least for me, every time broccoli rebuilds it seems to require me to redo "Map to filesystem resource" step but I did confirm it working at least once

[simonexmachina]

@cbosco you're probably adding one of the temporary directories in tmp/. Try adding the root directory of your project instead. I have some instructions here

[cbosco]

@aexmachina thanks for the response and write up

This pretty much sums up what I had tried. Although this may be a change in chrome it appears it is "map to network resource" now?

In any case this sets up a working source map inspection, but only until I modify the underlying SCSS file, triggering a rebuild and new tmp file/directory. This may be due to my using broccoli-timepiece and not the broccoli serve demo server.

[simonexmachina]

The problem here is that you're selecting a file from a filesystem folder. You need to find one of the files it's loading over the network and map it to a filesystem file. For me this is found in localhost:4200 > assets > tmp/tree_merger... > app/styles.