TABLE OF CONTENTS

5 interesting features in Chrome Dev Tools

When I started my adventure with frontend, the biggest challenge was to discover most useful tools to work with. Of course it depends on which browser you use, but most people (and myself) use chrome. Let me introduce some useful tools in chrome browser.

Color editor

One of the most basic and underestimated Chrome feature is a color tool. It provides a lot of informations and ways of real-time manipulation. To open this tool we have to click on square filled with current color. It allows user to:

  • Pick any color from loaded page by sampler element
  • Copy current color to clipboard
  • Switch between color notation (HEX, RGBA, HSLA)
  • Access to color palettes that include these types of colors lists:
    • Material – set of default colors
    • Custom – we can add our colors to this list
    • Page colors – generated automatically by browser
color editor explanation
choosing custom colors

Box shadow tool

It is a box-shadow visualisation. When box-shadow property is added to our CSS, we can see a “double square” icon.

box shadow tool

After clicking on this icon we will see a menu with all box shadow properties which can be changed by moving the sliders. We can instantly see the effect on the screen.

box shadow settings

Saving to file

There is a way to save your work directly from browser. To make it possible we need to add folder/file to our workspace. Just open devTools then switch to Sources tab. On the left side of the menu, you will see a files list. Find your folder, then right-click on it and select “add folder to workspace”. Select proper project folder and allow chrome to use it. Now on our files list, we have a newly added folder – since now we can save any changes to this folder directly from browser.

allowing chrome to use the project and saving changes from the browser

Shadow DOM

It’s very interesting tool that allows user to see what is underneath of “complex” tag. Best example of that kind of element is input[“range”].
But first lets enable shadow DOM. We need to open devTools, go into settings and just check “Show user agent shadow DOM”. After that we will be able to see CSS pseudo-elements on our DOM. For now, not every browser supports styling of that kind of elements but I hope that it will change in the future and it will allow users to style elements like range without JavaScript plugins.

shadow dom
shadow dom in inspection

Design Mode

One of the best ways to test our work in terms of content flexibility is to switch browser to design mode. To do that we need to open JavaScript console and write this command:

document.designMode = 'on'

By using this command we enable editing HTML in very simple way. All tags start to behave similarly to inputs. We just click and write whatever you want to test how the element behaves with a lot of content.

testing elements behavior

If you want to see more dev-tips please visit: https://umaar.com/dev-tips/

Marek Jakimiuk

Marek, a Frontend Developer at Pagepro since 2017, brings a unique blend of engineering precision and design passion to his role. Marek is known for his advocacy of user experience (UX). He consistently pushes for designs and functionalities that prioritise the user, making him a valuable asset to any project focused on delivering superior digital experiences.

Article link copied

Close button