Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Chromium Developer Tools can do that?
Andreas
Andreas

Posted on • Edited on

     

Chromium Developer Tools can do that?

Here are some useful features of the Chromium Developer Tools, you may have missed so far. Those should work in every Chromium based browser (Brave, Vivaldi, Opera, the new Microsoft Edge, Google Chrome, etc).

1. Dark mode

You can activate different themes in the developer tools settings.

Dark mode in dev tools

2. Shadow Editor

There is a handy editor to manipulate thebox-shadow property.

Box Shadow in dev tools

3. Color Picker

Also every color property can be adjusted with a color picker.

Color Picker in dev tools

4. Device Toolbar

No need to resize your browser window - just use the device toolbar to test responsiveness.

Device toolbar in dev tools

5. Layer Inspector

A great way to inspect nested elements is the layer inspector.

Layer inspector in dev tools

6. Force Element State

To inspect elements in a special state (e.g. when active or hovered), you can force this state with:hov.

Force element state in dev tools

Wrap it up

These are just a few useful things the Chromium Developer Tools can do - I'm sure there are a lot more!


Published: 30th January 2020

Top comments(23)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
madza profile image
Madza
Discussions. 💬 Tools. 🛠 Resources. 📚 All things productivity. 🎯🚀💯
• Edited on• Edited

Nice features, especially layer inspector.. I always thought nesting should be inspected in 3D in order to get a better understanding of whats going on.

What app/extension did you use to record these GIFs, btw?

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

The layer inspector is indeed very handy, especially on pages with deeper nesting (I only showed a very simple example in this article).

I'm usingScreenToGif to record my screen. It's a really useful open source tool to quickly create screencasts.

CollapseExpand
 
facundocorradini profile image
Facundo Corradini
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
  • Location
    Mar del Plata, Argentina
  • Joined

I love how devtools have evolved in the last couple of years. Both Firefox and Chrome have great things available. But since we're talking Chrome, one of my favourites is the Rendering drawer (if you don't have it visible, run command --> show rendering)

Paint flashing and FPS meter are outstanding to debug performance, and the ability to emulate prefers-reduced-motion and prefers-color-scheme are great for accessibility testing.

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

Awesome suggestions! Thank you so much for this addition! 👏🏻

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

You're welcome 👍🏻

CollapseExpand
 
epranka profile image
Edvinas Pranka
Full-stack developer
  • Location
    Lithuania
  • Education
    Vilnius Gediminas Technical University
  • Joined

Hi, thanks for the post. I also want to add about thechrome://inspect. It is very useful to debug remote devices.

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

Very useful addition, thanks for this!

CollapseExpand
 
jscripter profile image
Jscripter
  • Joined
• Edited on• Edited

I find layer inspector a cute feature.

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

Yes, it can be very helpful when you want to inspect nesting of elements!

CollapseExpand
 
vaibhavkhulbe profile image
Vaibhav Khulbe
✦ Independent web developer/designer/blogger✦ Framer Expert & Partner | Advocate at 10x Designers✦ Hire me on Contra👇

Wow! I never realised there' a shadow editor in dev tools!

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

Me neither until recently 😅

CollapseExpand
 
artoodeeto profile image
aRtoo
Web Team at Dentca. Currently hands on Ruby on Rails and Angular. :)
  • Email
  • Location
    orange, california
  • Education
    Bachelors of Science in Information Technology
  • Work
    Fullstack Web Developer at Dentca
  • Joined

thanks for this. This layer will help me debug! wooo.

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

You're welcome, glad that it's useful for you!

CollapseExpand
 
palakjadav3 profile image
__Palak Jadav__
  • Joined

Very nicely explained, Really healpful

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

I'm glad You liked it! 😊

CollapseExpand
 
knth profile image
KNTH
  • Joined

Thanks! I've totally forgot about the layer inspector!

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

You're welcome!

CollapseExpand
 
kgingeri profile image
Karl Gingerich
Love building apps - especially web apps (JS/CSS/HTML)
  • Location
    Southern Ontario, Canada
  • Education
    Secondary. Self taught for many years now ;vP
  • Work
    Director of Information Systems at International Teams Canada and Business Consulting
  • Joined

Two things I didn't realise I could do - layers and :hov. Thanks Andreas.

CollapseExpand
 
devmount profile image
Andreas
freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

My pleasure! I'm glad it helps 😊

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

freelancing software engineer.javascript. php. python. css.husband. dad². guitarero. climber. retrogamer.
  • Location
    Berlin, Germany
  • Education
    M.Sc. Computer Engineering
  • Pronouns
    he/him/his
  • Work
    Freelancing Software Engineer
  • Joined

More fromAndreas

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp