I'm working on some dashing widgets in a dashboard project.
Normally if I work on a coffeescript and I save it, I have to reload the page in the browser, and I can see the effect of my changes in the widget.
For some time the change won't do any effect in the browser. I thought, it may be a browser cache issue and I tried clear the cache, but nothing changed. I tried another browser, same issue.
I can see my changes in the browser only if I change the classname off the widget.
Is there any simpler method?
I encountered a similar issue. The widget would not refresh to reflect my html changes (new <h2> tag). Restarting / clear-cache were the first things I tried. I use Chrome and I found this note in the Dashing-Workshop :
Note: Chrome is sometimes weird, and it's possible that your browser isn't showing the number anymore in the widget. If that's the case load dashing in a brand new tab to clear the cache.
I resolved my issue by turning off caching "Developer Tools > Networking > Disable cache [x]"
It shall work, Use chrome developer tool to debug it
console.log to print to console
use inspect element to see the html/css
Related
It seems as though this may be a bug with the Blink engine itself, but when using JS similar to this
window.open(Location, '_blank');
The new window always has a visibility state of hidden, and it's very consistent. Sadly JS fiddle doesn't seem to work with this (iFrames break the bug maybe?), but I have a super basic test case here.
You'll see if you open my test html file, and Ctrl+Click on the button, the new tab that opens up will always be stuck in a hidden state, which you can check in the console like
> document.visibilityState
"hidden"
> document.hidden
true
This causes weird issues with things that check the visibility state of the page, and no amount of refreshing seems to fix it either, essentially once the tab starts that way, it never comes back out of that, although closing the tab and reopening with Ctrl+Shift+T does seem to make it behave correctly.
I noticed the bug using the Dark Reader extension, some of my tabs would never fully style correctly, and I think this is the culprit. Is this a bug? Is there a workaround so my own applications can load correctly whilst making sure the tab is visible?
Chrome version: 84.0.4147.105, Edge version: 84.0.522.44
This has been a problem for a long time and I've never found a solution for it and while other questions on here are similar, they are not exactly what I'm seeing.
The problem is that the SOURCE used to step through the code does NOT refresh on every page load. Yes, I have disabled the cache - but it is not the browser cache that is the problem, it is the DEBUGGER SOURCE cache.
In my webapp (Struts2 and Tomcat), I have the main page with title bar and left the menu. The center content is an iframe that loads all the appropriate JSPs. I use one 'action' for most of my navigation with different results displaying different pages. The problem is that the NAME in the chrome debugger SOURCES pane does not change as I navigate. The actual page changes, but since the name doesn't change, Chrome does NOT bring the new source into the debugger window. So what happens is if I have 'debugger;' on line 200 in the page being loaded, it stops, and shows the 'source' - but its the OLD source at line 200, not the actual source that is running! If I right-click on the old source file in the SOURCES pane, and "Reveal in Network panel" the real source is shown here as it really was loaded from my server, BUT the debug source does NOT change.
Question: How do I get around this bug in Chrome and force the source to reload in the debugger display?
UPDATE: No, this is not the same as that other question. The answer by David Fahlander seems to fit what I'm saying. The ACTUAL javascript source IS refreshing and is shown correctly in the RESOURCES and NETWORK panes. But in the SOURCE pane where actual debugging is done, the new source is NOT refreshed. And its hard to debug code you cannot see!
Maybe try the old fashioned method of adding an URL query parameter with, say current time in ms? Something that your app will ignore, but Chrome will treat it as a new page? e.g. https://example.com?time=1594125425508
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
Since I installed Visual Studio 2010 from scratch about 2 months ago, it behaves slightly different when debugging JavaScript code being run in IE.
When I set a breakpoint, it opens a duplicate of the view with the term "[dynamic]" in the header and marks the breakpoint in there.
When a JavaScript error happens during execution, it does the same before it marks the line of code that threw the error.
This "dynamic" view is editable but edits have no effect - they are not saved to the file.
I find this behavior pretty uncomfortable. Everytime I notice an error in the code during debugging, I happen to fix it in the dynamic view. I hit save. VS does not complain. Next I refresh the page in IE, and - bang - the changes are lost, it loads the untouched old version again.
I haven't been able to find out how I can turn these views off. Before I re-installed Visual Studio it did not do that. It would only create "dynamic" views for script found in inline script tags in HTML files.
Try this
IE > Internet Options > Settings (under browsing history) > Check for new version of stored pages : Every time I visit the webpage.
This works for me in IE10.
Other option is to open Developer tools and select cache option Always Refresh from Server as show in the image below
Try hitting CTRL+F5 on the web page. That did the trick for me.
The problem was that I had opened other IE windows from a previous debugging session, so the dynamic javascript files were still cached.
Having developer tools open - F12 - should also cause the cache files for the page to be cleared on each refresh.
Changing the encoding of the JS file in question, from a Windows codepage to UTF-8, fixes this for me.
Narrowing it down, it appears that OEM Extended ASCII characters in the file (e.g. ALT-254 which I use for a bullet) trigger the problem with the Windows codepage files.
(Visual Studio 2013 Update 5, IE11)
For Google Chrome:
Open developer tools(F12)
Open Network Conditions Tool
Select Disable Cache
I had the same problem of not being able to hit a break point in new code. And breakpoints on old code in the same page will bring up the [dynamic] version. The edited page is not reloaded. This just started for me a week ago in both VS2012 and VS2013. Using refresh page and/or Ctl-F5 did not work for me. BUT, reading this thread pointed me to using F12 to open Developer tools. Leaving that window open, while hitting refresh does the trick. Thanks guys.
1) Run the page Without Debugging (Debug-->Start Without Debugging)
2) While the web page is open in Internet Explorer, press Ctrl-F5 so
that the IE cache is cleared. Ensure IE has the focus.
3) Close IE and re-run the page with Debugging (Debug-->Start
Debugging).
This fixed the issue for me.
So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!
This is how I include it in the webpage (inside the <head> element):
<script type="text/javascript" src="engine.js"></script>
When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?
The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).
Chrome solution #1
Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
Select the Network tab and tick the Disable cache checkbox.
Reload the page.
❗️Note: The cache will be disabled only when the devtools window is open.
Chrome solution #2
This only makes sense if #1 is not used.
Open Developer Tools.
Click the Settings cogwheel icon in the bottom right corner.
In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.
Chrome solution #3: empty cache + hard reload
Open Developer Tools (otherwise the menu in the next step won't show).
Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.
Modifying javascript code
A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:
<script type="text/javascript" src="myscript.js?ver=12345"></script>
This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.
NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.
Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.
It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.
This bugged me as well; CTRL+F5 or SHIFT+F5 never worked...
The only things that works is opening your dev tools (hit F12), and right-click the reload icon next to the address bar and then selecting either "Hard Reload" or "Empty Cache and Hard Reload"
As I said in the comment I guess it's a cache problem, a CTRL+F5 should be enough, in case it is not go for CTRL+SHIFT+CANC and clear browsing data. However sometimes it's the server that has some kind of cache, I say that because with IBM WebSphere I often get cache problems that I can't resolve with a simple F5 on my browser. I just have to wait for my web server to "refresh" itself.
In the latest chrome stable 21st Oct 2016.
Open Developer Tools (F12 or right-click > Inspect or vertical ellipsis icon in address bar right corner > More Tools > Developer Tools).
Click the vertical ellipsis icon in the top right corner of Developer Tools navigation bar > settings.
In the Preferences section find the Network > Disable cache.