webpack : live reload force chrome reload even on breakpoints - javascript

My environement is Ionic, but the scope of this question relates more about webpack and the live reload functionality.
When using ionic serve
the livereload works as expected, my application refreshes in the browser everytime a source file changes.
Something that makes me waste time though, is everytime Chrome is stuck on a breakpoint (which happens very often as i use them a lot), the live reload won't work, so i must do the reload manually, or skip the breakpoints.
I understand it must be due to the fact that the script responsible for the reload is executed in the browser, so is locked by the breakpoint, and therefore unable to do its job.
So my question is : is there a different solution to make it so that a change in my file would force a reload of Chrome, no matter if it's stuck on a breakpoint or not. I guess the reload would have to come from a script that is executed in the console and not in the browser.
Thank in advance.

Related

Hitting back on browser to return to a react page does not cause any code on the page to run - why?

So we have a portion of our website as a React.js website. The rest is a Legacy site. After taking the user thru a few steps on a wizard, we transfer the user to our Legacy Page. In test its found that when the back browser button is pressed in the Legacy page, then we return to the previous React page, but none of the code in the React page runs. I've proven this by putting alerts and the code is simply not being run. What's happening is that the page is getting displayed with all the previous rendered output, but without any of the code running. So not sure how/where its getting cached.
I've checked the Cache-Control headers on the React page, and its set to Cache-Control: max-age=0, so the Browser should not be caching the page.
Even if there was any code in our legacy app using history.back() then i've tested that history.back() still makes the code to run on the page being moved back to.
So a bit of a mystery as to where its getting cached. Any thoughts as to what may be the issue?
As mentioned you are using React.js for your project, I think the best solution for your problem is to use React Router. This will render your components according to your current route. In case you are using the case route for the legacy page then, you will have to think for some other alternatives
On December 6th, 2021, Chrome 96 was released, it has a feature called bfcache, or rather back / forward cache and this is different to the Http cache. This caches the entire page in memory,including the Javascript heap, so its like a pause on the page. This is a browser optimisation and is the reason when you go back to the page using the back button on the browser, no code runs as it simply loads it back into memory including all the react state.
more info on bfcache

DevTools persistence not taking effect even with mapped file

I'm trying to write some javascript in a mapped file trough Workspaces in Chrome 64.
I had a hard time making Chrome use the local file instead but after a manual map it's already there. But even with the mapped file, I edited the file, hit refresh and the console keeps saying error in line N and when I click it, it takes me to the persisted version of the files and the line (and the whole function) where the error is now gone but the error is still there.
It's like Chrome is still running the old version. I usually have a similar issue in which I have to close the tab and re-open it since "the Disable cache (while DevTools is open)" or clicking Shift + CMD + R doesn't load the new version. And old version is persisting cache and Workspaces but I can't figure where is this old version sticking.
I looked into the Application tab but there isn't any Service Worker or any other place where the old file would seem to be kept in until the tab is closed.
This is an angular app running over SalesForce but I'm loading just an iframe in the browser so most of the rest of the app complexity if left out. This is just one single view of the app that works fine running like a single iframe, so I don't think it has anything to do SF, maybe Angular.

Refreshing page after making changes doesn't render in web browser

I'm learning angular and have cloned the repository here. I've installed the dependcies through npm and have the web server running. I can load the page up at localhost:4000.
If I make a change to the index.html (a simple text change), I can see the results when refreshing my browser. But, if I make a change to an html page that's loaded as an angular directive, the changes don't appear in my browser (Chrome, FIrefox). I tried F5, Ctrl+F5, Shift+F5, etc. Even restarting the web server doesn't do anything.
Is there something I need to set up in the angular code so that refreshes work properly?
https://github.com/codeschool/WatchUsBuild-ReadingListAppWithAngularJS
Note, this is Angular 1x proj.
Should I blame caching
It's cached in your browser. Simply have your dev tools open and under networking tab mark disable cache.
Note:- this will work only if dev tools are open not otherwise.
I can recommend live-server which detect the changes and update make an reload in browser.
One more thing Angular it self use template cache by default so that can also cause the problem and in that case you need to rebuild your app on changes.
read about template cache
Yes that happens with angular because the browsers usually cache the webpages and when you make changes in html and then refresh, the browser loads the cached pages instead. It doesn't happen every time but most of the time. So try clearing the cache of the browser and then load the page. It should work correctly.
Angular 2 and ember has some mechanism called watches that look for changes you make in the files, and whenever it detects a change, it re compiles all files and load a fresh copy for you. But in Angular 1 I don't think there is such a mechanism and I faced this problem my self a lot. And this is the solution I have come across so far. Hope someone else has a better solution.

Create shortcut, that opens a website and reload it after x ms

We've just upgraded group policies at work because of a big migration project. Nevermind... The thing is, some of our users use this java application, which reads the smart card reader. On new machines it doesn't work in IE, it has to run in firefox. The trouble is, that the first time firefox opens it, it says there's no java. As soon as you reload it, it's fine.
As users are users, they hate the thought of having to reload the page, and it's not very elegant either. As the process of upgrading anything in the company is difficult, and I'm only an entry level desktop support guy, it won't get fixed any time soon.
So I was thinking... is there any way to create a shortcut, that would open the page and then reload it once it finishes loading the first time?
It can be a shortcut to a local html file which then redirects it to the final location...
You can use a vbs:
set WScriptShell = CreateObject("WScript.Shell")
WScriptShell.Run("http://www.facebook.com/")
WScript.Sleep(2000)
WScriptShell.SendKeys "{F5}"
This one opens a page in the browser, waits 2000 ms (probably enough for the page to load) and then sends the "F5" key to the currently active window. This may not be a perfect solution, but you can extend it to match your needs.
Have you tried $( document ).ready() and insert the code in this function? This basically waits your whole page to load and after that executes the code in the function.

How to apply JavaScript changes in Firebug?

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.

Categories