जानें कि DevTools, हमेशा चालू रहने वाले नए और बेहतर डिवाइस मोड की मदद से, मोबाइल पर पहले से ज़्यादा कैसे काम करेगा. अपने सिलेक्टर में रंग तुरंत जोड़ने के लिए, कलर बटन का इस्तेमाल करें. साथ ही, जानें कि DevTools में जल्द ही क्या-क्या नया होने वाला है.
आने वाले समय में लेखन के तरीकों में होने वाले बदलावों की झलक
हम अभी Chrome Dev Summit से वापस आए हैं. यहां हमने आपको बताया था कि आज और आने वाले समय में, DevTools का इस्तेमाल कैसे किया जा सकता है. आम तौर पर, इस डाइजेस्ट में उन सुविधाओं के बारे में नहीं बताया जाता जो अभी एक्सपेरिमेंट के तौर पर उपलब्ध हैं या जिन पर काम चल रहा है. हालांकि, इस बार हम एक अपवाद बना रहे हैं. अगर आपके पास पूरा टॉक शो देखने का समय नहीं है, तो यहां उसकी खास जानकारी दी गई है:
डिवाइस मोड का वर्शन 2
हम डिवाइस मोड के इस नए और बेहतर वर्शन पर लगातार काम कर रहे हैं. हालांकि, हम चाहते हैं कि सभी लोग इसे आज़मा पाएं. इसलिए, हमने इसे आज ही आपके Canary में चालू कर दिया है. इन बदलावों के साथ, हम DevTools को मोबाइल-फ़र्स्ट फ़्यूचर में ले जा रहे हैं. इसमें मोबाइल डेवलपमेंट डिफ़ॉल्ट है और डेस्कटॉप डेवलपमेंट “ऐड-ऑन” है. आने वाले कुछ हफ़्तों में, हम इस बारे में ज़्यादा जानकारी देने के लिए एक लंबी ब्लॉग पोस्ट पब्लिश करेंगे.
ऐनिमेशन की बेहतर जांच
ऐनिमेशन की जांच की सुविधा से, आपको यह पता चलता है कि किसी भी चलती-फिरती चीज़ में क्या हो रहा है. हमने एक बार में एक एलिमेंट पर ट्रांज़िशन दिखाने के बजाय, हेयुरिस्टिक्स जोड़े हैं. ये हेयुरिस्टिक्स, जटिल ऐनिमेशन को ग्रुप में बांटते हैं, ताकि आप उन सभी पर फ़ोकस कर सकें. वीडियो देखें. पूरी तरह से लॉन्च होने के बाद, हम एक बड़ी और अलग ब्लॉग पोस्ट उपलब्ध कराएंगे.
लेआउट मोड (झलक)
नया लेआउट मोड, फ़िलहाल पूरी तरह से तैयार नहीं है. हालांकि, यह बहुत ही आशाजनक है. मुझे इस सुविधा को पूरी तरह से तैयार होने का इंतज़ार है. लेआउट मोड, पेज पर मौजूद किसी भी एलिमेंट के लिए, DevTools में WYSIWYG (आप जो देखते हैं वही पाएं) एडिटिंग की सुविधाएं जोड़ता है. फ़िलहाल, ऊंचाई, चौड़ाई, पैडिंग, और मार्जिन में बदलाव किया जा सकता है. आपको यह सुविधा देने में थोड़ा समय लगेगा. हालांकि, हम आपको इस बारे में अपडेट देते रहेंगे.
अपडेट किए गए टाइमलाइन पैनल की मदद से परफ़ॉर्मेंस की प्रोफ़ाइल बनाना
RAIL परफ़ॉर्मेंस मॉडल को लॉन्च करने के लिए, टाइमलाइन पैनल में छोटे और बड़े सैकड़ों बदलाव किए गए हैं. इन बदलावों से, परफ़ॉर्मेंस प्रोफ़ाइलिंग की सुविधा को बेहतर बनाया गया है. इसलिए, हर बदलाव को अलग-अलग दिखाने के बजाय, हमारे पॉल आयरिश ने हमें लाइव स्टेज पर, किसी साइट की परफ़ॉर्मेंस को सही तरीके से डीबग करने का तरीका बताया. इस मामले में, Hotel Tonight की मोबाइल साइट को लाइव स्टेज पर डीबग किया गया. हाल ही में लॉन्च की गई सुविधाओं में, लोड और परफ़ॉर्मेंस की फ़िल्म स्ट्रिप, शामिल किया गया नेटवर्क वॉटरफ़ॉल, ट्रीव्यू की खास जानकारी, और डोमेन और फ़ाइल के हिसाब से परफ़ॉर्मेंस की लागत देखने की सुविधा शामिल है.
किसी भी एलिमेंट में फ़ोरग्राउंड और बैकग्राउंड के रंग आसानी से जोड़ना
जब भी आपको अपने एलिमेंट में background-color या color प्रॉपर्टी जोड़नी होती थी, तो कलर पिकर खोलने की ज़रूरत पड़ती थी. इसके बजाय, ज़्यादातर लोग हर बार “background: red;” जैसा कुछ टाइप करते हैं, ताकि कलर पिकर आइकॉन दिखे. इसके बाद, वे अपनी पसंद का रंग चुनते हैं.
हमने सोचा कि हम इसे आसान बना सकते हैं. हमने दो बेहतरीन बटन जोड़े हैं. ये बटन, सिलेक्टर के सबसे नीचे दाएं कोने पर कर्सर घुमाने पर दिखते हैं. इनकी मदद से, एक ही क्लिक में रंग जोड़ा जा सकता है और पिकर को लाया जा सकता है:
बाकी के सबसे अच्छे
- हमने सामान्य मीडिया टाइप दिखाकर, स्टाइल पैनल में पहले से मौजूद जगह का काफ़ी बर्बाद किया है. अगर कोई चीज़ सामान्य है, तो हम उसे आपके सिलेक्टर से पहले छिपा देते हैं!
- अब स्टाइल पैनल में, किसी सीएसएस सिलेक्टर पर कर्सर को लंबे समय तक घुमाकर देखा जा सकता है कि यह पेज के कितने एलिमेंट पर लागू होता है.
- क्या आपने प्रिंट करने की कोशिश जारी रखी है? प्रिंट मीडिया इम्यूलेशन की सुविधा अब भी उपलब्ध है. इससे यह देखा जा सकता है कि प्रिंट होने पर आपका पेज कैसा दिखेगा. हमने इसे रेंडरिंग सेटिंग में ले जाया है.
- जांच के लिए कोई एलिमेंट चुनने पर, अब हम उससे जुड़े डीओएम सब-ट्री को अपने-आप बड़ा और छोटा करते हैं. इसे समझाना मुश्किल है, देखने पर ही यकीन आता है.
हमेशा की तरह, Twitter पर हमें अपनी राय दें या यहां दी गई टिप्पणियों में बताएं. साथ ही, crbug.com/new पर गड़बड़ियां सबमिट करें.
अगले महीने तक!
पॉल बाकौस और DevTools टीम