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.
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.
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”].
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/