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

Kayce Basques

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

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

लॉगपॉइंट

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

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

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

   

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

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

   

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

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

   

   तीसरी इमेज. Logpoint एक्सप्रेशन टाइप करना

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

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

   

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

अगली बार जब लाइन को चलाया जाएगा, तो DevTools, 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. Command मेन्यू खोलने के लिए, 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 लाइन (सबसे नीचे)

दो लाइनों के बीच के रंग, ऐसे रंगों को दिखाते हैं जो एए के सुझाव के मुताबिक हैं, लेकिन एएए के सुझाव के मुताबिक नहीं हैं. जब कोई रंग 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. Fold पर क्लिक करें.

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

मैसेज टैब

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

इमेज 21. मैसेज टैब

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

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

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

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

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

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

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

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