I'm developing a TinyMCE plugin, however the changes I'm making to the plugin do not get loaded into TinyMCE after the first time it's loaded (It's getting cached). This is happening on both FF and Chrome.
If I search the cache in Firefox, I find a reference to the plugin's editor_plugin.js file with a cache expiry of 6 days 23 hours.
The only way I can get round this is to clear the cache on the browser every time I want to test a change - Anyone else get this behaviour? Am I missing something obvious here?
To force reloading the cache on clients, tinyMce implements the solution with a cache_suffix. It will reload all the files if you change the suffix.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
cache_suffix: '?v=4.1.6'
});
https://www.tiny.cloud/docs/configure/integration-and-setup/#cache_suffix
There is an easy way in Firefox to get rid of the chache on every new page load.
You need to install Firebug.
Go to the network tab and choose "deactivate browser cache".
Usually I manipulate the changed script's referring url, for example:
ed.windowManager.open({
file : url + '/image.htm?v1',...});
The file name is not changed, but the script vill be reloaded at production time too.
Related
Is it possible to spoof Chrome plugins?
I noticed that their names are stored in Preferences and Local State file in /Users/mainuser/Library/Application\ Support/Google/Chrome/Default/Preferences and /Users/mainuser/Library/Application\ Support/Google/Chrome/Local\ State respectively (on Mac), but manually changing the contents of these files gets treated as file corruption. Any idea how to spoof it?
Plugin information are publicly available and are easily inspected with something like this:
var x=navigator.plugins.length; // store the total no of plugin stored
console.log(x);
var txt="";
for(var i=0;i<x;i++)
{
txt=navigator.plugins[i].name;
console.log(txt);
}
I assume you want to modify an extension that you have installed on your machine in order to improve it.
You can use the Developer Mode and load the modified extension:
Extensions that you download from the Chrome Web Store are packaged up
as .crx files, which is great for distribution, but not so great for
development. Recognizing this, Chrome gives you a quick way of loading
up your working directory for testing. Let's do that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
Paranoid about browser fingerprinting I guess.
If you want hide navigator.plugins list, see this plugin :
https://github.com/bcaller/plugin-privacy-chrome
See content.js#L27 :
properties.plugins = vecw({}, true);
The "real" fix is to stop the enumeration of plugins for everybody, so there is no fingerprint information (after everyone upgrades):
https://bugs.chromium.org/p/chromium/issues/detail?id=271772
If you hide navigator.plugins, that is also an identifying (single bit) feature that will make you stand out since there will be very few users who hide navigator.plugins. Which is why you'd want to spoof.
From another answer, from #Hors Sujet, https://github.com/bcaller/plugin-privacy-chrome is a great place to start how to program a spoof. You'll want to look like the vast majority of Chrome users (I'm not sure that actually exists, though.)
But what you likely really want is EFF's Privacy Badger.
Start here to see the number of bits you can be fingerprinted by:
https://panopticlick.eff.org/
And then install Privacy Badger from here:
https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp
We have a DotNetNuke module running in an instance of DotNetNuke 5.4.4, installed on "Server A", a Windows Server 2008 R2 Standard machine with IIS 6.1 and Internet Explorer 11.
We're accessing our DotNetNuke module from "Server B", running Windows Server 2008 Standard, with Internet Explorer 9.
The issue happens when we click an anchor html element that has an onclick attribute, while accessing our module on Server B.
The anchor with the onclick is like:
<a onclick='OpenWindow("/DotNetNuke/DesktopModules/Module/View.aspx?dt=%c2%b2%c2");return false;'
href="http://000.00.0.0/DotNetNuke/DesktopModules/Module/View.aspx?dt=%c2%b2%c2"
target='_blank'
jQuery1431968126278="42">Doc name (SSN-SS-SSNN)</a>
And the OpenWindow function is like this
function OpenWindow(url) {
window.open(url, '', 'top=15,scrollbars=yes,menubar=no,height=800,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
As you can see we have an anchor element, with an onclick attribute, where it is supposed to call the OpenWindow javascript function, then return false, so the default action for clicking an anchor (browse to the href) does not happen.
When we click this link though (ONLY on server B), we get no popup window, no breakpoints in the OpenWindow function are hit, and the browser navigates to the href by opening a new tab (View.aspx). This suggests to me that the OpenWindow function referenced by the onclick attribute is not even running for some reason, even though it is on the anchor element, and works on any other server.
What I've tried
I compared the security settings, web.config files, and DotNetNuke settings between the Server A DotNetNuke and my local developer DotNetNuke instances, and found no differences in setup.
I compared the Server B Internet Explorer security settings to my security settings, and found no differences in setup.
On the advice of comments on this question, I tried changing the anchor tag to a span tag instead (removed href and target attributes), and I am seeing the same behavior. It works on Server A and Dev, but doesn't do anything on Server B now. I think the core issue is that either the onclick attribute is not being recognized, or is being blocked somehow.
I've now gone further and changed most of the <a>...</a> tags into <span>...</span> tags, with specific classes, that I then attach jQuery(...).live('click', ...) handlers to (using jQuery 1.4.2). That is allowing the clicks to work, but I still haven't resolved why the onclick attribute is being ignored.
What's weird..
If I open the developer tools (IE9), then click the "Edit" button to turn edit mode on and off again, all of the onclick attributes on anchor tags and img tags start working correctly, until I reload the page.
If I edit the onclick handler in any way manually through the developer tools, like say removing the return false; from the onclick handler, it will work, but if I put the return false; back to make it like I never changed anything, it stops working again.
What I'm trying to figure out
I am hitting a wall with what to check to figure out this issue. I can't reproduce it on my developer machine, and it works on Server A as well, so the code is working perfectly fine.
I'm thinking there must be a setting that I am overlooking somewhere, but where? I have no idea what else to check at this point, and I'm looking for ideas.
I don't have an exact answer, but I can give you the general idea of what is happening and why.
The two servers are not getting identical content -- perhaps they are pointed at different CDNs, perhaps one has an old file of a JavaScript file somewhere -- you'll have to walk through them one by one.
Something, somewhere, is applying an onclick handler to all of your anchor tags.
At first I thought it was something attached to the body element and targeting your links, but I ruled that out. The fact you can edit the HTML and save it and then the link works means you are detaching whatever was attached to that link element.
I would:
Save the entire web page from Site A
Save the entire web page from Site B
Run a diff tool against the two directories.
Have you tried to call window.open directly from the onclick attribute? It could be that the function is not loaded at the time the link is clicked, so it produce an error, so return false is not called, and the link proceed with its default behaviour (in this case open a tab).
If this is the case, look at the loading order of that function, or try placing it in a different part of your code (maybe within the onload event).
Check if you're showing JS errors in your Internet Options.
It might be a bit childish, but since you are opening a window as a Pop Up there can be issue that the URL from the site might be blocked from the browser. It should work at all times if you just replace
window.open(url, '', 'top=15,scrollbars=yes,menubar=no,height=800,width=800,resizable=yes,toolbar=no,location=no,status=no');
with
window.open(url);
Have you tried modifying your tag to:
<a href='javascript:MyFunction(this);' data-url='YourUrl'>Name</a>
MyFunction: function(obj) {
var element = $(obj);
window.open(element.data("YourUrl"));
}
Note that if the user's browser is configured to open Windows as tabs, there is not a workaround. target="_blank" is the best way that I know of to achieve this and enforcing browser behavior via GP.
Sounds like it's something not in the scope of the code you have provided. You mentioned opening the IE9 dev-tools makes it work, I suggest try adding console -polyfill, something like:
if(typeof(console)=="undefined") {
var console = {
log : function() {},
error : function() {},
debug : function() {}
};
}
Just in case some of your code is outputting things into the console and the JS code stops working after that event. Could be some external library, which after loading starts outputting things to the console - that might work differently on different servers because of caching settings and/or network latency.
NOTE: to test this properly, remember to add this into a SCRIPT tag before you load any JS code or import any external library.
//lots of html here
<script>
var a = $('#a').val();
$.post(url,{
a: a
});
</script>
suppose there is a webpage, file.php, like this and i wanna edit this page live. so if i use chrome dev tools then the edited script does not works. What i did was changed it a bit to...
$.post(url,{
a :'edit'
});
Now this edited js does not works ! It still uses its prev code!
It is most likely a browser caching issue. If you press Ctrl+F5, it will force your browser to refresh its static content.
Also if you refer to your JavaScript files with a unique query string, it will stop the browser from caching it.
Please note that this may cause the load time of the site to increase as the browser won't be loading the JS file from its cache.
I'm loading files using a require function inside my code, which adds a <script/> tag to the body of the page with the relevant attributes.
The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.
What am I doing wrong?
My require function looks like so:
require: function (moduleId) {
var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
var script = $('<script></script>').attr({
'src': filename,
'type': 'text/javascript'
}).appendTo('#Scripts');
}
This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :
http://jsfiddle.net/Tgax4/
There are two possible solutions to your problem :
Chrome is not up to date on your workstation. Update it.
You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.
In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.
Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?
Using it I never had problems debugging in dynamically loaded scripts.
EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.
Could you try replacing
$('<script></script>')
with
$('<script>')
Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.
And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.
I have an external JavaScript file and whether in FireFox or Chrome, whether all browsing data is cleared, it will NOT update no matter what. I believe something happened when I made a backup of my file, which I simply added "_thedate" to the end of the name. Then Save As back to the original name.
Now I cannot seem to get rid of the old JS no matter what unless I change the name of the file, which I really don't want to do, or add the script to the PHP page, which crowds it.
Anyone know the solution to this?
You are sure you are linking to the same file and then editing that same file?
On some browser, you can use CTRL F5 to force a refresh (on the PC). On the Mac, it is Cmd Shift R
Firebug also has a net tab with "Disable Browser Cache".
But I want to give a warning here: even if you can hard refresh, how do you know your customers are getting the latest version? So you need to check, rather than just making sure you and your program manager can do a hard refresh and just go home and take the paycheck next month. If you want to do a job that change the world for the better, or leave the world a little bit better than you found it, you need to investigate more to make sure it works for your customers too (or else, sometimes the customer may call tech support, and tech support may read the script of "clear out the cookies and it will work", which is what happens to me sometimes). Some methods down at the bottom of this post can ensure the customers get the latest version.
Update 2020:
If you are using Chrome and the DevTools is open, you can click and hold the Refresh icon in front of the address bar, and a box will pop up, and you can choose to "Hard Reload" or even "Empty Cache and Hard Reload":
Update 2017:
If you use the Google Chrome debugger, it is the same, you can go to the Network section and make sure the "Disable cache (while DevTools is open)" is checked, in the Settings of the debugger panel.
Also, when you link the JavaScript file, use
<script src="my-js-file.js?v=1"></script>
or v=2, and so forth, when you definitely want to refresh the file. Or you can go to the console and do a Date.now() and get a timestamp, such as 1491313943549, and use
<script src="my-js-file.js?t=1491313943549"></script>
Some building tools will do that automatically for you, or can be configured to do that, making it something like:
<script src="main.742a4952.js"></script>
which essentially will bust the cache.
Note that when you use the v=2 or t=1491313943549, or main.742a4952.js, you also have the advantage that for your users, they definitely will get the newer version as well.
How about adding a '?2' to the tag?
<script src="a.js?2"></script>
The server should return the same file with or without the '?2', but the browser should see it as a different file and redownload. You can just change this query string whenever the file is changed.
adapted from: http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/
I've had this problem before, it's very frustrating but I found a work around. Type in the full address of the js file (i.e. yourhost.com/javascript.js) and load it. You will probably see the old version load. Then hit f5 to refresh that page and you should see the new version load. The js file will now be updated in your cache and the code should run as you expect.
The solution I use is.
Using firefox
1. using web developer --> Web Console
2. open the java-script file in new tab.
3. Refresh the new tab you should see your new code.
4. Refresh the original page
5. You should see your changes.
I had this problem and solved in Chrome by just disabling Cache:
- Click F12;
- Go at Network tab;
- Click on "Disable Cache".
A little late to the party, but if you put this in your html, it will keep your website from updating the cache. It takes the website a little longer to load, but for debugging purposes i like it. Taken from this answer: How to programmatically empty browser cache?
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Rename your js file to something else temporarily. This is the only thing that worked for me.
The best way around browsercaches is to append a random number to the path of the js file.
Example in pseudo code:
// generate a random number
int i = Random.Next();
echo "<script src='a.js?'" + i + "></script>";
This will make sure your browser always reloads the file, because it thinks it's a different file because of the random number in the url.
The server will always return the file and ignore what comes after the '?'.
In both Firefox and Chrome, that is really annoying, but because of their default settings which can be changed the following way and then they work. I tried in Chrome and Firefox both with same order of steps.
Press F12 (Open Inspector)
Click Network, and then click Disable Cache
Now click Clear icon. In Firefox, it shows as a trash bin icon on left corner, in Chrome it is the second left icon, in between 'stop recording' and 'Filter'.
Now press F5 or refresh the page
They do update the resources with their fresh copy as they re-download them.
In Asp.netcore we can use asp-append-version taghelper
<script src="~/js/site.js" asp-append-version="true"></script>
Are you 100% sure your browser is even loading the script? Go to your page in Firefox and use the console in Firebug to check if the script has been loaded or not.
I have the same problem for awhile, and manage to figure out... And my case was because I have 2 javascript with the same function name.
1.Clear browser cache in browser developer tools
2.Under Network tab – select Disable cache option
3.Restarted browser
4.Force reload Js file command+shift+R in mac
Make sure the fresh war is deployed properly on the Server side
I was going insane trying to get my js files to refresh and I tried everything. Then I did a header check and remembered I was using Cloudflare!
In Cloudflare you can use dev mode to disable proxy.
Don't forget to check any errors in webpack compilation. Sometimes the application.js in app/javascript/packs/ doesn't reload due to webpack compilation error.
When I run into this issue I try this sequence of steps:
Hard refresh the page.
Clear cache + cookies.
Add a static version to my script.
src="my-script-name.js?v=1"
If the above does not help, add a dynamic version to my script:
src="my-script-name.js?v=" + Date.now() + Math.random()