Resources let you view pretty much everything that goes into your web page experiences! Load up Resources on a web page you like (again, we could use the test page, but that'd be pretty basic).
It contains several sections, visible in the left bar:
Frames: files uploaded to the page, including HTML, JS, CSS, images, and more
Web SQL: access to the HTML5 Database functionality (you can even run queries here)
IndexedDB: The data loaded by the HTML5 database
Local Storage: allows you to view/edit/delete data storage
Session Storage: allows you to view/edit/delete data from session storage
Cookies: View and deletes the cookie associated with a domain
Application cache: displays information cached by the application
Frames
Check out all the resources that go into the page, even down to the font level!
Databases
If you have access to the database on a particular web page -- meaning it's an HTML5 database -- you'll be able to view its contents here and run queries against them.
You won't be able to do this on most websites that you visit because you don't have access to the database. However, if we use Google's sticky note example, we can add notes therein and see them in the Resources tab.
Test it out yourself! It only takes a minute.
Storage
The difference between local storage and session storage is the lifetime of the information: the storage session is specific to the current session and will be erased when the window is closed. The local storage has no defined lifetime and will stick around even after closing the window.
Cookies
Cookies are small bits of data from a website that are stored in your web browser. They track a ton of data, like your browsing history, which buttons you've clicked, stuff you've entered into forms, and more. You can see the cookies at play on a certain page by selecting Cookies from the left menu.
From this page, you can also delete cookies.
