DevTools गहरे रंग में बदलना, @keyframe एडिटिंग, और स्मार्ट ऑटोकंप्लीट

पॉल बकॉस
पॉल बैकॉस

जानें कि DevTools की मदद से, स्मार्ट कंसोल ऑटोकंप्लीट करने की सुविधा की मदद से कैसे टाइप करना कम किया जाता है. साथ ही, स्टाइल पैनल में सीधे @keyframe नियमों में बदलाव करने, सीएसएस कस्टम वैरिएबल का इस्तेमाल करने, और डार्क साइड में शामिल होने का तरीका जानने का तरीका भी जानें.

आपके कंसोल में ज़्यादा स्मार्ट ऑटोकंप्लीट सुविधा

अगर आप मेरी तरह और कई दूसरे लोगों की तरह हैं, तो आपको अपने ऐप्लिकेशन को डीबग करने के लिए कंसोल में निर्देश टाइप करना होता है. इससे पता चलता है कि ऐप्लिकेशन काम नहीं कर रहा है, उसे बार-बार इस्तेमाल करते हुए टाइप करते हैं. इस काम में आपकी मदद करने के लिए, अब हम आपके टाइप किए गए सभी स्टेटमेंट अपने-आप पूरे कर रहे हैं. जैसे:

ऑटोकंप्लीट

स्टाइल पैनल में, @keyframe के नियमों में सीधे तौर पर बदलाव करना

जब हमने DevTools में ऐनिमेशन जांचने वाले टूल और ईज़िंग एडिटर की सुविधा शुरू की, तब सिर्फ़ ट्रांज़िशन हो सकता था. ऐसा इसलिए, क्योंकि हमने स्टाइल पैनल में @keyframe पर आधारित सीएसएस ऐनिमेशन कभी नहीं दिखाए. मुझे यह बताते हुए खुशी हो रही है कि यह अब पुरानी बात हो गई है. इसलिए, आगे बढ़ें! झलक देखने के लिए, हमारा वीडियो ट्वीट देखें.

कस्टम सीएसएस प्रॉपर्टी के लिए सहायता

DevTools में पसंद के मुताबिक सीएसएस प्रॉपर्टी

सीएसएस में काफ़ी सुविधाएं मौजूद हैं और उनमें से एक कस्टम वैरिएबल है. इसे Chrome 49 में लॉन्च किया जा रहा है. हमने पक्का किया है कि DevTools में, वैरिएबल काम करते हैं. इसलिए, अगर आपने पहले Sass में वैरिएबल इस्तेमाल किए हैं, तो नेटिव वैरिएबल का इस्तेमाल करके देखें. इससे, स्टाइल पैनल में जाकर प्रॉपर्टी में तुरंत बदलाव किए जा सकते हैं. साथ ही, डिपेंडेंट एलिमेंट को तुरंत अपडेट किया जा सकता है.

DevTools के लिए गहरे रंग वाली थीम

गहरे रंग वाली थीम का इस्तेमाल

आखिरकार, हमने पिछले कुछ सालों में कई बार इसकी शिकायत की. अब आपके पास DevTools में डार्क साइड चुनने का विकल्प है. DevTools सेटिंग में जाएं. थीम को गहरे रंग पर सेट करें और इसका आनंद लें. यह अब भी बीटा वर्शन में है, क्योंकि ज़्यादातर चीज़ें अपने-आप जनरेट होती हैं. इसलिए, अगर आपको कुछ ऐसा दिखता है जिसमें सुधार हो सकता है, तो हमें बताएं!

बाकियों को सबसे अच्छा लगा

  • पूरे कंसोल टैब पर क्लिक करने पर, कंसोल ड्रॉवर अब अपने-आप छोटा हो जाता है.
  • 'सोर्स' में मौजूद फ़ाइल ट्री को बेहतर बनाया गया है. इसमें नए आइकॉन और ग्रुप बनाने की नई सुविधा जोड़ी गई है

हमेशा की तरह, Twitter के ज़रिए हमें अपनी राय दें या नीचे दी गई टिप्पणियों पर गौर करें. साथ ही, crbug.com/new पर गड़बड़ियां सबमिट करें.

अगले महीने तक!
पॉल बैकॉस और DevTools टीम