Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools
"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types
How it works:
You specify a directory where DevTools should save changes. When you
make changes in DevTools, DevTools saves a copy of the modified file
to your directory.
When you reload the page, DevTools serves the
local, modified file, rather than the network resource.
To set up Local Overrides:
Open the Sources panel.
Open the Overrides tab.
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes."
UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides
The Resource Override extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
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!
I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler
(pretty sure some of the web devs already know about this tool)
Save the file locally
Edit as required
Profit!
Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)
Yes you can eazily!
Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save.
https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/
Related
everyone!
I'm using UwAmp 3.1.0 for my php development but I had some troubles
with it.
It worked perfectly at the beginning and the server still works
perfectly now but whenever I made a change to a .js file or .php
file it doesn't reflect that change when I update the page in the
browser.
I went to the chrome dev tools and opened the source section to see if the file is exactly what I wanted but it shows the original version which I've amended a while ago. The links to all files are correct and they are in a subdirectory in www folder.
It's so frustrating as I can't see the changes in action. I checked
the syntax and everything is ok but it doesn't want to stop an
animation in jquery after I it was fully shown to the user.
Can you help me with this situation as I have no idea what's causing the problem here?
It should update the file instantly when I click refresh in the
browser but it doesn't and keeps loading the version of the files
that I started to work with.
Uwamp is AMP stack (Apache, MySql and PHP) and "out-of-the-box" it doesn't have anything with caching of files.
Apache is normally reading/getting files from Uwmap www folder "as is" so basically if your last change is saved into file in www folder (please check directly with tools like notepad) Apache will read it instantly.
This is related to your Browser Cache (Empty yours Browser/Chrome cache manually or install Chrome extension like [Clear Cache Extension]:https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) and try to clear cache but completely ("from begining of time" like Chrome said).
Also a workaround is to click that Empty Cache icon every save before refreshing the page beacuse it will clear it almost instantly (depending on how long time ago have you cleared your cache)
Also try to set OPCache in Php.ini (settings file) in Uwmap to Disabled (locate opcache settings in php.ini and put 0 to disable - you can access it from Uwamp GUI also).
is it possible to reload the content of the viewport without reloading the whole inspector.
I would like to make some changes to a javascript file in the debugger then reload the page to see the temp changes I have made (on load), before I commit to the file and upload. Where I'm working at the moment there is caching I can't get round so I have to wait a minute or two to see what my changes do on load.
I have found the page I want to work with under source and can save changes, but really need to see some actions that are fired on the loading of the page.
Is this possible?
Thanks
you can't do that with chrome debugger tool. each JS resource will reload on page load so you will loose your change.
you can proxy tools like Fiddler which will allow you to load script from your local machine while loading a third party website. You can create a copy on your own machine and then use fiddler to intercept the call for that file and send your local copy instead
I know you can live-edit JS from within the Source panel of Chrome Developer Tools, and I know there are systems for live-reloading of CSS, but can you live-reload JS from the source location (either a URL or local disk, or leveraging Workspaces somehow, or possibly even as a Chrome Developer Tools plugin)? In particular this would be insanely useful for CoffeeScript-to-JS setups.
It's surprisingly difficult to find anyone else trying to do this, considering how powerful it would be.
I've come close to achieving automatic live reloading of JS without page refresh; here's what I do:
In the inspector's sources tab, right click and choose "Add Folder to Workspace..."
Select to the local folder containing the .js you want to sync and click [okay].
Right click on the .js file nested inside your newly-added workspace folder and choose "Map to Network Resource", then select the matching .js from the page.
Make changes to the local .js file using an external editor.
Click on the .js file in the inspector, ensuring it has focus; this will trigger a "Recompilation and update" and your changes should be injected to the page.
Step 5 is the part that needs to be automated, somehow.
If you combine this with a file-watcher that automatically bundles your app into a single .js file, you can come close to automatic reload without refreshing the page.
Yes you can do that with grunt.js, or gulp.js. Other things like Codekit can do this, as can an add-on for Chrome called LiveReload.
I am looking for a way to prevent loading a specific JavaScript file on a website for any website of choice, with Firefox.
For example:
Say I don't want to load jQuery (when loading the page, not afterwards 'disabling' it). I then want to be able to set that
http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
should not be loaded. The browser should complete ignore this to debug other JavaScript on the website. I don't have access to the domain directly, so that is why I am trying to do this via the browser.
So for clarity: :) I don't want to disable scripts from a certain domain, but want to be able to disable certain scripts. It can be that 10 scripts are on 1 domain, so killing all 10 of them is not what I want; in that case I want to prevent loading only one.
Is there a way to do so?
Several options:
Use the Addon "Adblock Plus". It will probably still accesses the js but does not execute it.
Use the Addon "Greasemonkey", which - when cofigured right - does not even touch the js-url. But its generally harder to configure right. ;)
Have a look at Firefox's buildin security policies: http://kb.mozillazine.org/Security_Policies Here you can block javascript on an url or even function-level
Go to your hosts file C:\Windows\System32\drivers\etc (Windows) or /etc/hosts (Linux).
Add:
127.0.0.1 ajax.googleapis.com (separated by a tab)
And reopen your browser
This way the jQuery file will fail to load.
How can I disable cache in IE8 ?
We are doing Javascript development and testing it in IE8, but we have to clear the cache every time we make changes to the Javascript files.
Go to Internet Options. On the General tab, under Browsing History click Settings. Select the "Every time I visit the webpage" radio button.
This doesn't "disable" the cache per se, but it should fix your underlying problem - the JS files should be reloaded every time.
Ctrl+F5 Should cause a full page refresh including all that cached javascript.
Occasionally though, you'll still need a cache clear, because even Ctrl+F5 won't work, for reasons beyond comprehension IE can't even get "refresh" right 100% of the time.
If that fails, a random parameter on the query string will do it:
index.html?a=346456
Load you JavaScript this way.
<html>
...
<script type="text/javascript">
document.write('<script src="yourscript.js?'+Math.random()+'"></script>');
</script>
...
</html>
Edit: In case this is not obvious, remove this code as soon you will go into production!
In order to set the browser cache turned off. Follow the instructions below:
MS IE
from a menu select "Tools" for IE5
or "View" for IE4
select "Internet Options"
in "Temporary Internet Files" section click on "Settings"
select "Every visit to the page" for "Check for newer versions of stored pages"
save the settings
I hope this may help please check
hit "Fn F12" to open developer tools
click Cache
choose "Always refresh from server"
Every time you refresh it should be clearing the cache, but there are also quick access cache clearing from the cache menu or the shortcuts that are active when the dev tools are open.
*Note- you must leave the dev tools window open, it doesn't have to be up front, but it has to remain open for the cache to remain disabled.
Ctrl+Shift+Del will open the Clear Private Data dialog (or select it from the Safety menu). Uncheck everything but the first two items to clear only the cache.
You shouldn't have to clear the cache though. If you access your js files through a web server (such as IIS running locally), the normal cache control mechanisms should do the trick. If they don't, a Ctrl+F5 usually fixes the problem.
If your javascript files are served exclusivley from a sub-directory, you could enable immediate content expiration for that directory in IIS. I recently had this problem serving content from a sub-directory and this was the fastest, simplest solution that I found.
Open the IE debugging tools (F12), Cache on the menu, and select always refresh from server. This does mean you need to keep the debugging tools open.
Maybe a easier way not to have user refresh the browser is just to rename the js files (and css). This is what worked for me... as the server didn't like a random number after the .js file