FREELessons: 15Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Resources

The Resources Panel is pretty standalone and covers the various forms of persistent storage your page uses.

Related Links

5.1 Resources

In this lesson, we'll take a look at the Resources panel, and this will be a fairly quick lesson since the Resources panel is quite simple. And on top of that, we're already familiar with this tree view, since we saw it on the Sources panel. The Sources panel tends to filter its resources depending on their type, so it might show HTML, CSS, and JavaScript, for example. But when it comes to resources, it will just show you all the resources a page has loaded. And as you might expect you get some text highlighting for CSS, for images, you'll get previews of them. You get some stats of the image. So the dimensions, the files sizes, the MIME type. And don't forget this is also information you can retrieve from the network panel. And by the way some of these resources have context menus, so you can right-click, open it in a new tab, maybe you wanna save it, or you can copy the link address to send to someone. If you're on a page with multiple IFrames, these will show up as individual frames. Now on top of resources that the page has loaded, the resources panel will show you persistent storage. So in this case, we can see cookies. And there are the famous Google Analytics cookies. And don't forget, we can also delete these. And should we so wish, we can clear the entire thing. We also get an overview of local storage. Now this page doesn't store any items in local storage, so I'm gonna bring up the console. I just hit Escape to bring that up. And I'm gonna set an item. I'll set a key of a with a value of b, and as you can see that appears immediately. So if I get that item, I get the value of b, cuz that's associated with a key of a. And I can also edit that right here in the DevTools. So I change that to c, try and get that item, and as you can see we get c back. If I clear this, now get item returns null. So as you can see we have four [UNKNOWN] capabilities. So in addition to local storage, session storage, cookies, we also have application cache, which is pretty cool. A lot of websites will use the application cache to store files so that when you're offline you can retrieve those files and still have a decent web experience. So I found this website, who's job it is to actually demo the application cache, and as you can see we've got a bunch of items in our cache. We can filter by size and we're also shown at the bottom whether we're online or offline. So this is quite useful for application cache debugging. And don't forget, typically in the console panel when you refresh the page you'll get a few application cache events. This isn't the page that's logging it. This is actually normal behavior when using the application cache. That's it for now. Just to recap, we can see all the resources our page is using just like we would in the sources panel. But instead of being limited to just, you know, CSS, JavaScript, and HTML, we can also see images and get a preview of them with some details underneath. Each resource has a context menu. And we have access to modern forms of persistent storage, like the local storage, the session storage, cookies, application cache and even Web SQL and IndexedDB. Thanks for watching, I'll catch you later.

Back to the top