Chrome Developer Tools caches old version of JavaScript files - javascript

I'm experiencing a strange intermittent issue with Chrome Developer tools hanging on to old versions of JavaScript files. I'll be developing some JS app, things humming along just find, and then all the sudden my JavaScript files will disappear from the list of JavaScript files on the "sources" tab. This is my first clue that something is wrong.
What I eventually discovered is that Chrome Developer Tools is, apparently hanging on to an old version of the JavaScript file. Chrome itself is requesting and executing the latest version from the server, but you can't debug the JavaScript file.
I "proved" to myself that this was what's happening by taking a particular JavaScript file that had disappeared from my sources list, and replacing it with a one line console.log statement.
I then reloaded the page, and noted that the console.log statement appeared in the JavaScript console. I also noted in the Network tab that the JavaScript file was successfully retrieved, and that what came down over the wire contained just the one line console.log statement.
However, the JavaScript file still didn't appear in the sources list, and if I clicked on the filename in the console (where it appears on the righthand side of the console, next to the logged statement), then I jump to the sources tab, and an old version of the JavaScript file is opened.
This JavaScript file is loaded onto the page via a regular <script> tag. It is not loaded dynamically, via another script, or via eval. Just a plain, vanilla <script> tag that points to the .js file on the webserver.
I've tried:
Ensuring that "Disable cache (while DevTools is open)" is checked in the DevTools settings.
Manually clearing out my cache and cookies in Chrome.
Restarting Chrome
Manually loading the JavaScript file in a separate Chrome tab
Disabling every Chrome extension/app that I have installed
Running the page in incognito mode
Uncheck both "Enable JavaScript source maps" and "Enable CSS source maps"
None of these changed the behavior. You can watch a video demonstrating this here, if you don't believe me!
I do think it's a Chrome issue, as I can use Firefox without this issue... but I really like Chrome and Chrome's developer tools :-) So I'd like to get this working in Chrome...
Update I reported this as a Chrome bug here. If this bug is affecting you, or important to you, please vote it up and/or add comments with additional information.

Chrome DevTools works fine for me. When I load it for a page it remembers beyond the lifespan of the chrome process what sources I have open; although it gets the order wrong. I see two differences in our devtools prefs: disable cache and enable maps. So I would advise:
1) uncheck disable cache (while DevTools is open),
2) (if 1 didn't work) press the "Restore defaults and reload" button.

The issue persists in 78.0.3904.97. To fix it run settings > advanced > reset.

Some code editors such as rubymine cache js files.
To solve for rubymine: File > Invalidate Cache/Restart

As suggested here https://groups.google.com/d/msg/google-chrome-developer-tools/2rolf--fJ3M/UTJQaZN3K28J, for development environment I added these headers when serving a sourcemap:
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
and it seems to do the job (at least for now).

Related

While running VS Code Live Server (Go Live), the browser is crashing. I am using Google Chrome as default

While running VS Code Live Server (Go Live), the browser is crashing with the below mentioned error. I am using Google Chrome as default. I re-installed VS Code after uninstalling completely (from cache even), restarted browser, and then restarted PC as well with no use. When I checked "Use Local Ip" in LiveServer>Settings:, server is taking too long to respond and eventually fails to load the page (Error: "This site can't be reached"). Another important thing is that Chrome is opening every other website properly. This problem exists only when opening VS Code Live Server. Below is the error code:
Chrome Browser Error:
"Aw, Snap!
Something went wrong while displaying this webpage.
Error code: STATUS_BREAKPOINT"
Another popup is also showing up simultaneously:
"DevTools was disconnected from the page.
Once page is reloaded, DevTools will automatically reconnect."
(This didn't seem like a bug in the code of script.js)
Found the Solution:
Indeed it is a bug in the code of script.js.
If you are having exactly the same problem as I described, let us first see what we don't need to do, as I found these suggestions everywhere, and none will work when both VS Code and your browser are perfectly fine (they only appear to be not working):
No need to restart or reinstall VS Code.
No need to restart or reinstall browser.
No need to restart the PC
No need to disable browser extensions or VS Code extensions.
No need to change LiveServer Custom Browser; you can keep it
default.
No need to change LiveServer>Settings>Use local ip or Use browser
preview (you can keep them both unchecked if they are already
unchecked by default)
However, if you use firefox, console shows the error: "Uncaught out of memory"
Here, I got the first hint. Firefox at least told me to look at memory, but it is not about the memory we think. It is not about multiple tabs opened, lack of disk space, unstable disk, etc. It is the accidentally generated infinite loop in the code which is causing the memory problem (check your code carefully to find it).
In my case, I accidentally didn't tell it to execute the next iteration (i.e., missing counter update, increment, i++) and it is stuck in the same while loop forever, as the condition is satisfied forever without any counter update.
After fixing the code, the below error might show up in the console. Just refresh the page and it will go away.
"favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)"
Note: Unless you fix the code or comment it out, other linked files (like .html) in the folder wouldn't work either.

IE11 javascript fails unless debugger is launched

I hava situation where some javascript a web page works fine in Safari and Chrome, but fails in IE11. Unfortunately due to issues with confidentiality I cannot put the javascript up here.
In IE11 the web page's java script fails to operate correctly. By that I mean some of the javascript works and some doesn't. With no errors displayed or any other indication of whats wrong.
If I try to debug the page using IE's developers tools, all the javascript works perfectly without any errors or issues.
Searching on the net I found many people with the same IE problem - fails normally, works when debugging. The main issues they talk about is the console.log(...) statement. I checked my javascript and don't have any console.log(...) statements.
I then saw a stackoverflow thread where adding a cache:false to the $.ajax({... calls solved the issue. I added the same flag but the problem still persists.
Are there any other bugs I've not found?
The web page is using jQuery to handle most of it's manipulation of the DOM with a single $.ajax... call and a series of $.get(... calls polling the server.
How to debug your web pages.....IE11 tips.
All modern web browsers suppress scripting error messages and warnings by default. (In the early days web browsers would halt page loading/rendering and display a script error message with an alert statement)... this gives the best user experience who isn't concerned with the internal workings of web site code.
So, scripting errors will only BREAK execution if:
1. The browser debug tool is opened. and
2. The developer tools' Debug tab setting for Break on Exceptions has been turned on.
So to debug your web pages.
1. navigate to about:blank to start a testing cycle.....press f11 to display the dev tool, select "Break on all exceptions" from the dropdown (looks like a stop sign). Pin the dev tool to the bottom of the browser.
2. Return to the browser address bar and navigate to your test site (typed address of paste and go)...
The dev tool will now break on ALL exceptions and you will list them in the console tab.
IE has built-in content blocking and has ActiveX filtering (ad blocking) which can affect outcomes. You need to configure Internet Options so that the IE dev tool console will record any blocked content or security (XSS) errors.
Tools>Internet Options>Advanced tab, check "Always record developer console messages".
Also on the Emulation tab of the IE dev tool you will find the Emulation Mode (aka documentMode) that IE is using, and how it was established eg. x-ua meta, Enterprise site mode list, user Compatibility View list, etc
If you are developing an internal company website, the emulation mode used by IE may be for an earlier version of IE.. (IE8 on XP).. you should include this information with your questions.
You should also include the IE security zone that your site has been mapped to.. File>Properties menu in IE.... eg. Intranet zone as this can have different security and blocked content outcomes.
finally, the first step in troubleshooting web browser issues is to test in noAddons mode (for IE, winkey+r>iexplore.exe -extoff ). IE has built-in form-fillers and popup blockers... third-party addons can affect the outcomes expected.

My FanGate code on my works outside of FB, but not when viewed within the FB Fan Page

I am very new to FB programming and JavaScript as well (a long time ASP.NET programmer). I am trying to use the JavaScript SDK to create a fangate. The page works perfectly when I run my page directly (http://wmssupportforum.com/FacebookPages/FacebookWMSJobs.aspx), but when it is pulled up from within my Fan Page (http://www.facebook.com/pages/WMS-Support-Forum/207356652683205?sk=app_143965989047095), it doesn't work, i.e. it doesn't Show my Liked div and hide my UnLiked div, etc.
I have no idea how to debug this from within FB...(when I render it in IE directly from my site, I can debug it, but when I try to debug the Fan Page version, IE's dev tools won't load the script to debug it...it just hangs).
Any help is greatly appreciated!!!
Thanks in advance,
Chad
UPDATE: It looks like the difference is only an issue in IE v9. I don't have the same issues in Firefox or Chrome. So in IE9, pulling my page up on one IE Browser tab directly at the page URL works, but when pulled up through my FB FanPage on another IE tab, it doesn't work...seems like it is hanging as the HTML tab in IE Developer Tools window just says Loading....
It's a webserver issue. Believe it or not, but by adding in a simple P3P header to your response will solve the IE issue. See: Cookie blocked/not saved in IFRAME in Internet Explorer and also http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx

How can I debug a Firefox extension with Firebug?

I'm trying to use Firebug to debug a JavaScript file in an extension I've added to Fx 4.
Can anyone tell me how to do it? I can only see website scripts.
Use Chromebug it's firebug for extension development, witch will give you the full ability to inspect debug firefox it self and all firefox extension as if it's a webpage :)
1- install the latest version from here: http://getfirebug.com/releases/chromebug/
2- Winkey+R to open run then type firefox.exe -chromebug this will run firefox with chromebug
3- for more information visit http://getfirebug.com/wiki/index.php/Chromebug
Please see MDN - Building An Extension - Debugging Extensions, which shows what tools Firefox provides you with to natively debug extension, also take a look at Dive Into Greasemonkey - Debugging User Scripts (PDF, p.13) which is aimed more specifically at your request.
Other than that, see How to debug a Greasemonkey script with the Firebug extension?
On Firefox 19 or later, it's possible to use the built-in JS debugger on the browser itself. Go to about:config and set the following two prefs:
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
After you restart the browser, you can access the Browser Debugger through Tools > Web Developer > Browser Toolbox.
(note that you must accept the incoming connection)
See more at: https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger
In the bottom right hand corner there should be a little Firebug icon. Single or double click to open then you see some tabs at the top. Click the "Console" tab for real time debugging, or the "SCript" tab to view the scripts that have been loaded. Note, you can also load CSS and HTML through Firebug, use the "Viewer" icon to view HTML code on the page in real time.

Bookmarklet Opens Empty Window

Ok so I have a basic bookmarklet that opens remote websites. However when I try to open my local dev site it just opens to a blank page. I am assuming this has something to do with security etc.
I set the bookmarklet to open one of my remote sites, gnull.com - This worked fine. I then set gnull.com to resolve to 127.0.0.1 and changed my bindings in IIS. The result this time is that a new window opens however it is blank. When I look at the headers being sent only one is created with a result of 'error' and a type of 'NS_ERROR_ABORT'.
I am using Firefox 4 on Windows 7. Does anyone know how to setup bookmarklets for testing local sites? The code itself works fine since I have tested this with other live websites so this appears to be a browser security feature.
So as I mentioned in the comment, I found the issue was with ABE - a component of the noscript extension. ABE blocks scripts from accessing local resources, in my case a local website. I disabled ABE in the noscript options and everything works fine.

Categories