Browsing Storage & Memory Usage

[00:00:00]
>> Jon Kuperman: So application, this is basically like we have in the web, all sorts of ways that we can store data. We've got our cookies, our session storage, local storage, index dB. We've got all these great things. There's a bunch of cool classes in Frontend Masters for working with these various technologies.

[00:00:14]
But the important thing to know is that if you're storing stuff within the browser, this is where you can come to inspect it. To edit it, and probably most importantly, to clear all site data. How many people use this application tab just to clear all site data? All right, yes, so, yeah, if you ever get into an area where your login is not working, or something is behaving strangely or cast.

[00:00:35]
You can come to the application and you can clear all your site data and that'll kinda give you a fresh state. On top of that, this site doesn't do much, but if you go to any of your real sites that use local storage or session storage, you can browse tables of key value pairs and kind of see what's stored on there, things like that.

[00:00:51]
Also if you do service worker stuff, this is where you can do your mode like simulate offline. You can see what service workers are registered. You can deregister service workers, all sorts of things like that. And if you have a progressive web app that ships as a mobile app.

[00:01:05]
You can inspect the manifest for it here, and you can see what its icon will be and what its color scheme will be, things like that. So yeah, this one's mostly just kind of like read, write, tables. Perhaps the most useful is just clearing the cache, yes?
>> Speaker 2: On the networks tab, there's a disable cache checkbox, does that affect what shows up on this tab?

[00:01:24]
>> Jon Kuperman: No, that's a great question. Yeah, so on the network tab, we have this disable cache and all this will do is if it was going to read from the browser's local cache for like a CSS file or something, it'll skip that and refetch it again. However, anything that is stored, your application manifest, service worker, stuff like that.

[00:01:42]
Those caches are going to persist on the application. So this, no matter what you have clicked over here in the network, you'll still see 100% of things in the application side. Memory, not much to say now, we will end the day with it. But just know that at any point you can capture a heap snapshot, and by clicking that button and that button will show you sort of everything that is stored in memory for your application.

[00:02:04]
This page is just HTML, so quite a bit of it is surrounded in these parentheses, meaning it's just some kind of internal system thing. But as we get into it, we can see, if we make a big array, we can view the array in here. There's a lot of cool, advanced stuff you can do with memory.

[00:02:16]
So if you're working on any kind of Web Assembly stuff, which I know there are some great courses here for. You can see the actual memory used by your C++ code or your Rust code. Similarly, if you're working with any of the typed array stuff, which is not in the purview of this course.

[00:02:31]
You can see the specific memory instructions for those as well, which is really nice.