UI Inspector - विज़ुअल CSS एडिटर
Extension Actions
- Extension status: Featured
- Extension status: In-App Purchases
तेज़ डिज़ाइन और UI डीबगिंग के लिए पेज पर सीधे एलिमेंट और उनके CSS को इंस्पेक्ट और विज़ुअली एडिट करें।
ब्राउज़र के लिए एक विज़ुअल CSS एडिटर
UI Inspector के साथ अपने वेब डेवलपमेंट और डिज़ाइन वर्कफ़्लो को बेहतर बनाएं — एक शक्तिशाली Chrome एक्सटेंशन जो आपको किसी भी वेब पेज को विज़ुअली और रियल-टाइम में इंस्पेक्ट, एडिट और स्टाइल करने देता है। DevTools की जटिलता से बचें और सीधे पेज पर तुरंत बदलाव करें।
UI Inspector के साथ, आप कर सकते हैं:
- एलिमेंट इंस्पेक्ट करें — एक्सटेंशन एक्टिवेट करें और किसी भी एलिमेंट पर क्लिक करके उसके एट्रिब्यूट देखें।
- एट्रिब्यूट एडिट करें — विज़ुअल एडिटर में स्टाइल बदलें और रियल टाइम में बदलाव देखें।
- टाइपोग्राफी कंट्रोल करें — फ़ॉन्ट फ़ैमिली, साइज़, वेट, लाइन हाइट और लेटर स्पेसिंग एडजस्ट करें।
- लेआउट और स्पेसिंग कॉन्फ़िगर करें — मार्जिन, पैडिंग, डिस्प्ले प्रॉपर्टीज़ और अलाइनमेंट सेट करें।
- बैकग्राउंड और शैडो बेहतर करें — कस्टम कलर, ग्रेडिएंट, बैकग्राउंड ब्लर और शैडो इफ़ेक्ट लागू करें।
- बॉर्डर कस्टमाइज़ करें — बॉर्डर की चौड़ाई, स्टाइल, रंग और रेडियस एडजस्ट करें।
- अपीयरेंस फ़ाइन-ट्यून करें — ओपैसिटी, ब्लेंड मोड और रोटेशन जैसी ट्रांसफ़ॉर्मेशन कंट्रोल करें।
- सभी बदलाव देखें — एक ही जगह पर हर अपडेट किए गए एलिमेंट की लिस्ट देखें।
- CSS कॉपी करें — अपने बदलावों का कंपाइल्ड CSS तुरंत देखें और कॉपी करें।
---
UI Inspector PRO अनलॉक करें और:
- बदलाव ग्लोबली लागू करें — सेंसिटिविटी स्लाइडर का उपयोग करके पूरे पेज पर समान एलिमेंट पर स्टाइल बदलाव ऑटोमैटिकली लागू करें।
- स्टाइल प्रीसेट — किसी भी एलिमेंट को रीयूज़ेबल प्रीसेट के रूप में सेव करें और एक क्लिक में किसी भी वेबसाइट पर लागू करें।
- Tailwind, SCSS या JSX के रूप में एक्सपोर्ट करें — अपने बदलावों को उस कोड फ़ॉर्मेट में कॉपी करें जो आपके प्रोजेक्ट को चाहिए।
- स्क्रीनशॉट एक्सपोर्ट करें — व्यक्तिगत स्टाइल किए गए एलिमेंट के हाई-रेज़ोल्यूशन PNG स्क्रीनशॉट कैप्चर करें।
- GitHub पर एक्सपोर्ट करें — अपने डिज़ाइन बदलावों को CSS में कंपाइल करके GitHub इश्यू जेनरेट करें।
---
UI Inspector किसके लिए है?
वेब डेवलपर:
- फ़्रंट-एंड डेवलपमेंट तेज़ करें: एलिमेंट को सीधे एडिट करके लेआउट या स्टाइलिंग की समस्याओं को तुरंत पहचानें और ठीक करें।
- CSS डीबगिंग सरल बनाएं: एक इंटूइटिव, विज़ुअल एडिटर से DevTools को बायपास करें।
- प्रोडक्शन-रेडी कोड एक्सपोर्ट करें: बदलावों को CSS, Tailwind, SCSS या JSX के रूप में सीधे अपने कोडबेस में कॉपी करें।
वेब डिज़ाइनर:
- रियल-टाइम डिज़ाइन वैलिडेशन: ब्राउज़र में डिज़ाइन एडजस्ट और परफ़ेक्ट करें ताकि पिक्सल-परफ़ेक्ट इम्प्लीमेंटेशन सुनिश्चित हो।
- डिज़ाइन और डेवलपमेंट को जोड़ें: लाइव पेजों को सीधे ट्वीक करके ज़्यादा प्रभावी ढंग से सहयोग करें।
- प्रीसेट सेव और रीयूज़ करें: रीयूज़ेबल स्टाइल की लाइब्रेरी बनाएं और प्रोजेक्ट्स में लगातार लागू करें।
---
UI Inspector का उपयोग कैसे करें
1. एक्सटेंशन एक्टिवेट करें: ब्राउज़र टूलबार में UI Inspector आइकन पर क्लिक करें या Alt/Option + Shift + I दबाएं।
2. एलिमेंट इंस्पेक्ट और एडिट करें: किसी भी एलिमेंट पर होवर करें, उसे सेलेक्ट करें और तुरंत उसके एडजस्टेबल स्टाइल देखें।
3. स्टाइल विज़ुअली बदलें: टाइपोग्राफी, लेआउट, स्पेसिंग, बैकग्राउंड, बॉर्डर, शैडो और बहुत कुछ बदलने के लिए इंटूइटिव इंटरफ़ेस का उपयोग करें।
4. प्रीसेट सेव और अप्लाई करें: कंसिस्टेंट डिज़ाइन के लिए स्टाइल प्रीसेट बनाएं और किसी भी साइट पर किसी भी एलिमेंट पर लागू करें।
5. एक्सपोर्ट और शेयर करें: कई फ़ॉर्मेट में CSS कॉपी करें, स्क्रीनशॉट कैप्चर करें या GitHub इश्यू के रूप में बदलाव एक्सपोर्ट करें।
---
इंस्टॉलेशन
Side Panel API सपोर्ट करने वाले किसी भी Chromium ब्राउज़र के साथ कम्पैटिबल। सर्वोत्तम परिणामों के लिए, सुनिश्चित करें कि आपका ब्राउज़र सभी आवश्यक APIs सपोर्ट करता है। इंस्टॉलेशन समस्याएं आने पर, अपने ब्राउज़र को नवीनतम संस्करण में अपडेट करें और पुनः प्रयास करें।
Latest reviews
- Blake Roger
- Buy it already. I have used UI Inspector for over 3 years and it is still the first tool I reach for every time. UI Inspector quickly became the first tool I reach for in my workflow. It is easily my number 1 plugin and one of those rare extensions that you install once and immediately wonder how you ever worked without it. It should be a legal requirement for any designer who needs seamless access to these features to own UI Inspector. What really makes this product stand out is not only the quality of the tool itself but the person behind it. The creator is responsive, appreciative, and clearly invested in growing the product and supporting the people who use it. That mindset shows throughout the experience. Great tools usually come from people who deeply understand the problems they are solving, and this one clearly does. The moment you start using it, you notice how thoughtfully everything is put together. Something as simple as grabbing a brand color with the eye dropper or clicking to see a responsive grid break down a layout instantly makes understanding a design feel effortless. Being able to quickly identify fonts, colors, spacing, and structure without digging through layers saves an incredible amount of time and keeps your focus where it should be. It also goes far beyond simple inspection. You can adjust typography, experiment with spacing and layout, tweak colors or gradients, and see everything update live right on the page. When it is time to move fast, the ability to view and copy the generated CSS or export styles makes collaboration with a team smooth and practical. It genuinely feels like having a live design workspace built directly into your browser. You can tell this was built by someone who truly understands UX, UI, and how designers actually work day to day. That understanding shows in the details and in the overall experience. This extension deserves far more recognition than it gets. I recommend it constantly, and for anyone working in design or front end development, it quickly becomes an essential tool. Thank you for building something this thoughtful and well crafted. I am genuinely excited to see what comes next.
- Matt Bumgardner
- I use this daily. Great extension.
- Muhammad
- Best
- Tricia Angeloni
- Exactly what I needed!
- Jorge Rocha
- This has been one of the most brilliant and unique experiences i have had recently.
- Edoardo Tognoni
- Amazing extension. Saved me so much time when prototyping on websites.
- Seedog Joy
- Don't buy it, you'll get hurt if you buy it ！！！
- Thomas Allen
- Can even test to see if it shows real CSS...
- KaiserClone
- The paid features ruin it given there is simply no reason for it to exist given the fact that what they are charging for doesnt cost them any money and is provided by other services for free on the same webstore along with the fact that even without extensions having any sort of normal browser you can go into the client side web code and do it yourself. I would respect if you made donations a way to fund development but paywalling things that cost you no money and that are available for free on other extensions is simply ridiculous. Sincerely software dev
- T VICKY
- I love your effort in this extension,
- Finn Abiuso
- you need to pay to export css? that's crazy
- saeyan
- Incredible usability and convenience! I bought this app and couldn't stop recommending it to everyone around me. As a designer, I can say this is truly an excellent product. Both the interactions and UI are convenient and fantastic.
- Luca
- Wow this works extremely well. I am grateful that this tools has been developed.