I'm using Chrome and have source maps enabled. Coffeescript is compiling to JS with the sourcemap embedded at the bottom of the .js file. I can see the *.coffee code in the source tab in the developer tools.
When there is an error in the console I would like to be able to click and jump to the coffeescript code. Currently it only jumps to the .js code and there is no way to go to the .coffee code from there.
Is this supported? If so, how can I make it work?
Related
I have been trying to open html file from my desktop folder using chrome. It shows file_not_found it may be deleted or moved. But same is getting open in Edge browser. I'm using windows 10. code written in VS Code editor. Need help. I'm a beginner in programming language.
Install a live-server extension in VS code then you can serve your page from there
You can download from the extensions tab by searching live Server by ritwickdey or
use this link https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
I am generating the bundled.js file using webpack for a typical angular project. Now I deploy this on the web server. The bundle.js file has the following at the end
//# sourceMappingURL=main.bundle.js.map
However Chrome does not seem to detect that there is a sourcemap available. It does not even show the icon saying that a source map is available. How do I fix this? Plus should the path to the sourcemap be http://url/main.bundle.js.map? How does chrome know where to load the sourcemap from?
For chrome, source-map was not loading/working for me too. I kept on seeing the bundle.js files. However, in other browsers it worked, that are chrome related like Brave. So I just went into my chrome browses dev-tools settings > preferences and then in the bottom right, I clicked the "Restore defaults and refresh" button and it worked fine after.
These are the runes you are looking for (chromeDevTools):
Map webpack://./ to /
I'm developing an Angular app. When trying to debug my directive's link function I run into problems with Chrome regarding source maps.
On the first load of the page (triggered by Gulp and BrowserSync), everything is just nice and dandy: I can see both the browserified file as well as the single source files from the map. There is an error in the console, so I click on the call trace to explore it and the correct line of code will be shown inside the source file - just as expected.
The trouble begins by setting a breakpoint in my code and reloading the browser to debug. The execution halts at the breakpoint - ok -, yet apparently no source file has been loaded yet. Instead where before had been the source file, a text of friendly green letters tells me:
Please wait a bit.
Compiled script is not shown while source map is being loaded!
That is correct. I can see in the sources tab that it's indeed not loaded, yet nothing further ever happens (presumably due to the breakpoint).
I've never had that behavior before. I don't think it's due to my Browserify source maps, rather I suspect it's an issue with Chrome.
In Firefox everything works as it should. But I much prefer Chrome over Firefox, so...
Did any of you ever had this issue or has any idea what might be causing it?
The Chrome version that I'm is using version 41.0.2272.118 (the current one as of asking this question).
I have an extension that has the following files:
content.js, background.js, manifest.json, mystyles.css, jquery-2.0.3.js and icon.png.
I can set breakpoints in the content.js file via the Chrome Debug Tool via the "Sources" tab and via the "Content Scripts" tab. My problem is that I can't find a reference to the "background.js" file, so I can set a breakpoint in it. Can someone tell me what I am overlooking or doing wrong?
References:
I have watched the Chrome Debug Video on YouTube.
I have read the Chrome Tutorial on Debugging.
If you open up a new tab and go to chrome://extensions, you will see a list of installed plugins, including your own. Next to your plugin, there will be a link to "Inspect Views" pointing to a background.html page or a generated one in your case. This will launch a new debug window in Chrome that will allow you to browse to your background.js file and set breakpoints (by clicking on the line number)!
In Chrome Canary (Version 30.0.1570.0 canary) I've set up sass source maps as follows:
DevTools > Settings > General > Enable CSS source maps + Auto-reload generated CSS CHECKED!
DevTools > Settings > Added folder public
My folder structure looks as follows:
public
sass
_buttons.scss
style.scss
css
style.css
index.html (with link href=css/style.css)
In DevTools I can do inspect element and see that a style-rule comes from _buttons.scss. I can click the _buttons.scss and get the DevTools to display the scss source. I can modify the source in devtools and hit cmd+s and it's saved to disk and when switching to sublime, the file has been updated. BUT in Chrome the css is not automatically reloaded. I have to refresh the page manually to reload the css.
Sass version:
$ sass -v
$ Sass 3.3.0.alpha.149 (Bleeding Edge)
I watch with:
$ sass --scss --sourcemap --watch public/sass:public/css
Any body else having problems with the Auto-reload generated CSS in Chrome (Canary) ?
I've also tried Chrome "normal" (20.0...) and same problem there, no auto-reload.
Have you tried using Workspaces? That's what I use and it's working fine for me, and always has. A bunch of things have moved out of experiments recently, so maybe that's why it's not working?