I am playing around with a JavaScript code in Firebug and I would like changes to take effect in that page. Especially when there is code inside jQuery's $.ready() function.
Some kind of refreshing the page without losing of what has been edited. Is there any way to do that?
Page changes made via Firebug or via Javascript do not persist from one page load to another. Each time a page is loaded, the original HTML, CSS and JavaScript is parsed and loaded (from cache or from the server). Any prior changes will not be there.
The only way for a dynamic page change to be still present after a refresh is for you to save the changed state to a persistent location and then rebuilt the appropriate page content from that state each time the page is loaded.
But, if you make a change to the page and store some state in a cookie, in local storage or on your server, then you can have JavaScript that runs each time the page loads that gets that state from wherever you stored it and then applies the appropriate change to the page. If you're saving the state on the server (on behalf of this particular user), then you could even have the serve modify the page contents before it is served to the browser.
You can type JavaScript code in the Firebug command line and see changes take effect on the page. You can do the same in the Firefox, Chrome, Opera and Safari DevTools.
Changes to pages done via Firebug do not persist. After a page reload the original sources will be loaded again (from the server or the browser cache).
Currently Firebug doesn't allow you to edit the code of the loaded scripts directly.
Though you can execute JavaScript code within the context of the page by using the Command Line:
Or for longer scripts you can use the Command Editor:
But again, code you executed there will be gone as soon as the page is reloaded.
To make permanent changes to the JavaScript code of a page you need to have access to the server and make them there.
Related
I have a question about loading javascript source and initialize function on a page depends on the user`s cookie preference. I have an API that I can check the user's cookie preference with javascript.
My first idea was to hide(with js) the app (which will be loaded on the page via 3rd party script source and initialize function) and show a message to the user that the user can't see the app/content because of his/her cookie setting. But on the legal side, it is allowed because even the user doesn't see the app/content it is going to be loaded on the browser.
My second idea was creating a script tag dynamically and adding in head and run the initialize function,
but in this case, if initialize works faster than script tag creating function, I get an error. And even if it works sometimes user has to reload page couple of times to load the app.
Is there any better practice/idea that you can advise me on?
The application I'm working on right now contains lots of ng-include directive and I hate to reload the whole application just to see an HTML update.
I've tried Replaying the XHR manually using the Network and it gets back the updated HTML View but definitely, it doesn't get reflected in the DOM.
What I am searching for is a way that all the HTML views get fetched again without me hitting the reload button.
It can be a browser extension or a code snippet (which I'll turn into a browser extension to be used for others) or any other sane way.
Check disable cache checkbox on network page and then try replay XHR. I can't see why you don't want to reload the whole page but whatever.
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 am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?
About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.
After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.
I am working with a page that contains two frames. Each frame calls a page that then calls the same javascript file in a script tag. It appears that sometimes the browser will have cached the js file by the time the other frame makes its call, thus grabbing it from the cache. But, it appears that sometimes it downloads 2 copies, one for each frame. I'm trying to figure out if it would be worth calling the script once from the parent page and have each frame's page access it that way. So is it just a matter of how fast the browser happens to download the js file, if the other frame will grab it from the cache? What's the normal protocol for the major browsers on this?
Thanks for the help!
You can have the script look to see if it has any child iframes on the page, if it does, dynamically add a script block to the child document (with the same SRC). This way the main one will ALWAYS load first and the children will always use the cache.
I wouldn't worry too much about it. If by the time the second frame needs the file it's in the cache, then it'll use the cache, if not, it'll load it too. Each browser, and each version of each browser, handles caching of files differently, so just forget about it, code each frame as a page of its own with its own includes and let the browser worry about caching them.