Dev Tools
Most browsers come with some tools to help web developers create and change web pages. One of the most useful of these tools is the built-in developer tools that come with the Chrome browser.
You can access the developer tools on any web page with the Command + Option + I keyboard shortcut (on Mac) and F12 or Control + Shift + I (on Linux and Windows).
On opening the developer tools, you should see something similar to the following figure:
Figure 1.33: Chrome developer tools (Elements tab)
There are a lot of options available in the developer tools. We will not cover all of them here but will focus on the top bar and the Elements tab in this chapter.
The Top Bar
The top bar gives you access to several options and tools, including access to all the other sections of the developer tools via the tabs:
Figure 1.34: Chrome DevTools top bar
The top bar has the following tools and options:
- Select tool – You can use this tool to select an element from within the web page.
Devices toolbar – Changes the view so you can select the view size of various devices.- Tabs – We can access various tools from the top bar menu such as Console, Elements, Sources, Network, and Performance. We will focus on the Elements tab.
Configuration – Gives you access to various settings for the developer tools.
Close – Closes the developer tools.
While developing the HTML and CSS for a web page, one of the tabs we use the most is the Elements tab.
The Elements Tab
The Elements tab has two areas – the left-hand panel shows the current HTML DOM and the right-hand panel shows details about the selected element.
You can use the left-hand panel to select an element from the HTML DOM and you can also edit an element to change its attributes:
Figure 1.35: Selectable HTML DOM in the left-hand panel of the Elements tab
Once you have an element selected, you can see a lot of information about the element in the right-hand panel. This information is divided into tabs and the first tab shows the styles:
Figure 1.36: The Styles tab of the right-hand panel of the Elements tab
Essentially, the Styles tab shows a representation of the CSSOM. You can look at the styles associated with the element, including the cascade of styles, showing you where a style is inherited from and where it has been set but overridden. The topmost element is the most specific. You can also use this tab to edit the styles of an element and to check different states, such as the hover state.
The Computed tab shows styles as they have been computed for the element.
There are also tabs to show you the event listeners and properties associated with an element.
Having had a glimpse at the power of Chrome's developer tools, let's finally consider how the browser works with HTML and CSS technologies to render a web page.