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