Leverage the Power of Chrome’s Inspect Tool: A Guide for UI/UX Designers

Zeyuan
8 min readMay 22, 2023

--

The Chrome Developer Tools, particularly the “Inspect” feature, are invaluable for UI/UX designers, enabling a deep dive into the HTML, CSS, and JavaScript of any webpage. This native tool often takes precedence over third-party Chrome add-ins, as many working environments disable these add-ins for compliance and security reasons. Therefore, mastery of the built-in Chrome Inspect tool, which is unaffected by these restrictions, is crucial for professionals.

This guide introduces few common features of the Chrome Inspect tool that can significantly enhance a UI/UX designer’s workflow. Stay tuned for future updates on Chrome Inspect tool tips!

A Chrome inspect tool screenshot
The “Inspect” option in Chrome can be activated by right-clicking.

1. Inspect and Modify Elements (most basic)

The Chrome Inspect tool is a powerful feature that allows you to inspect and modify the elements of a webpage in real-time. This is an invaluable tool for testing changes and experimenting with designs.

To access this feature, you can either right-click on any element on a webpage and select ‘Inspect’ from the context menu, or use the shortcut Ctrl+Shift+I (or Command+Option+I on a Mac). This will open the Chrome Inspect tool with the selected element highlighted in the HTML structure. To change selected element, you can navigate to the up-right corner use cursor (highlighted in pink) to select an element in the page to inspect.

For even faster access to inspect a specific element, you can use the shortcut Ctrl+Shift+C (or Command+Shift+C on a Mac). This will activate the inspect tool and turn your cursor into a selector that highlights page elements as you hover over them. Clicking on an element will then bring up its HTML and CSS in the inspect tool.

Chrome inspect tool interface (right side panel)

Within the inspect tool (see the right hand sidebar), you’ll see the HTML on one side and the CSS on the other. You can then modify these elements directly within the tool. Three most used tabs (highlighted in pink) are Styles, Computed, and Layout.

This feature allows you to make rapid, temporary changes to the webpage, making it an invaluable tool for testing out new ideas, debugging layout issues, and understanding how different HTML and CSS changes affect the page. Once you refresh the page, all your changes will be reset. So don’t worry, your customizations will have no impact on the running pages.

2. Device Mode: Simulate and Capture Various Device Screens

Device mode in the Chrome Inspect tool is an incredibly useful feature for UI/UX designers, allowing you to emulate your designs on a variety of screen sizes and devices. This is crucial in the era of responsive design, where websites must adapt to look and function well across many different devices. Here’s how to make the most of this feature:

2.1 Setting and Adjusting Device Size

To access device mode, open the Chrome Inspect tool and click on the ‘Toggle device toolbar’ button in the top right corner (it looks like a phone and tablet, higlighted in pink). This will switch your browser view to a device view.

The button for adjusting device size is situated at the top right corner, highlighted in pink

The toolbar at the top allows you to select from a range of pre-set devices like iPhones, iPads, and Pixels (Dimensions: Responsive dropdown). These pre-sets will automatically adjust the viewport size, pixel ratio, and user agent. However, you can also set custom device dimensions. To do this, select ‘Responsive’ from the device dropdown, then input your desired dimensions in the fields next to the dropdown (e.g. 1300 x 1275px indicated in the screenshot). The first field adjusts the width, and the second adjusts the height.

2.2 Capturing Desired Screenshots

Once you’ve set up the device view as you desire, you might want to capture a screenshot of your design. To do this, simply click on the ‘Capture screenshot’ from menu list (triggered by clicking three vertical dot button, highlighted in pink) in the device toolbar. This will download a screenshot of the current viewport (1300 x 1275px).

The option to capture a screenshot can be activated via the three-dot button

If you want a screenshot of the entire webpage, not just the current viewport, use the ‘Capture full size screenshot’ button (below the regular screenshot button). This will capture everything from the top to the bottom of the page, even if it’s not currently visible in the viewport.

A comparison is presented between the regular screenshot (on the left) and the full screenshot (on the right)

2.3 Understanding Device Colored Bar Values

The colored bar at the top of the viewport in device mode represents the media query breakpoints defined in your CSS. This bar shows you at a glance where your breakpoints are and which ones are currently active.

Device media query configuration panel

The colored sections represent ranges between breakpoints, with the colors corresponding to the CSS that is being applied at that range. The dark gray areas represent ranges where no media queries are being applied.

  • The max-value represents the maximum viewport width where the current media query will apply. If the viewport width exceeds this value, the current media query will no longer apply, and the next one will take over.
  • The min-value represents the minimum viewport width where the current media query will apply. If the viewport width falls below this value, the current media query will no longer apply, and the previous one will take over.

By understanding and utilizing these features of the Device Mode, you can ensure your designs are responsive and look great on all device sizes. Remember, the Chrome Inspect tool is your ally in achieving effective, efficient, and beautiful web designs.

3. CSS Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special keywords in CSS that allow you to style specific states or parts of an element. They are an essential part of the web designer’s toolkit, and the Chrome Inspect tool provides powerful features for working with them.

3.1 Pseudo-classes and Pseudo-elements

Pseudo-classes are used in CSS to define a special state of an element. For example, the :hover pseudo-class targets an element when the user's pointer is positioned over it. Other common pseudo-classes include :active, :visited, and :focus, each targeting a different state of an element. For instance, button in Shopify Polaris design system includes default, hoveredm focused, pressed, and disabled states.

Example of button states, which are demonstrated through pseudo-classes

Pseudo-elements, on the other hand, allow you to style certain parts of an element. For instance, the ::before and ::after pseudo-elements are used to insert content before or after the content of an element. Other pseudo-elements include ::first-line, ::first-letter, and ::selection, which allow you to style the first line, first letter, and the selected text of an element, respectively.

Example of the pseudo-elements demonstration, where the ::first-letter D is bold and enlarged

3.2 Changing States and Styles

With the Chrome Inspect tool, you can manually trigger different pseudo-class states and see how your design responds. Here’s how to do it:

  1. Open the Inspect tool and select an element by either right-clicking on the element and choosing ‘Inspect’ or using the element selector tool (Ctrl+Shift+C or Command+Shift+C on a Mac).
  2. In the Styles tab on the right-hand side of the Inspect tool, you’ll see a small dotted cube icon. Click on it to bring up the ‘Force element state’ options.
  3. Check the box next to the state you want to force (like :hover, :active, :focus, :visited). The page will now act as though the selected element is in the chosen state, and any CSS rules for that state will be applied.
In this example, we’ve applied a :hover state (a pseudo-class) to the ‘Overview’ button to simulate the style when the cursor hovers over the button.

Similarly, you can inspect and modify the styles applied by pseudo-elements. Select an element, and in the Elements tab, you’ll see ::before and ::after next to the element if any styles are being applied by these pseudo-elements. You can expand these to see and modify the CSS as you would with any other element.

By understanding and utilizing these features of the Chrome Inspect tool, you can design and debug your CSS more effectively, ensuring your website looks and behaves exactly as you want it to.

4. Color Picker and Color Formats

Color plays a crucial role in UI/UX design, and the Chrome Inspect tool offers some powerful features to help you work with colors. The Color Picker and Color Format tools allow you to experiment with different colors and view them in various formats, respectively.

4.1 Color Picker

When you inspect an element and look at its CSS properties, any property that involves color (like background-color or color) will show a small square preview of that color next to the property. If you click on that square, it will open the Color Picker.

The Color Picker allows you to visually choose colors, either by manually selecting a color from the gradient box or by inputting specific values. You can adjust the hue, saturation, lightness, and alpha (transparency) of the color. As you adjust the color, the changes will be reflected in real-time on the webpage, allowing you to see how different colors would look.

Utilize the color picker tool to inspect and adjust elements colors.

4.2 Color Formats

Chrome’s Color Picker also allows you to switch between different color formats. The available formats are Hex, RGB, HSL and even more. To change the color format:

  1. Open the Color Picker by clicking on the color preview square next to a color property in the Styles pane.
  2. Click the toggled color format icon (which is located at the top right corner of the Color Picker, next to the color value). Each click will cycle through the different formats (Hex, RGB, and HSL).
Change color format in color picker

This feature can be particularly useful if you need to match the color format used in a particular design software or if you want to experiment with different ways of representing color. For example, you might find it easier to understand and manipulate colors using HSL (Hue, Saturation, Lightness) rather than Hex or RGB.

Alter the color format using color swatches (shortcut)

Remember, the Chrome Inspect tool is a potent assistant for your design needs. By understanding and utilizing these features, you can design more efficiently, effectively, and beautifully.

--

--

Zeyuan
Zeyuan

Written by Zeyuan

He is a professional UX designer and HCI researcher. See my works at: https://www.zeyuannn.com/

No responses yet