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

नोड में बेहतर तरीके से बदलाव करने के लिए, डीओएम पैनल के नए संदर्भ मेन्यू का इस्तेमाल करें. संसाधन पैनल की मदद से, सीधे तौर पर सेवाओं के वर्कर को डीबग करें. कलर पिकर में, Material Design के सभी शेड में से कोई एक चुनें. ब्लैकबॉक्स JS लाइब्रेरी को आसानी से.

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

नया डीओएम कॉन्टेक्स्ट मेन्यू.

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

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

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

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

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

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

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

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

शेड देखने के लिए, किसी प्राइमरी कलर को दबाकर रखें और फिर उस शेड पर क्लिक करें.

सेटिंग में जाकर, Blackbox JavaScript लाइब्रेरी को ज़्यादा आसानी से इस्तेमाल किया जा सकता है

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

हमने इसे अब सेटिंग में ले जाया है. इसे आज़माएं:

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

बाकी के सबसे अच्छे

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

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

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