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

Chrome 73 में DevTools में नया क्या है, उसकी जानकारी यहां दी गई है.

इन प्रॉडक्ट की जानकारी का वीडियो वर्शन

लॉगपॉइंट

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

अगली बार लाइन के एक्ज़ीक्यूट होने पर, DevTools लॉगपॉइंट एक्सप्रेशन के नतीजे को कंसोल.

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

गड़बड़ियों की रिपोर्ट करने या सुधार के सुझाव देने के लिए, 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 मेन्यू खोलने के लिए, Command+Shift+P (Mac) दबाएं.

   

   सातवीं इमेज. निर्देश मेन्यू

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

   

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

   इससे, कवरेज टैब खुल जाएगा.

   

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

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

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

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

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

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

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

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 के सुझाव को पूरा नहीं किया जा सकता तो कम से कम AA के सुझाव के हिसाब से करें.

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

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

कस्टम भौगोलिक स्थान के बदलावों को सेव करें

सेंसर टैब अब आपको पसंद के मुताबिक भौगोलिक स्थिति के बदलावों को सेव करने की सुविधा देता है.

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

   

   इमेज 16. निर्देश मेन्यू

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

   

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

3. जगह से जुड़ी जानकारी सेक्शन में, मैनेज करें पर क्लिक करें. सेटिंग > इसके बाद, जगह से जुड़ी जानकारी खुल जाएगी.

   

   आकृति 18. सेटिंग में भौगोलिक-स्थान टैब

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

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

   

   इमेज 19. कस्टम भौगोलिक स्थान जोड़ना

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

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

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

इमेज 20. 54 से 65 तक की लाइनों को फ़ोल्ड किया गया है

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

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

कोड के किसी ब्लॉक को फ़ोल्ड करने के लिए:

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

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

मैसेज टैब

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

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

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

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

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

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

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

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

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

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