//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.
Related
I have problem with unknown javascript script which scrolldown when enter page (I think it's javascript). I trying to find over firebug, code, delete scripts, I even deleted all styles,scripts, and had a clean code.
When enter this page only in chrome browser its scroll down to comments div, I have no idea why only chrome, firefox it's not do this, I have tested 2 computers them both the same on chrome.
This is the link of the page:
http://test.ibids.co.il/add/120
Which script do it or what cause to do this?
EDIT 1 (27/01) : I don't think it's js as I have removed all JS from code.
EDIT 1 (27/01) : It wad addthis script problem.
Before you do anything else: check your imported scripts! You are importing jQuery three times! This might create unwanted side effects.
http://test.ibids.co.il/assets/js/new_js/jquery-1.9.1.js
http://test.ibids.co.il/assets/header-js/jquery-1.11.1.js
http://test.ibids.co.il/assets/notification/js/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js
There might be more scripts / css that are not needed. Check your assets.
I cant comment so I will post answer. I have disabled all JS on site and still on reload page site was goes scroll down and then goes up so maybe it is not so JS related?
I think you have code related to navigate or nicescrollers in your script .First try to remove if you have any code related to navigateble :true ,and If you work on nicescrollers try to resize them or comment to check it once
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.
I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?
I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?
I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.
You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.
It has some limitations:
has to be a JS file. can't be embeded tags in a html page.
it cannot be prettified.
I don't know if you need this to save permanently, but if you need to just temporarily modify the js:
I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works. Will last until you reload the page.
I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.
I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.
My solution:
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?
Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.
I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...
None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.
Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.
Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source
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()