DevTools डाइजेस्ट - एलिमेंट में बेहतर बदलाव करना, सर्विस वर्कर डीबग करना, और मटीरियल डिज़ाइन शेड

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

नोड में असरदार तरीके से बदलाव करने के लिए, डीओएम पैनल के नए संदर्भ मेन्यू का इस्तेमाल करें. सर्विस वर्कर को सीधे रिसोर्स पैनल से डीबग करें. कलर पिकर में मौजूद सभी मटीरियल डिज़ाइन शेड में से चुनें. Blackbox JS लाइब्रेरी ज़्यादा आसानी से उपलब्ध कराएं.

डीओएम पैनल का नया और बेहतर संदर्भ मेन्यू

नए DOM संदर्भ मेन्यू में बताया गया है.

हमने डीओएम पैनल में सबसे ज़्यादा इस्तेमाल की गई कार्रवाइयों का विश्लेषण किया है और इस नतीजे पर पहुंचे हैं कि राइट क्लिक वाला संदर्भ मेन्यू व्यवस्थित और फिर से व्यवस्थित होना चाहिए.

अब किसी एलिमेंट को तुरंत छिपाना या मिटाना, :ऐक्टिव या :होवर करें या उसके एचटीएमएल में बदलाव करना जैसी खास स्थिति को ट्रिगर करना बहुत आसान हो गया है. साथ ही, अगर आप ट्रैकपैड का इस्तेमाल कर रहे हैं और आपको दायां क्लिक नहीं करना है, तो चुने गए एलिमेंट के बगल में मौजूद तीन छोटे बिंदुओं पर क्लिक करें.

रिसोर्स पैनल की मदद से सर्विस वर्कर को डीबग करना

सर्विस वर्कर सेट अप करने के बाद वे शानदार तरीके से काम करते हैं, लेकिन शुरुआत में ही उन्हें अपने सिर को बांधना मुश्किल हो सकता है. इसकी वजह यह थी कि उन्हें डीबग करने के लिए DevTools को छोड़ना और नई ब्राउज़र विंडो में chrome://serviceworker-internals/ खोलना ज़रूरी था.

संसाधनों में सर्विस वर्कर

अब नहीं! अब आप सीधे संसाधन पैनल से, मौजूदा डोमेन के लिए सर्विस वर्कर को डीबग कर सकते हैं. इस पर अब भी काम चल रहा है, लेकिन पहले की तुलना में काफ़ी सुधार किया जा रहा है.

सभी रंग: कलर पिकर में मटीरियल डिज़ाइन शेड

कुछ हफ़्ते पहले हमने कलर पिकर में मटीरियल डिज़ाइन पैलेट जोड़ा था, ताकि आपको प्राइमरी और बोल्ड रंग मिल सकें. पूरा पेज डिज़ाइन करने के लिए, आपको मटीरियल डिज़ाइन के सभी शेड का पूरा ऐक्सेस चाहिए. इसलिए, हमने उन्हें तैयार कर लिया है.

शेड को ऊपर लाने के लिए, मुख्य रंगों में से किसी एक को दबाकर रखें और उसके बजाय किसी शेड पर क्लिक करें.

सेटिंग में जाकर, ब्लैकबॉक्स JavaScript लाइब्रेरी ज़्यादा आसानी से उपलब्ध कराएं

JavaScript Blackboxing काफ़ी समय से काम कर रहा है, लेकिन इसे खोजना बहुत आसान नहीं था. यह एक ऐसी सुविधा है, जिससे आप किसी पेज पर स्क्रिप्ट को ब्लैकबॉक्स करके सिर्फ़ अपने लिखे गए कोड पर फ़ोकस कर सकते हैं (और रैपिंग कोड को छिपा सकते हैं).

हमने इसे सेटिंग में भेज दिया है. इसे आज़माएं:

ब्लैकबॉक्सिंग

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

  • क्या आपको रेंडरिंग टॉगल का ऐक्सेस नहीं मिल रहा है? रेंडरिंग सेटिंग को DevTools के मुख्य मेन्यू में ("ज़्यादा टूल" में जाकर) भेज दिया गया है. आम तौर पर इस्तेमाल होने वाले संदिग्ध (जैसे, FPS मीटर) के अलावा, हमने "प्रिंट मीडिया को एम्युलेट करें" सेक्शन को भी वहां भेज दिया है.
  • क्या आप खोज बार (खोज क्वेरी डालने वाला बार) में chrome://inspect टाइप करके थक गए हैं? डिवाइसों की जांच करें विकल्प अब “ज़्यादा टूल” में, नए मुख्य मेन्यू में भी मिल सकता है.
  • क्या आपने रेंडरिंग या खोज जैसे बंद किए जा सकने वाले इन ड्रॉर टैब में से किसी एक को गलती से बंद कर दिया है? अब बाईं ओर नए मेन्यू का इस्तेमाल करके, उन्हें फिर से खोला जा सकता है.

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

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