With this video I am going to explore the
elements and resources panel of the Google Chrome developer tools.
The Elements panel shows everything in one DOM tree and allows inspection and on-the-fly
editing. Here are some examples of what you can do
from the elements panel: Enabling the new inspect mode lets you hover
around the page to find a node to inspect. Clicking on the node in the page will focus
it in the Elements panel and turn off the inspect mode.
Hovering over an editable style rule will show checkboxes that let you disable individual
properties. Double click to edit a style property.
Deleting all the text will delete the property. Typing or pasting in multiple properties will
add the new properties. Double click to edit a DOM element attribute.
Typing or pasting in multiple attributes will add the new attributes.
Deleting all the text will delete the attribute. Double click to edit a DOM property in the
Properties panel. Deleting all the text will delete the property,
if allowed. The metrics panel includes position info for
absolute, relative and fixed position elements. Double click to edit any of these metrics.
The Resources panel shows a timeline waterfall of the network activities.
Click Size in the sidebar to quickly see the largest resources downloaded.
There are many sorting methods available for the Time graph, including latency and duration.
The Time graph shows latency in the bar with a lighter shade. This is the time between
making the request and the server’s first response.
Clicking a resource in the sidebar will show you the data pulled from the network, including
the request and response headers. The time and size graphs also show XMLHttpRequests.
Selecting an XHR resource in the sidebar will show the XHR data and headers.
To learn more about Google Chrome’s developer tools visit www.chromium.org/devtools