वेब डिजाइनरों के लिए शीर्ष 10 क्रोम एक्सटेंशन और उपकरण
यदि आप अपने वेब डेवलपमेंट प्रोजेक्ट्स को तेज करने, सहयोग करने या ऑडिट करने के लिए कुछ यूजफुलटूलों की जरूरत वाले डिजाइनर हैं, तो Chromeextension में कई टूल्स हैं।
इस लिस्ट में कुछ सबसे लोकप्रिय हैं - और कुछ आवश्यक तर्क - उपकरण और क्रोम एक्सटेंशन कि डिजाइन का काम करने वाले प्रत्येक उपयोगकर्ता को अपने किट बैग में होना चाहिए।
1। DOMFlags
<आंकड़ा वर्ग = "lazy aligncenter">
DOM लैग्स है Chrome एक्सटेंशन का उपयोग करने के लिए सरल ब्राउज़र टूल के साथ डेवलपर्स को काम करने का एक नया तरीका प्रदान करता है। यह अविकसित तत्वों को स्टाइलिंग तत्वों के कार्य को गति देने की अनुमति देता है।
प्रत्येक तत्व के लिए कीबोर्ड शॉर्टकट का उपयोग करके आप अपने नेविगेशन को बुकमार्क कर सकते हैं।
हम सभी ने अत्यधिक विस्तृत तत्वों का उपयोग करने में कठिनाई का अनुभव किया है, और इसे खोना आसान है।
DOM फ्लैग आपको स्वचालित रूप से सटीकता के साथ घटकों का निरीक्षण करने के लिए एक विशेषता स्टाइलिंग तत्वों को ट्रैक करने में सक्षम बनाता है। यह, Inturn, DevTools वर्कफ़्लो और कार्यान्वयन को गति देने में मदद करेगा।
DOM फ्लैग आपको परिवर्तनों को ट्रैक करने में सक्षम बनाता है। उन तत्वों पर अपना ध्यान केंद्रित करें जिनके साथ आप काम कर रहे हैं।
2 Sizzy
<आंकड़ा वर्ग = "lazy aligncenter">
Sizzy डिजाइनरों और देता है डेवलपर्स कई व्यूपोर्ट में अपनी साइटों का परीक्षण करने के लिए एक सरल मार्ग है।
Sizzy वास्तविक समय में अपने डिजाइन की जांच करने का एक सरल तरीका प्रदान करता है। यह किसी भी संख्या में उपकरणों और स्क्रीन आकार का एक इंटरैक्टिव दृश्य प्रदान करता है। आप एक डिवाइस कीबोर्ड का अनुकरण भी कर सकते हैं और फिर लैंडस्केप और पोर्ट्रेट मोड को स्विच कर सकते हैं।
Chrome एक्सटेंशन इंस्टॉल करने से आपके टूलबार में एक बटन जुड़ जाएगा, जो कि क्लिक करने पर Sizzy प्लेटफॉर्म में वर्तमान URL खोलने जा रहा है। विस्तार सभी "एक्स-फ्रेम विकल्प " शीर्षकों को अवरुद्ध कर देगा ताकि आप ऑनलाइन किसी भी वेबसाइट पर एक नज़र डाल पाएंगे।
Sizzy एक खुला स्रोत परियोजना है, और आप संपूर्ण देख सकते हैं। कोड यहाँ ।
3। चेकबोट
<आंकड़ा वर्ग = "lazy aligncenter">
चेकबॉट आपके परीक्षण कर सकते हैं सुरक्षा के लिए साइट और अपनी वेबसाइट की लोडिंग गति का ऑडिट भी करें। यह विशिष्ट त्रुटियों की पहचान करने के साधनों के साथ प्रस्तुतकर्ता प्रदान करेगा और सुधार साइट सुरक्षा, खोज इंजन और साइट गति की सिफारिश करेगा।
50 से अधिक सर्वोत्तम अभ्यास मैट्रिक्स का उपयोग करना, सर्वोत्तम अभ्यास एसईओ के लिए एक वेबसाइट का ऑडिट करना, लिंक को तोड़ना। डुप्लिकेट सामग्री और। टूल सीएसएस, जेएस और HTML को भी मान्य करेगा।
डिज़ाइनर और कोडर त्रुटियों पर चेकबॉट आपको वास्तविक समय में वापस लेने और अपने कार्यस्थल को पुन: जांचने की परेशानी से बचाता है।
यदि आप एक अच्छी गुणवत्ता वाले टूल की तलाश कर रहे हैं जो टूटे हुए पेज लिंक को ठीक करता है, तो अद्वितीय सामग्री और पृष्ठ शीर्षक सुनिश्चित करें और यह उपकरण उपयोगी हो, तो यह उपकरण उपयोगी होगा।
डिजाइनरों के लिए, यह आपकी मदद कर सकता है जैसे कि आप अपने CSSS और JS को कम कर सकते हैं। साथ ही अपने CSS andlepret ब्राउज़र कैशिंग को छोटा करने के बारे में सिफारिशें प्रदान करें।
4 GistBox Clipper
<आंकड़ा वर्ग = "lazy aligncenter">
GistBox वेब डिज़ाइनरों के लिए सबसे उपयोगी Chromeextensions में से एक है।
GistBox आपके द्वारा देखे जा रहे वेबपेज पर किसी भी कोड ब्लॉक से गिटहब गिस्ट बना सकता है।
p>किसी भी कोडब्लॉक के ऊपरी दाएं कोने में, आपको एक छोटा बटन दिखाई देगा, जिसे दबाए जाने पर, आप एक पॉप-अप thatenables को कोड को Gist में सहेजने की अनुमति देंगे।
You एक सही मूसलीक के साथ नए Gists बनाएं और बाद में निरीक्षण और उपयोग के लिए कोड के ब्लॉक को बचाएं।
GitHub के साथ एकीकरण करने से डिज़ाइनर anddevelopers को कोड ब्लॉक इकट्ठा करने और उन्हें हेरफेर करने या उन्हें उपयोग करने के लिए वर्गीकृत करने में सक्षम बनाता है। यह इसे एक सुविधाजनक और कुशल क्रोम एक्सटेंशन टूल बनाता है।
5 ColorZilla
<आंकड़ा वर्ग = "lazy aligncenter">
ColorZilla एक अविश्वसनीय है हेक्स कोड को इकट्ठा करने के लिए उपयोगी क्रोमिक्सेशन जो व्यक्तिगत वेब डिज़ाइन परियोजनाओं को टैग, लेबल और वर्गीकृत किया जा सकता है।
यह आपको एक नेत्र-ड्रॉप करने वाले टूलटैट का चयन करने में सक्षम बनाता है जो किसी भी वेब पेज से रंग को निकालेगा और उसे ColorZillaclipboard पर बचाएगा।
इसके साथ, आप बाद में उपयोग के लिए जल्दी से colorpalettes विकसित कर सकते हैं और यह सुनिश्चित करने के तरीके के रूप में कि आप वेब डिज़ाइन और विकास में colorconsistently उपयोग कर रहे हैं।
ColorZilla एक colorzer और cSS के रूप में भी कार्य करता है। ग्रेडिएंट एडिटर ताकि आप किसी इमेज को CSS में बदल सकें।
6 WhatFont
<आंकड़ा वर्ग = "lazy aligncenter">
ThisCrome एक्सटेंशन एक है अपने पसंदीदा फोंट का उपयोग करने के इच्छुक लोगों के लिए वास्तविक समय सेवर और उन्हें अपने स्वयं के वेब डिज़ाइन प्रोजेक्ट को शामिल करना।
व्हाट्सएप क्रोम एक्सटेंशन डेवलपर्स को किसी भी वेब पेज पर लगभग किसी भी फॉन्ट का विश्लेषण और पहचान करने की अनुमति देता है।
विस्तार अच्छी तरह से विकसित किया गया है और निरीक्षण उपकरण खोलने के लिए रथर्थन है जो फ़ॉन्ट के ऊपर केवल लहराते माउस द्वारा एक्सटेंशन काम करता है।
केवल यही नहीं बल्कि विस्तार उस सेवा की पहचान भी करेगा जिसका उपयोग सेवा करने के लिए किया जा रहा है। पृष्ठ फ़ॉन्ट गए और समर्थन करेंगे Google फ़ॉन्ट API और टाइपेकिट।
7। लाइटशॉट
<आकृति वर्ग = "आलसी एलाइनकेंटर">
लाइटशॉट एक त्वरित है स्क्रीनशॉट टूल आपको किसी भी पेज के संपूर्ण, या भाग को कैप्चर करने के लिए सक्षम करता है और या तो इसे डाउनलोड करता है या इसे किसी तीसरे पक्ष के गंतव्य पर भेजता है।
लाइटशॉट द्वारा लिया गया स्क्रीनशॉट सोशल मीडिया पर उपयोग किया जा सकता है या मुद्रित किया जा सकता है।
आप स्क्रीन के चयनित भाग को टेक्स्ट, एरो और एनोटेट कर सकते हैं और जोड़ सकते हैं। लेकिन शायद वेब डिजाइनरों के लिए इस सरल उपकरण का सबसे शानदार तरीका यह है कि एक इमेजिउ का चयन करके आप इसी तरह के इमेजोनलाइन के लिए पूर्ण Google छवि खोज करने के लिए आगे बढ़ सकते हैं।
लाइटशॉट को मल्टीफ़ंक्शन में कॉन्फ़िगर किया जा सकता है।/>p>
विस्तार शुद्ध जावास्क्रिप्ट में लिखा गया है और यह विंडोज, क्रोमबुक, लिनक्स और मैक ओएस के लिए भी काम करेगा। इसे एक डेस्कटॉप अनुप्रयोग के रूप में भी एक्सेस किया जा सकता है, जो इसे उन वेब डिज़ाइनरों के लिए एक उत्कृष्ट विकल्प बनाता है जो कई उपकरणों पर निर्भर हैं।
8। विस्मयकारी स्क्रीनशॉट
<आंकड़ा वर्ग = "आलसी संरेखण">
लाइटशॉट की तरह, विस्मयकारी स्क्रीनशॉट एक स्क्रीनैन्ड छवि कैप्चरिंग एक्सटेंशन है।
यह लाइटशॉट से भिन्न होता है, हालांकि, तरीकों के एम्बर में। सभी स्क्रीनशॉट को अपने Google ड्राइव से जोड़ने के लिए बहुत बढ़िया स्क्रीनशॉट को कॉन्फ़िगर किया जा सकता है।
यह आपको स्क्रीनशॉट लेने की अनुमति देता है जो पूरे पृष्ठ पर कब्जा करने के लिए आपके तत्वों से परे हैं। इसमें हैडेडिशनल एडिटिंग और एनोटेशन टूल्स अल्पविराम क्रॉपिंग और इमेजिंग के लिए अनुमति देता है। सभी एक्सटेंशन के भीतर .. या अतिरिक्त विस्मयकारी एप्लिकेशन के उपयोग से
आप डेस्कटॉप के साथ-साथ क्रोम एप्लीकेशन को इंस्टॉल करके इसकी विशेषताओं का विस्तार कर सकते हैं। यह एक्सटेंशन विडोकैप्टिंग और शेयरिंग के लिए भी अनुमति देता है ताकि आप किसी भी साइट पर काम करते समय अन्य डेवलपर्स ऑर्डिनेटर्स के साथ सहयोग कर सकें।
आप स्क्रीनशॉट के रूप में अच्छी तरह से नीले या मिटाए गए तत्वों के अतिरिक्त चित्र जोड़ सकते हैं जो आप नहीं दिखा सकते हैं। दूसरों के लिए।
9 क्लियर कैश
<आकृति वर्ग = "lazy aligncenter">
स्पष्ट कैश Chrome एक्सटेंशन एक तेज़ और सरल उपकरण है जो आपको उस पृष्ठ की कुकीज़ और कैश साफ़ करने में सक्षम करता है, जिस पर आप देख रहे हैं। यह कुछ सरल पृष्ठ तत्वों को साफ़ करने के लिए आपके भौंरे के सेटिंग पृष्ठ पर नेविगेट करने की आवश्यकता को हटा देता है।
वेब डिज़ाइनर के लिए जो कई शेड बना रहे हैं और उन्हें वास्तविक समय में देखना चाहते हैं, यह एक उत्कृष्ट उपकरण है पुराने डेटा को देखने की हताशा को बहुत कम कर देता है।
कई बार आपको अपनी कचौड़ी कुकीज़ को साफ़ करने की आवश्यकता होती है, लेकिन क्रोम सेटिंग्स में नेविगेट करना थकाऊ है। Clear Cache आपको एक बटन के क्लिक पर आपके कैश के साथ-साथ वैश्विक या स्थानीय कुकीज़ की सुविधा देता है।
स्पष्ट कैश आपको उन व्हाट्सएप को कॉन्फ़िगर करने की अनुमति देगा, जिसे आप पृष्ठ से साफ़ करना चाहते हैं। चर में कैश, डाउनलोड, सभी सिस्टम, फॉर्म-डेटा, कैश, इंडेक्स डेटाबेस, प्लगइन डेटा, पासवर्ड और पासवर्ड शामिल हैं।
10। वेब डेवलपर Google ChromeExtension
<आंकड़ा वर्ग = "आलसी संरेखण">
<>वेब डेवलपर Google Chrome विस्तारक डेवलपर्स और डिज़ाइनर आसानी से सर्वोत्तम अभ्यास डिज़ाइन, कोडिंग, प्रयोज्य और खोज के अनुकूलन के उल्लंघन के लिए अपने वेबपृष्ठों का ऑडिट, विश्लेषण और जांच करते हैं।
यह एक महान ऑल-इन-वन टूल है। यह भारी नहीं है कि हमारे संसाधन ब्राउज़ करें फिर भी वेब डिज़ाइनियों के लिए उपयोगी एक टन जानकारी प्रदान करता है जो किसी वेबसाइट या पृष्ठ के भीतर खोज इंजन अनुकूलन तत्वों के लिए भी ज़िम्मेदार है।
Theextension कई वेब डेवलपर टूल के साथ टूलबार स्थापित करता है।
टूल आपको पृष्ठ-बोध, चौड़ाई और आयामों पर संकेत देगा, जो ऑन्टमल्लट उपकरणों का उपयोग करने के लिए सर्वोत्तम अभ्यास के साथ संघर्ष करते हैं। यह आपको एम्बेडेड जावास्क्रिप्ट की जांच करने और विभिन्न उपकरणों के एक सिमुलेशन के माध्यम से yourwebsite देखने की अनुमति देता है।
विंडोज, लिनक्सैंड मैक ओएस पर विस्तार अच्छी तरह से कार्य करता है। कोडिंग और डिज़ाइन के मुद्दों के अलावा, यह मेटा टैग जानकारी, प्रतिक्रिया शीर्षलेख, रंग जानकारी और .topographic जानकारी में भी प्रदान करेगा।
आप टूल की मुख्य विशेषताओं की समीक्षा कर सकते हैं और साथ ही यह डेवलपर के लिए पूर्ण क्षमताएँ हैं। क्रिस पेडरिक्स की वेबसाइट ।
इसमें कोई संदेह नहीं है कि अन्य उच्चता और उपयोगी क्रोम एक्सटेंशन के ढेर सारे हैं जो वेब डिजाइनर या डेवलपर हैं। क्या आपके पास ऐसे टूल के लिए कोई अनुशंसा है, जो आपको लगता है कि मैं इस सूची में उपयोगी या बेहतर हूं? हमें बताएं।
Technology Stacks - Computer Science for Business Leaders 2016