Chrome DevTools is not only a tool for developers, but also a great helper for web designers. Here are ten very useful design features.

Set up a language you know

  • Supports over 80 languages

After you select the language drop-down menu, reload DevTools to take effect.

Let’s get down to business

1. Length editing tool

  • Unit: drop-down menu
  • Value: Drag the mouse
  • Length: Click a value

After the mouse can be pulled down to select the length unit; If you hover over a value, the mouse cursor turns into a horizontal cursor. You can drag the mouse left or right to change the value. If you want + -10, shift + drag left or right.

2. Angle editing tool

  • Visualize angles and gradients

Drag the hand in the clock to change the Angle; You can also preview color changes in the editor; In addition, Shift + clicking on the clock can change the units of Angle. (DEG, Grad, RAD, turn)

3. Grid editing tools

  • Grid element badge
  • Grid editor
  • The layout pane

Click Layout and check to display track name and track size. Corresponding values (defined length and actual calculated length) will be displayed on the page. You can also preview and edit the grid.

Flexbox editing tools

  • Flexbox Element badge
  • Flexbox editor
  • The layout pane

Stand-alone Flex displays overlay layers of elements; Click Layout to view all flex layouts on the Flexbox Overlays page, and check the layers that will display each element.

5. Use the Container Queries editing tool

  • Container query badge
  • Changing query conditions

Click the Contanier badge and the web page will highlight the container element

6. Change the TAB page

  • Track changes to native source code

Easier to check source code changes.

7. Overview of CSS

  • Summary of web page colors and fonts
  • Unused CSS declarations
  • Number of Media enquiries

8. Font and color editing tools

  • Edit font styles
  • Change the color format
  • Change color disk preview
  • Check color contrast
  • Color repair suggestions

Modify contrast:

9. Simulation function

  • Emulation deactivates AVIF/Webp image format
  • Simulate auto Dark mode
  • Simulation prefers – color – scheme
  • Simulation prefers – reduce – motion
  • To simulate the color gamut

Disable AVIF/Webp image format:Auto Dark mode, render all pages in dark mode:More simulation features: Simulation of CSS color-gamut, simulation of CSS reduced animation, simulation of visual defects

10. Web ruler

  • Measuring Web elements

Rulers appear on the page: it’s easier to measure the size of elements