Pagepro Blog

Tooling

5 interesting features in Chrome Dev Tools

Posted on .

5 interesting features in Chrome Dev Tools

Introduction

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

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.

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

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.

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.

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.

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

Cezary Prokopowicz

Cezary Prokopowicz

http://pagepro.co

There are no comments.
View Comments (0) ...
Navigation