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