Elements
You can rearrange HTML elements by simply clicking and dragging the element.
Resources
The Resources panel displays all of the files and assets that are loaded into the page.
HTML/CSS Files
If you click on an HTML or CSS file, the Resources panel will display the contents of the HTML or CSS file.
Local Storage
From the Resources panel, you can benefit of interacting with Local Storage by creating, reading, updating, or deleteing any key/value pairs in Local Storage.
Network
The Network panel primarily displays when assets loaded in, the order in which they loaded, and how long they took to load.
Loading Time
In the footer you’ll find general information about loading the web page.
Request Time
In the Timeline area of the Network panel, the transparent area of each bar represents the request time.
Right-click on the header of one of the columns to get more viewing options
Disable Cache
Checking the Disable Cache option is a great way to figure out exactly what’s loading into your page and it can give you some hints about which assets might be slowing things down.
Timeline
The Timeline panel can help profile the performance of a web page over time.
Frame Rate
The optimal frame rate for a webpage is 60fps or above.
The frame rate for a webpage might decrease if there are too many complex CSS effects like shadows and gradients, because shadows and gradients can increase rendering and painting time.
Profiles
The Profiles panel helps to measure CPU and memory performance.
Heap Snapshot
The purpose of taking a heap snapshot is to show memory distribution of JavaScript on a web page.
Capture CPU Utilization
CPU monitoring starts recording when the Start button is clicked and a new profile is created.
Stopping the recording will reveal which functions were run.
Finding areas that need optimization
The Profiles panel shows the CPU utilization of JavaScript functions as a percentage, and functions with a high percentage should be optimized as much as possible.
Audits
The Audits panel can check over the code of the webpage and suggest areas to optimize.
An example of an improvement that the Audits panel can suggest is removing unused CSS rules.
What’s the benefit of adding an explicit width and height to an image?
It can potentially speed up the page display.