CSS Inspector este un instrument puternic pentru dezvoltatori care vă permite să vizualizați toate proprietățile CSS ale oricărui element pur și simplu trecând cu mouse-ul peste acesta. Faceți clic pentru a fixa stilurile, editați-le direct și vedeți cum modificările sunt aplicate instantaneu pe pagină.
Fie că depanați o problemă de layout, faceți reverse-engineering unui design care vă place sau verificați rapid valorile de spațiere și tipografie, CSS Inspector vă oferă tot ce aveți nevoie într-un panel plutitor curat. Spre deosebire de DevTools din browser, nu vă stă în cale — nu există panouri andocate, nu se redimensionează viewport-ul. Doar treceți cu mouse-ul, dați clic și inspectați. Instrumentul afișează stilurile calculate (computed styles) — ceea ce browserul randează efectiv — nu doar CSS-ul scris de dumneavoastră. Asta înseamnă că vedeți valorile reale după ce moștenirea, specificitatea și cascada au fost rezolvate — exact valorile care influențează ce văd utilizatorii pe ecran.
Inspectarea unui element nu declanșează niciodată un reflow sau un repaint al paginii, așa că puteți explora liber fără să vă faceți griji că perturbați poziția de scroll, animațiile sau starea JavaScript. Sunt suportate și pseudo-elementele precum ::before și ::after — treceți cu mouse-ul peste elementul părinte, iar panelul afișează separat stilurile conținutului generat față de cele ale elementului propriu-zis. Proprietățile CSS personalizate (variabilele) sunt rezolvate la valoarea lor finală calculată, dar panelul vă arată și numele variabilei care a produs-o, astfel încât puteți urmări o culoare sau o valoare de spațiere înapoi până la sursa ei de design-token, nu doar să vedeți un număr brut de pixeli.
În utilizarea zilnică, majoritatea dezvoltatorilor apelează la CSS Inspector de zeci de ori într-o sesiune — verificând de ce s-a colapsat un margin, confirmând un cod hex înainte de a-l copia într-o foaie de stiluri sau verificând că un breakpoint de media query a aplicat efectiv stilurile pentru care a fost gândit. Fiind un panel plutitor și nu un mod la nivel de browser, îl puteți lăsa deschis în timp ce comutați între taburi pentru a verifica propriul editor de cod sau un fișier de design, apoi reveniți direct la același element peste care ați stat cu mouse-ul, fără să pierdeți contextul.
Vedeți fonturile, dimensiunile, culorile, spațierea și multe altele instantaneu când treceți cu mouse-ul peste orice element.
Faceți clic pe element pentru a bloca panoul astfel încât să nu dispară, permițând o inspecție detaliată.
Faceți dublu clic pe valori pentru a le schimba direct. Editările dvs. se reflectă instantaneu pe pagină.
Copiați proprietăți individuale sau întregul bloc de stil de design în clipboard cu un singur clic.
Vedeți vizual valorile pentru margini, borduri și padding.
Afișează lățimea, înălțimea și poziția elementului pe pagină.
CSS Inspector arată peste 40 de proprietăți:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorInspectați elementele nealiniate cu precizie.
Studiați stilurile site-urilor web preferate.
Testați modificările înainte de a scrie cod.
Arătați modificările live în timpul întâlnirilor.
Obțineți ușor codul CSS pentru elemente noi.
Faceți clic pe pictograma CSS Inspector din bara de instrumente DevSuite Pro.
Mutați cursorul peste orice element pentru a vedea proprietățile.
Faceți clic pe element pentru a fixa panoul.
Faceți dublu clic pe valori pentru a le ajusta.
Copiați codul actualizat și utilizați-l în proiectul dvs.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.