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

Kayce Basques

Chrome 73 में DevTools में जो नई सुविधाएं जोड़ी गई हैं उनके बारे में यहां बताया गया है.

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

लॉगपॉइंट

console.log() कॉल के साथ अपने कोड को गड़बड़ किए बिना, Console में मैसेज लॉग करने के लिए लॉगपॉइंट का इस्तेमाल करें.

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

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

   

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

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

   

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

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

   

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

   सलाह! किसी वैरिएबल (उदाहरण के लिए, TodoApp) को लॉग आउट करते समय, Console में उसके नाम और वैल्यू को लॉग आउट करने के लिए, वैरिएबल को किसी ऑब्जेक्ट (उदाहरण के लिए, {TodoApp}) में रैप करें. इस सिंटैक्स के बारे में ज़्यादा जानने के लिए, ऑब्जेक्ट को हमेशा लॉग करें और ऑब्जेक्ट प्रॉपर्टी की वैल्यू का शॉर्टहैंड देखें.

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

   

   चौथी इमेज. 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 देखें).

11वीं इमेज. किसी लिंक पर फ़ोकस करना

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

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

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

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

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

इमेज 14. छोटा किया गया स्टैक ट्रेस बड़ा करना

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

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

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

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

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

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

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

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

बग की शिकायत करने या सुधार के सुझाव देने के लिए, 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 कैनरी, डेवलपर या बीटा का इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. साथ ही, इससे आपको अपनी साइट पर उपयोगकर्ताओं से पहले समस्याओं का पता लगाने में मदद मिलती है!

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

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

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

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

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