DevTools (Chrome 73) में नया क्या है

Kayce Basques

Chrome 73 में DevTools के लिए उपलब्ध नई सुविधाओं के बारे में यहां बताया गया है.

इस रिलीज़ नोट का वीडियो वर्शन

लॉगपॉइंट

Logpoints का इस्तेमाल करके, कंसोल में मैसेज लॉग करें. इससे आपके कोड में console.log() कॉल की वजह से गड़बड़ी नहीं होगी.

लॉगपॉइंट जोड़ने के लिए:

1. उस लाइन नंबर पर राइट क्लिक करें जहां आपको Logpoint जोड़ना है.

   

   पहली इमेज. लॉगपॉइंट जोड़ना

2. लॉगपॉइंट जोड़ें को चुनें. ब्रेकपॉइंट एडिटर पॉप-अप होता है.

   

   दूसरी इमेज. ब्रेकपॉइंट एडिटर

3. ब्रेकपॉइंट एडिटर में, वह एक्सप्रेशन डालें जिसे आपको कंसोल में लॉग करना है.

   

   तीसरी इमेज. लॉगपॉइंट एक्सप्रेशन टाइप करना

   अहम जानकारी! किसी वैरिएबल (जैसे, TodoApp) को लॉग आउट करते समय, वैरिएबल को किसी ऑब्जेक्ट (जैसे, {TodoApp}) में रैप करें, ताकि Console में उसका नाम और वैल्यू लॉग आउट की जा सके. इस सिंटैक्स के बारे में ज़्यादा जानने के लिए, Always Log Objects और Object Property Value Shorthand देखें.

4. सेव करने के लिए, Enter दबाएं या ब्रेकपॉइंट एडिटर के बाहर क्लिक करें. लाइन नंबर के ऊपर मौजूद नारंगी रंग का बैज, Logpoint को दिखाता है.

   

   चौथी इमेज. लाइन 174 पर नारंगी रंग का Logpoint बैज

जब लाइन फिर से लागू होती है, तब DevTools, Logpoint एक्सप्रेशन के नतीजे को कंसोल में लॉग करता है.

पांचवीं इमेज. Console में Logpoint एक्सप्रेशन का नतीजा

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #700519 देखें.

जांच मोड में ज़्यादा जानकारी वाले टूलटिप

किसी नोड की जांच करते समय, DevTools अब एक बड़ी टूलटिप दिखाता है. इसमें फ़ॉन्ट का साइज़, फ़ॉन्ट का रंग, कंट्रास्ट रेशियो, और बॉक्स मॉडल के डाइमेंशन जैसी आम तौर पर ज़रूरी जानकारी होती है.

छठी इमेज. किसी नोड की जांच करना

किसी नोड की जांच करने के लिए:

1. जांच करें पर क्लिक करें.

   अहम जानकारी! जांच करें पर कर्सर घुमाकर, इसका कीबोर्ड शॉर्टकट देखें.

2. अपने व्यूपोर्ट में, नोड पर कर्सर घुमाएं.

कोड कवरेज का डेटा एक्सपोर्ट करना

अब कोड कवरेज के डेटा को JSON फ़ाइल के तौर पर एक्सपोर्ट किया जा सकता है. JSON ऐसा दिखता है:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url, सीएसएस या JavaScript फ़ाइल का वह यूआरएल है जिसका DevTools ने विश्लेषण किया है. ranges में, इस्तेमाल किए गए कोड के हिस्सों के बारे में बताया गया है. start, इस्तेमाल की गई रेंज के लिए शुरुआती ऑफ़सेट है. end एंडिंग ऑफ़सेट है. text फ़ाइल का पूरा टेक्स्ट है.

ऊपर दिए गए उदाहरण में, 0 से 21 की रेंज body { margin: 1em; } से मेल खाती है और 45 से 67 की रेंज h1 { color: #317EFB; } से मेल खाती है. दूसरे शब्दों में कहें, तो पहले और आखिरी नियम सेट का इस्तेमाल किया गया था, लेकिन बीच वाले का नहीं.

पेज लोड होने पर कितना कोड इस्तेमाल किया जाता है, इसका विश्लेषण करने और डेटा एक्सपोर्ट करने के लिए:

1. कमांड मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   सातवीं इमेज. कमांड मेन्यू

2. coverage टाइप करना शुरू करें. इसके बाद, कवरेज दिखाएं को चुनें और फिर Enter दबाएं.

   

   आठवीं इमेज. कवरेज दिखाएं

   कवरेज टैब खुलता है.

   

   नौवीं इमेज. कवरेज टैब

3. फिर से लोड करें पर क्लिक करें. DevTools, पेज को फिर से लोड करता है. साथ ही, यह रिकॉर्ड करता है कि शिप किए गए कोड की तुलना में कितना कोड इस्तेमाल किया गया.

4. डेटा को JSON फ़ाइल के तौर पर एक्सपोर्ट करने के लिए, एक्सपोर्ट करें पर क्लिक करें.

कोड कवरेज की सुविधा, Puppeteer में भी उपलब्ध है. यह ब्राउज़र ऑटोमेशन टूल है, जिसे DevTools टीम मैनेज करती है. कवरेज देखें.

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #717195 देखें.

कीबोर्ड की मदद से Console में नेविगेट करना

अब Console में नेविगेट करने के लिए, कीबोर्ड का इस्तेमाल किया जा सकता है. यहां एक उदाहरण दिया गया है.

Shift+Tab दबाने पर, फ़ोकस आखिरी मैसेज (या किसी एक्सप्रेशन के आकलन का नतीजा) पर चला जाता है. अगर मैसेज में लिंक शामिल हैं, तो सबसे पहले आखिरी लिंक हाइलाइट होता है. Enter दबाने पर, लिंक नए टैब में खुलता है. लेफ़्ट ऐरो बटन दबाने से, पूरा मैसेज हाइलाइट हो जाता है (आकृति 13 देखें).

ग्यारहवीं इमेज. किसी लिंक पर फ़ोकस करना

ऊपर ऐरो बटन दबाने से, फ़ोकस अगले लिंक पर चला जाता है.

इमेज 12. किसी दूसरे लिंक पर फ़ोकस करना

ऊपर वाले ऐरो बटन को फिर से दबाने पर, पूरे मैसेज पर फ़ोकस हो जाता है.

13वीं इमेज. पूरे मैसेज पर फ़ोकस करना

राइट ऐरो बटन दबाने पर, छोटा किया गया स्टैक ट्रेस (या ऑब्जेक्ट, ऐरे वगैरह) बड़ा हो जाता है.

चौथी इमेज. छोटे किए गए स्टैक ट्रेस को बड़ा करना

लेफ़्ट ऐरो की दबाने पर, बड़ा किया गया मैसेज या नतीजा छोटा हो जाता है.

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #865674 देखें.

कलर पिकर में AAA कंट्रास्ट रेशियो लाइन

कलर पिकर अब दूसरी लाइन दिखाता है. इससे पता चलता है कि कौनसे रंग, एएए कंट्रास्ट रेशियो के सुझाव के मुताबिक हैं. एए लाइन, Chrome 65 से मौजूद है.

15वीं इमेज. AA लाइन (ऊपर) और AAA लाइन (नीचे)

दोनों लाइनों के बीच के रंग, AA के सुझाव के मुताबिक हैं, लेकिन AAA के सुझाव के मुताबिक नहीं हैं. जब कोई रंग एएए सुझाव के मुताबिक होता है, तो उस रंग के एक ही तरफ़ मौजूद सभी रंग भी सुझाव के मुताबिक होते हैं. उदाहरण के लिए, आकृति 15 में, निचली लाइन के नीचे मौजूद सभी चीज़ें AAA के मुताबिक हैं. वहीं, ऊपरी लाइन के ऊपर मौजूद कोई भी चीज़ AA के सुझाव के मुताबिक नहीं है.

अहम जानकारी! आम तौर पर, AAA के सुझावों के मुताबिक टेक्स्ट की मात्रा बढ़ाकर, अपने पेजों को अच्छी तरह से पढ़ा जा सकता है. अगर किसी वजह से एएए के सुझाव को पूरा नहीं किया जा सकता, तो कम से कम एए के सुझाव को पूरा करने की कोशिश करें.

इस सुविधा को ऐक्सेस करने का तरीका जानने के लिए, कलर पिकर में कंट्रास्ट रेशियो देखें.

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #879856 देखें.

जियोलोकेशन की जानकारी के लिए, कस्टम ओवरराइड सेव करना

सेंसर टैब में, अब कस्टम जियोलोकेशन ओवरराइड सेव किए जा सकते हैं.

1. कमांड मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   16वीं इमेज. कमांड मेन्यू

2. sensors टाइप करें, सेंसर दिखाएं को चुनें, और Enter दबाएं. सेंसर टैब खुलता है.

   

   17वीं इमेज. सेंसर टैब

3. जियोलोकेशन सेक्शन में जाकर, मैनेज करें पर क्लिक करें. सेटिंग > जियोलोकेशन खुल जाएगा.

   

   18वीं इमेज. सेटिंग में मौजूद 'भौगोलिक स्थान' टैब

4. जगह की जानकारी जोड़ें पर क्लिक करें.

5. जगह का नाम, अक्षांश, और देशांतर डालें. इसके बाद, जोड़ें पर क्लिक करें.

   

   19वीं इमेज. कस्टम जियोलोकेशन जोड़ना

बग की रिपोर्ट करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #649657 देखें.

कोड फ़ोल्डिंग

सोर्स और नेटवर्क पैनल में अब कोड फ़ोल्ड करने की सुविधा काम करती है.

20वीं इमेज. 54 से 65 तक की लाइनों को छोटा कर दिया गया है

कोड फ़ोल्डिंग की सुविधा चालू करने के लिए:

1. सेटिंग खोलने के लिए, F1 दबाएं.
2. सेटिंग > प्राथमिकताएं > सोर्स में जाकर, कोड फ़ोल्डिंग चालू करें.

कोड के किसी ब्लॉक को छोटा करने के लिए:

1. उस लाइन नंबर पर कर्सर घुमाएं जहां से ब्लॉक शुरू होता है.
2. फ़ोल्ड करें पर क्लिक करें.

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #328431 देखें.

मैसेज टैब

फ़्रेम टैब का नाम बदलकर मैसेज टैब कर दिया गया है. यह टैब सिर्फ़ नेटवर्क पैनल में उपलब्ध होता है. ऐसा तब होता है, जब वेब सॉकेट कनेक्शन की जांच की जा रही हो.

21वीं इमेज. मैसेज टैब

बग की शिकायत करने या सुधार के सुझाव देने के लिए, Chromium की समस्या #802182 देखें.

झलक दिखाने वाले चैनल डाउनलोड करना

Chrome Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को आज़माने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!

Chrome DevTools टीम से संपर्क करना

नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.