Google Chrome Developer Tools: Resources Panel

Ryan Boudreaux surveys the Resources Panel of Google Chrome Developer Tools and shows you what you can learn from it.

In a previous post, I reviewed the Google Chrome Developer Tools Elements Panel. In today's post, I will review the Resources Panel, which includes viewing under the hood to view Frame Resources, HTML5 Databases, and Cookies associated with the active browser page session. For this demonstration I am going to open the HTML5 Demo: Web Database page and then right-click anywhere on the page and select Inspect Element. By default the console panel will open to the Elements Panel; click on the Resources tab to open the Resources Panel, as displayed in Figure A below.

Figure A

Click images to enlarge.

Once inside the Resource Panel, we can view the HTML, which by default, opens to the web page file contained within the Frames resources. In this case, we see database and then the database page file. Also under Frames are all the other resources such as folders for Images, Scripts, and Stylesheets. Clicking on the Images drilldown displays a listing of all images associated with the page, and clicking on the "forkme_left..." image results in the right panel display including the full name of the image file, the dimensions, the file size, the MIME type, and the full URL for the image file.

Figure B

Continuing on the left-side panel we find the Scripts drilldown display and can view four .js files; when the "tweets.js" file is highlighted we can view the contents of the file within the right-side pane.

Figure C

Next we see the Stylesheets, and one file is found -- the "html5demos.css", as displayed in Figure D. If you double-click the file name, Chrome will open a separate window and display the file in text view or source mode as displayed in Figure E .

Figure D

Figure E

Next, under the Resources Panel, we can view the HTML5 Databases, and in this case we can see that the html5demos page has a data source to the "tweets" database .

Figure F

At the chevron prompt, you can type in select * from tweets. The input in the database console has auto-completion and tab-completion for common SQL words and phrases along with table names for the database. Notice as you type in the phrase that it will auto-complete before you finish.

Figure G

Upon hitting enter (return) the resulting query displays the database in table format with the column id, text, created_at, screen_name, and mention entries using the Web Database API to store the tweets.

Figure H

The final resources we will look at are the cookies associated with the domain and web page. By clicking on the Cookies, and then the "" we can view all the associated cookies, their name, value, domain, when they expire, and the size of the cookie. You can also delete them from this listing by highlighting first, and then with a right-click, select Delete. The cookies for this page demonstration are displayed below.

Figure I

Future segments on Google Chrome Developer Tools will demonstrate using the Network Panel, the Scripts Panel, the Timeline Panel, and the Console Panel.