Most desktop browsers include an element inspector feature that you can use to troubleshoot your CSS. Start using this feature by right-clicking anywhere in the browser viewport and selecting Inspect or Inspect Element from the menu. Mac user? Press the Ctrl key while clicking the element you’d like to inspect. The image below indicates what you can expect to see in Chrome.
You can also press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (macOS) to open the developer tools panel. Or use the the application’s menu:
- Google Chrome and Microsoft Edge: Tools > Developer Tools (More tools and Developer tools on Linux)
- Firefox: Tools > Web Developer
- Safari: Develop > Show Web Inspector
In Safari, you may have to enable the Develop menu first by going to Safari > Preferences > Advanced and checking the box next to Show Develop menu in menu bar.
After opening the developer tools interface, you may need to select the correct panel. In Firefox, this panel is named Inspector. In Chrome, Edge, and Safari, it’s the Elements panel. You’ll know you’re in the right place when you see HTML on one side of the panel and CSS rules on the other.
1. Using the Styles Panel
Sometimes an element isn’t styled as expected. Maybe a typographical change failed to take, or there’s less padding around a paragraph than you wanted. You can determine which rules are affecting an element by using the Styles panel of the Web Inspector.
Browsers are fairly consistent in how they organize the Styles panel. Declarations set using the style attribute are listed first, whether they were added to the HTML, or programmatically using JavaScript.
Inline styles are followed by a list of style rules applied via author stylesheets—those written by you or your colleagues. Styles in this list are grouped by media query and/or filename.
Authored style rules precede user agent styles. User agent styles are the browser’s default styles. They also have an impact on your site’s look and feel. In Firefox, you may have to select the Show Browser Styles option in order to view user agent styles. You can find this setting in the Settings panel. Press the fi key when the Developer Tools panel is open.
Properties and values are grouped by selector. The checkbox next to each property lets you enable and disable specific declarations. Click on a property or value to change it.
2. Identifying Cascade and Inheritance Problems
As you inspect styles, you may notice that some properties appear crossed out. These properties have been overridden either by a cascading rule, a conflicting rule, or a more specific selector, as depicted below.
In the image above, the background , border , and font-size declarations of the [type=button] block are displayed with a line through them. These declarations were overridden by those in the .close block, which comes after the [type=button] block in our CSS file.
3. Spotting Invalid or Unsupported Properties and Values
You can also use the element inspector to spot invalid or unsupported properties or property values. In Chromium-based browsers, including Edge, invalid or unsupported CSS declarations both have a line through them and an adjacent warning icon, which can be seen below.
Firefox also strikes through unsupported properties and values, but places the warning icon to the right of the declaration.
In the screenshot below, Safari strikes through unsupported rules with a red line, and highlights them with a yellow background and warning icon.
When it comes to basic debugging and identifying inheritance conflicts, it doesn’t matter which browser you choose. Familiarize yourself with all of them, however, for those rare occasions when you need to diagnose a browser-specific issue.
4. Debugging Flexbox and Grid Layouts
As you work with Grid and Flexbox, you may wonder why your layout is a little off, or why a particular property isn’t working the way you’d expect. Chrome, Edge and Firefox all include Grid and Flexbox inspectors with their developer tools to help you diagnose issues with both modules.
Launching the Grid or Flexbox inspector works similarly in Chrome, Edge, and Firefox. First, open the browser’s developer tools and locate the Elements (Chrome/Edge) or Inspector panel (Firefox). Next, locate the grid or flex container in the document tree. You’ll see a small label next to the element—grid if the element is a grid container, and flex if it’s a flex container. Click that label to display the Grid or Flexbox overlay. The following image shows what the Grid overlay looks like in Edge 92.
For Grid containers, the overlay shows the number for each grid line (the dividing lines of a grid) and highlights each grid gap (the space between each item in a grid). One feature of Grid is the ability to indicate how many columns or rows an element should span by indicating a starting and an ending grid line number. Using the inspector lets you see how grid lines are numbered.
For Flex containers, the overlay highlights the size of the gap property, and any space created by the use of justify-content , aLign-content , or aLign-items . The following image shows the Firefox Flexbox overlay.
The Flexbox overlays for Chrome and Edge work similarly. Chrome and Edge versions 92 and above also include a feature for tinkering with the align-* and justify-* properties of Grid and Flexbox. The image below shows the Flex inspector in Edge 92.
Firefox, on the other hand, includes a feature that can help you understand why a flex item may be larger or smaller than you expected. The Firefox flex inspector indicates when a flex item is set to grow or shrink.
We’ll revisit Grid and Flexbox debugging tools in Chapter 5, “Layouts”.
5. Debugging Responsive Layouts
On-device testing is ideal. During development, however, it’s helpful to simulate mobile device viewports and touch features. All major desktop browsers include a mode for responsive debugging.
Firefox
Firefox calls its responsive debugging feature Responsive Design Mode. Look for the phone and tablet icon. You’ll find it on the right side of the developer tools panel.
While in Responsive Design Mode, you can test a range of viewport dimensions. You can also simulate the viewport and pixel density of several Android and iOS devices by selecting an option from the device menu.
You can also switch the viewport’s orientation, adjust its dimensions, or change its pixel density ratio from this menu.
Touch events are disabled when you first enter Responsive Design Mode. You can enable them by clicking the touch icon, or by selecting a specific device from the device menu.
You can also use the Firefox Responsive Design Mode to simulate slow connections. Responsive Design Mode includes the ability to mimic GPRS and LTE mobile speeds as well as Wi-Fi connections with its throttling feature.
Chrome and Microsoft Edge Chromium
In Chrome and Edge versions 79 and above, responsive mode is named Device Mode. To use it, click the device icon (pictured below) in the upper-left corner, next to the Select an element icon.
Like Firefox, Chrome’s and Edge’s Device Mode lets you mimic several kinds of Android and iOS devices, including older devices such as the Galaxy S5 and iPhone 8. In both browsers, DOM touch events are available to your code when using Device Mode.
In Chrome, the Device Mode’s basic throttling feature (shown below) approximates performance on low-tier and mid-tier devices. You can also use it to simulate being offline.
To mimic network speeds, use the throttling menu found in the developer tools Network panel.
Safari
Safari’s Responsive Design Mode is best for testing layouts in iOS device viewports. To enter Responsive Design Mode, select Develop > Enter Responsive Design Mode, or Cmd + Ctrl +R.
Unfortunately, Safari’s developer tools are limited by comparison. You can’t, for example, mimic slow network speeds. Nor can you simulate touch events. To test touch events, you’ll need to use a physical iOS device, or a remote device testing service.
Responsive Design-focused Browsers
Blisk and Polypane are two newer, commercial services that have responsive design and device emulation at their core. Both use Chromium under the hood, so you can’t rely on them for debugging issues with non-Chromium browsers. They are, however, perfect for testing and debugging responsive layouts.
Both browsers let you view your layout at multiple viewports in the same window at the same time, so that you don’t have to spend time resizing browser windows.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.