Chrome DevTools or Firefox DevTools in 2024 and Why?

4 Likes

Chrome all the way…But All I want is for Chrome DevTools to let me see which CSS class is affecting a property. When there are multiple classes on an element and its parents or children, it’s almost impossible to figure out which class is causing what because the dev panel lists every class.

Yesterday, I spent four hours debugging a layout shift caused by a sticky header setting in my WordPress theme. There were so many classes attached to the logo:

.site-logo, .mobile-header-logo, .has-branding, .has-sticky-branding, .sticky-element, .is-stuck, .grid-parent, .inside-grid-container, .is-logo-image

Imagine trying to find out which one of those classes is causing a specific change. The dev panel lists all the classes and properties, but doesn’t tell you which class is responsible. You can deactivate properties, but that doesn’t help because it doesn’t show the affected class. You also can’t deactivate specific classes directly in the panel, only by deleting them one by one in the console. The search box isn’t useful either because you have to check every class individually.

All I want is for Chrome DevTools to highlight the parent class when you click on a property. That’s it. Is that too much to ask for in 2023?

1 Like

I switched to using Firefox as my personal browser, yet I still favor Chrome Dev Tools for web development. The variances are quite subtle, but my preference remains unchanged, perhaps simply out of habit.

Use both, but Mozilla is somewhat better because the tree view indicates which DOM elements have JavaScript events associated with them. Incredibly helpful.

1 Like

Opera Mini.

I dislike Chrome.

2 Likes

Hahahahahahahahaha :joy: :joy: :joy: :joy: :joy: :joy: :joy:

1 Like