Why disable caching in Chrome to see changes in JS files served from IIS?

I spent some time troubleshooting why after setting “Output cache” settings in IIS to “prevent all caching” my JavaScript files were not being reloaded when the page is refreshed. It turned out that I had to disable caching from within the Chrometools network tab.
My question is why, as this has never been necessary when using development servers in webpack, gulp, live-server etc unless loading identical resources?

Network Waterfall (like in Chrome) in PHP

How would I get a network waterfall for a specific URL (like the one found in Chrome Dev Tools) using PHP? I researched this and could find anything. Perhaps it is my poor vocabulary.

Example: https://www.webpagetest.org/result/180201_7T_a4adc5cad9e0dc91e24b842f50fff86d/1/details/#waterfall_view_step1

Huge service-worker Cache

I’m working on my first PWA (Progressive Web App). Everything work well except for the offline stuff. I followed many tutorials to learn how to cache my Web app, but I’m really surprise of the size of my cache. In Chrome dev tools, I can see that after a few refresh of my page: [my huge cache][1][1]: https://i.stack.imgur.com/MbC8c.png

And it keeps growthing !
I suppose there is a problem in the treatment of my “activate” event.
Here my service-worker.js file:

var dataCacheName = 'heiverage-v1';

var cacheName = 'heiverage-1';
var filesToCache = [
  '/',
  'index.php',
  'spe.php',
  'js/app.js',
  'js/jquery.js',
  'sem.php',
  'main.php',
  'js/script.js',
  'js/bootstrap.js',
  'css/style.css',
  'css/bootstrap.css',
  'img/calculator.png',
  'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
  'https://fonts.googleapis.com/css?family=Oxygen',
  'https://fonts.googleapis.com/css?family=Mukta+Mahee:700',
  'css/mainless50.css'
];



self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});



self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  /*
   * Fixes a corner case in which the app wasn't returning the latest data.
   * You can reproduce the corner case by commenting out the line below and
   * then doing the following steps: 1) load app for first time so that the
   * initial New York City data is shown 2) press the refresh button on the
   * app 3) go offline 4) reload the app. You expect to see the newer NYC
   * data, but you actually see the initial data. This happens because the
   * service worker is not yet activated. The code below essentially lets
   * you activate the service worker faster.
   */
  return self.clients.claim();
});


self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

Thank you very much for your help !

Get the source image file from img tag

I have an img tag with src="www.example.com/pic1.jpeg".
The image file has already loaded fully.
Now I want to save the image file.

I can download it by using the link in the src attribute. But I want to save the image without internet.

I opened DevTools and I was able to locate the image file in the Sources Tab -> Network pane.
But still, I cannot able to save it without internet.

I use Chrome Canary Browser and Mac OS.

how to download/copy the audio transcript from flash player(swf)

I have opened a presentation(flash swf) in browser which is located in server.
I am able to see the audio transcript for the presentation by clicking audio transcript button but am unable to copy/download it to save it in my local.

I would like to know how to download/copy the audio transcript. something like from browser cache or using any tool or browser extension.

Any help is appreciated

Service Worker issues

I’m having some issues with the service worker I’ve implemented in the page at this link. I’ve tried to cut the code down as much as possible for this demo, but it’s too long to paste into here.

One problem is that, when the page is fully loaded, and I go to the Application tab of Chrome devtools, and I see rather a lot in the Cache:

enter image description here

It’s not apparent why there is so much cached… it may be the fonts I’m loading but still… seems large.

More worryingly, when I click on the Clear Site Data button in that section (with all options ticked), the red Cache Storage part of the pie chart does drop to zero.

Furthermore, when I hit F5 to reload the page after clearing site data, the service worker fails to install properly again… seems to be stuck on installing:

enter image description here

To get it going again, I have to click on the unregister link in that section, and then F5.

Another issue I’m having with this code is that the values in the Cache Storage (service worker cache) section are not properly populated:

enter image description here

All the Content-Length info is zero, and the Time Cached info is also partially missing.

Thing is, none of these problems is apparent with this service worker example, so it must be something I’m doing wrong.

Why is Firefox caching while Chrome isn’t?

I have a web application for which I’d like browser caching to work. It seems it works fine in Firefox, but not in Chrome. It’s quite possible I’m not reading this correctly but here are the screenshots from FF and Chrome and to me it looks like no caching is performed on Chrome. How can I resolve this?

Here’s Firefox:
enter image description here

And here’s Chrome:
enter image description here

Remove memory cache in chrome devTools

enter image description here

All data uri resources are coming as (from memory cache) under Size column in devtools. Even after i cleared browsing data of chrome and checked ‘disable cache‘ , and run in private window also, its still coming as memory cache .

How to clear this memory cache and load fresh as first time.

Why do some cached responses in Chrome appear as not-cached in devtools?

In Chrome, I have a page that loads an IFRAME from /test on the same origin, and the server waits 500ms before returning the response to that request. By looking at devtools I can see that the response is being returned in less than 500ms:

fast and small - cached?

I can also inspect my network traffic and verify that no network request is leaving the browser. Why isn’t this request shown like this:

definitively from cache

Is there only a certain subset of cached resources that show up as “from disk cache” or “from memory cache” in devtools?

(Chrome 62)

Weird caching behavior “Provisional headers are shown” in Chrome?

Can anyway explain the results in Chrome of the tests below? It doesn’t look logical to me.

TEST.HTML




    
    Test


    Test caching behavior ...


I’m aware of the fact that extensions in Chrome can have influence on: “Provisional headers are shown”. So for this test first i’ve disabled all my extensions in Chrome.

Now i did the following:

  • Step 1:
    Type in addressbar and press enter: http://www.example.com/test.html (to be sure i pressed also CONTROL F5)
    The result is:
    Status Code: 200 OK
    Size: 510 B
  • Step 2:
    Now i pressed: CONTROL N (opening new window).
    Before i’m typing something in the addressbar i went to “Developer Tools” > “Network” tab
    Now i typed in addressbar and pressed enter: http://www.example.com/test.html
    Now the result is:
    Status Code: 200 OK
    Size: 183 B

So the size is less, so i thought maybe there is some caching going on. But the status code is “200 OK” and not:

“200 OK (from disk cache)”
or
“200 OK (from memory cache)”

Now i wanted to test if Chrome made a request in step 2, so i changed the file:

“Test caching behavior …”
i chacnged to:
“Test caching behavior … (2)”

Now i repeated “step 2”. The browser was not showing “(2)”, so that means Chrome is taking the file from cache.
In the developer Tool i saw also:

Request Headers: Provisional headers are shown

So Chrome is taking the file from cache, but is showing “200 OK” (green) without any caching signs like “(from disk cache)” or “(from memory cache)”.
This doesn’t seem logical to me. Why Chrome is doing that?