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).
Related
I am building a simple webpage (http://www.riffomonas.org/reproducible_research/) using Jekyll that is taking a long time to load on Safari. On Firefox and Chrome it loads instantly. In Safari, when I go in to the Web Inspector, it has two errors. The first...
Failed to load resource: The request timed out
The resource it was trying to get is http://api.pubpeer.com/v2/pubposts?filter=doi&devkey=PubMedSafari.
The second...
TimeoutError (DOM Exception 23): The operation timed out.
It's indicating that it was trying to access PP.js
The weird thing to me is that neither the API link or the Javascript are referenced in the code or the rendered HTML.
Any suggestions?
It turns out that the problem was the PubPeer Safari extension, which they are no longer supporting. Once I removed the extension everything worked great.
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 /
The same application that I am developing works fine on Firefox but not on Chrome.
My application a day ago printed some things on the console, but I removed them today, which means that the actualized version of the application does not print anything on the console.
On Firefox it works, everything renders and there is not prints on the console.
However on Chrome, the app still prints on the console. It means that it is retaining some old state for some reason.
Does that even make sense? The code is already gone (erased), so the only way Chrome is printing the old state on the console is if he is storing it.
On Chrome I also get errors of undefined functions, but they are defined. On Firefox that does not happen.
Have you tried reloading the page? Another thing to try to really get rid of the state that the browser is obviously holding onto is to clear the browser cache.
In previous version of chrome, on a webpage with the following:
<script>
document.write('<plaintext>');
</script>
<img src="http://example.com/image.jpg">
the image would not be downloaded. At some point a chrome update changed this behavior. Now when I look at the network tab, I see the image is downloaded. (fiddle here: https://jsfiddle.net/doojunqx/)
I have a script that is on a page, I would like to use this script to stop the browser from downloading (using up network bandwidth) for images and other assets that are unwanted and below my script tag.
Mobify does something similar here:
http://cdn.mobify.com/mobifyjs/examples/capturing-grumpycat/index.html
As they say on the page "Open your web inspector and note the original imgs did not load." However, when I open chrome developer tools and look at the network tab, I see the original images ARE now loading. I'm not sure what version of chrome changed this, but I think it is recent, within the last month or two.
Is there any way to force chrome back to the old behavior? Or any other way to stop these unwanted assets from loading?
Thanks,
Great question, and you're correct that it is a recent change in Chromium that affected the plaintext tag behaviour. In versions up to and including version 42.*, the HTML document parser would not spawn an asynchronous parsing thread until an external resource was found in the original HTML document. Once such a resource was found, an asynchronous thread would be spawned that would aggressively download all resources references within the HTML.
The recent change simplified the parsing behaviour by moving all document parsing to the asynchronous thread which now kicks off automatically. Whereas before, using the plaintext tag would ensure that no resources would be loaded if it was inserted before the first external resource, the plaintext tag is now racy as resources will download up to the moment the plaintext tag is executed in the main HTML document. As there is a time delay for the script to execute, an unknown number of resources will be retrieved.
There is as of yet no solution to this new behaviour, nor is there a way to disable the preload scanner as you would like. You will need to rely on workarounds such as polyfills to control your resource downloads. This new behaviour is only present in all versions of Chrome >= 43.* and has not been implemented in Safari, Firefox, or other browsers.
Chrome console tells you what line in the parsed file JavaScript syntax errors are located. Every once in a while, when I click on the link to take me to see the actual code of where the error is, I get a blank screen in the console. If I open up the same page inside Firefox with Firebug, I can see the error code without any issues.
Is this a known error in Chrome? If so, are there any ways to remedy it?
Here is an official list of known issues with Google Chrome. It doesn't seem like that is one of the known issues. I would try again and see if it happens again.