Web Inspector
Modern browsers come with an Inspect Element window that allows users to modify and inspect a page. Users are able to edit a page and inject temporary styling for experimental purposes. Changes you make to a page while in Inspect Element are not permanent and will disappear after you reload the page.
In the examples below, we use Chrome's Inspect feature. The same concepts apply almost identically to other modern browsers, such as Safari and Firefox.
Opening the Web Inspector
- Right click on the part of the page you'd like to inspect.
- Select "Inspect".
Inspecting an Element
Using the inspector window, hover over the element of code you're investigating. It should be easy to identify which page element you're looking for because each line of code will also highlight the corresponding page element (seen in the image, left).
Editing an Element
After identifying the page element you're searching for, the Inspect Element window allows you to edit the page. In the video to the left, we are adding a new color to the heading.
This same concept applies for removing styling from an element. As seen in the video to the left, un-click the check box next to any styling to hide it temporarily.
Testing Device Displays
The Inspect Element window allows you to test what your website looks like on multiple devices. This is a highly useful feature to identify bugs with mobile displays.
We recommend using a phone and tablet to test your website, but this is a convenient way to conduct an early test.
Recording Load Performance
The performance tab allows you to record and analyze your website's speed in loading pages, images and scripts. In the video to the left, we are recording the page's load time using the refresh icon at the top. This reloads the page and begins a recording.
To initiate a recording without reloading the page, click the record icon next to the refresh icon.