Pesticide - Depurador CSS avançat icon

Pesticide - Depurador CSS avançat

Extension Actions

How to install Open in Chrome Web Store
CRX ID
jeebpgmphhagpecfiophljpkhncoajcg
Status
  • Live on Store
Description from extension meta

No només insereix contorns (sense color de fons) a tots els elements, sinó que també inspecciona la mida i la disposició. CSS és…

Image from store
Pesticide - Depurador CSS avançat
Description from store

Pesticide 3.2 és un depurador CSS avançat per a Chrome que us ajuda a inspeccionar el disseny, l'espaiat, la tipografia i els estils calculats directament a la pàgina.

Activeu-lo i passeu el cursor per sobre de qualsevol element per obrir un inspector flotant amb els detalls que realment necessiteu:

- Etiqueta, identificador i classes de l'element
- Ruta DOM
- Dimensions del client / desplaçament / desplaçament
- Model de caixa completa: marge, vora, farciment, radi i mida del contingut
- Inspecció de la font
- Propietats CSS calculades
- Copiar la sortida CSS en format Tailwind, en línia o en bloc

Què fa que Pesticide sigui útil:

- Depuració basada en contorns sense canviar el disseny
- Feu clic per fixar l'element actual mentre es compara l'espaiat i els estils
- Superposició de l'inspector redimensionable i arrossegable
- Posició i mida del panell desades per lloc
- Pàgina d'opcions per mostrar o ocultar seccions de l'inspector
- Control ràpid del teclat amb Ctrl + Maj + P

Pesticide està dissenyat per a desenvolupadors front-end, dissenyadors i qualsevol persona que depuri CSS complicat. Us ofereix una manera visual ràpida d'entendre com es construeix una pàgina sense obrir eines pesades per a cada petita comprovació de disseny.

Aspectes destacats de la versió 3.2:

- Millora del flux de treball de l'inspector flotant
- Panell de còpia CSS amb sortida Tailwind, en línia i en bloc
- Inspecció de fonts i estil computat
- Seccions d'inspector configurables des de la pàgina d'opcions

Si voleu una extensió lleugera de Chrome per a una depuració CSS ​​més ràpida, Pesticide està dissenyat per a aquesta tasca.

Latest reviews

Bekee Nwafor
Great for every web developer
Jeremy Dutton
Excellent and useful tool. In addition to using it to help debug my projects, I also use it to inspect the structures of other websites for potential design ideas.
Dragos Popescu
Would you consider adding a click-to-copy feature for CSS classes? This could streamline the development workflow. Currently I find myself constantly switching between the UI and code to manually locate and copy class names. Being able to click an element and instantly copy its class would save considerable time. I'm sure I'm not the only one that could benefit from this. Please think about it.
Alex Cobb
Briliant tool. Thank you for solving this problem!
Eric Phiri
I can't figure out how to see the bottom of the screen when using Pesticide. Maybe it's my lack of skill/knowledge - but I work on the premise that good software doesn't need to be explained just to do simple/obvious things. If I have to breakout the manual or dig through forums, THAT'S a design fail. The panel should behave the same as the browser's built in Inspector in that it acts as the windows foot and everything appears above it including the BOTTOM OF THE PAGE. Pesticide appears as an overlay that hides the bottom of the page. Edit: I'll raise to 4 stars since I just saw the 'move this banner' buttons. It still prevents seeing the whole page whilst moving around - maybe I have a very particular issue right now but wouldn't be as frustrated on other design debug issues.
om kasana
As a Front-end dev i can say that this is very useful and you guys shoud try this. it's Amazing!!!!!
Audu Mumeen
so nice
Zikasha
Very helpful tool for frontend developers. Its amazing!
Roberto Méndez
Just amazing
Ismat Muhammad
The extension is amazing
Khamisu Hassan Umar
The extension is very helpful for developers in such away that the debugging a CSS file is made simpler. Thanks.
Suraj phirke
good
Dragos Popescu
It's great! I've been using this for a couple of days now and I had to remove any other extension that was trying to do the same thing. I would ask for an improvement if considered useful by others as well. The possibility of clicking the classes to copy to clipboard. Super helpful when coding and sharing info. Just hover, click - copied. Anyway, Great stuff!
Nikola Janjic
Very good ext. Thanks
EJ Lai
Very advanced, shows you a ton like classes and dimensions without the need to fiddle with the horribly cramped and disorganized console tabs, indispensable for development - love it!
Mayank Adeva
Good One
nan Da
this is a good one to use with code editors. Thanks to dev team.
Romeo Rel
Good
Sojib Mir
gd extension
TEDD
best
marketing consultero
Awesome
Aaron Xu
Ths for the amazing plugin However, can it support adjust width/height? It seems too big in some display
Stephen Skarstedt
Fantastic Tool!!! Works extremely well!!! Thank you!
dyllan van wyk
Awesome tool, thank you so much
kareem sarhan
best
Animesh Maity
Good, gets the job done. Could give a solid 5 star if the size of the banner could be adjusted. Thank you.
Manuel Jovedo Canog
Very good. I hope I can adjust the size of the banner, though.
Assem Hamza
it fix the proplems
Pascalau Nicu
very helpful
Ademola Afolabi
Very useful extension
Fred Fraser
Love it!
Tamer Ghaly
I liked it
debo listixxs
love this pesticide
Colin Muriithi
Extremely practical, useful and crucial for design / frontend debugging...thanks for this!
med yasser
perfect actually helping new programmers to debug and know what are the problem with css code
Imanariyo Baptiste
very helpfully tool
luis paredes
Best tool for web developers.
Victor Akhihiero
The pesticide extension i was using before got outdated. really glad i could find a suitable replacement
John Lloyd Basco
It's been my go-to tool for frontend development in all my projects! Thank you!
Sujal
this is much much helpful. thanks a lot devs
Jegede Joseph
I love it
David Henson
Was using a similar extension that kept breaking. This one is so much better. Love the details at the bottom! Really useful.
Dayaash G
Great Assistant during development.
fandan
thanks for making this,
Henrique Candiotto
I enjoyed it. Really useful!
Alyssa Michelle
As a front end developer, I use this constantly. However, the enormous section on the bottom of the screen really kills the vibe. I want to SEE my UI. The CSS change on hover can be nice, but also very distracting. Can we please get the option to turn these features off?
Gustavo Starace
Great extension for developers!
SH Park
gg
Luqman Ola
Great
steam punck
Great tool for front end developers learning how CSS works!