Chrome DevTools की मदद से अनुमान लगाने के नियमों को डीबग करना

Barry Pollard

अनुमान के नियमों का इस्तेमाल, अगले पेज के नेविगेशन को पहले से लोड करने और पहले से रेंडर करने के लिए किया जा सकता है. इस बारे में पिछली पोस्ट में बताया गया है. इससे पेज तुरंत या बहुत तेज़ी से लोड हो सकते हैं. साथ ही, इन अतिरिक्त पेज नेविगेशन के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाया जा सकता है.

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

Chrome की टीम, अनुमान लगाने के नियमों की डीबगिंग के लिए, DevTools की सहायता को बेहतर बनाने के लिए लगातार काम कर रही है. इस पोस्ट में, आपको इन टूल का इस्तेमाल करने के सभी तरीके दिखेंगे. इनसे, आपको यह समझने में मदद मिलेगी कि किसी पेज के अनुमान के नियम क्या हैं, वे काम क्यों नहीं कर रहे हैं, और डेवलपर कब DevTools के ज़्यादा जाने-पहचाने विकल्पों का इस्तेमाल कर सकते हैं और कब नहीं.

क्या आपको पढ़ने के बजाय, वीडियो देखना ज़्यादा पसंद है? इस दस्तावेज़ में दी गई जानकारी के बारे में खास जानकारी पाने के लिए, पेज को तेज़ी से लोड करने के लिए, अनुमानित नेविगेशन को डीबग करने के बारे में DevTools के सुझावों वाला वीडियो देखें.

"pre-" टर्म की जानकारी

"प्री-" वाले कई शब्द ऐसे हैं जो भ्रम पैदा करते हैं. इसलिए, हम इनके बारे में बताने से शुरुआत करेंगे:

• पहले से फ़ेच करना: आने वाले समय में परफ़ॉर्मेंस को बेहतर बनाने के लिए, किसी संसाधन या दस्तावेज़ को पहले से फ़ेच करना. इस पोस्ट में, अनुमान के नियमों वाले एपीआई का इस्तेमाल करके दस्तावेज़ों को पहले से लोड करने के बारे में बताया गया है. आम तौर पर, सब-रिसॉर्स को पहले से लोड करने के लिए, <link rel="prefetch"> विकल्प का इस्तेमाल किया जाता है. हालांकि, यह विकल्प पुराना है और इस पोस्ट में इसके बारे में नहीं बताया गया है.
• पेज को पहले से रेंडर करना: यह सुविधा, पेज को पहले से लोड करने की सुविधा से बेहतर है. यह पूरे पेज को इस तरह रेंडर करती है जैसे उपयोगकर्ता उस पर जा चुका हो. हालांकि, इसे बैकग्राउंड में रेंडर करने की प्रोसेस में छिपाकर रखा जाता है, ताकि उपयोगकर्ता उस पेज पर जाने पर उसे तुरंत दिखाया जा सके. फिर से, यह दस्तावेज़, इस एपीआई के पुराने <link rel="prerender"> विकल्प के बजाय, इसके नए वर्शन के अनुमान के नियमों से जुड़ा है. यह अब पूरी तरह से प्री-रेंडर नहीं करता.
• अनुमानित नेविगेशन: अनुमान के नियमों से ट्रिगर होने वाले, प्रीफ़ेच और प्री-रेंडर करने के नए विकल्पों के लिए एक साथ इस्तेमाल होने वाला शब्द.
• पहले से लोड करना: यह एक ऐसा शब्द है जिसका इस्तेमाल कई टेक्नोलॉजी और प्रोसेस के लिए किया जा सकता है. जैसे, <link rel="preload">, पहले से लोड करने वाला स्कैनर, और सेवा वर्कर नेविगेशन के लिए पहले से लोड की गई कॉन्टेंट. इन आइटम के बारे में यहां नहीं बताया जाएगा. हालांकि, इस शब्द को "संदिग्ध नेविगेशन" शब्द से अलग करने के लिए शामिल किया गया है.

ध्यान दें: ज़्यादा जानकारी के लिए, प्रीलोड करने से जुड़े टेक्नोलॉजी लैंडस्केप का दस्तावेज़ देखें.

prefetch के लिए अनुमान लगाने के नियम

अनुमान लगाने के नियमों का इस्तेमाल, नेविगेशन के अगले दस्तावेज़ को पहले से लोड करने के लिए किया जा सकता है. उदाहरण के लिए, किसी पेज में यह JSON डालने पर, next.html और next2.html को पहले से फ़ेच कर लिया जाएगा:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

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

नेविगेशन प्रीफ़ेच के लिए अनुमान लगाने के नियमों का इस्तेमाल करने पर, पुराने <link rel="prefetch"> सिंटैक्स की तुलना में कुछ फ़ायदे मिलते हैं. जैसे, ज़्यादा जानकारी देने वाला एपीआई और नतीजे, एचटीटीपी डिस्क कैश के बजाय मेमोरी कैश में सेव किए जाते हैं.

prefetch के अनुमान लगाने के नियमों को डीबग करना

अनुमान के नियमों से ट्रिगर की गई प्रीफ़ेच, नेटवर्क पैनल में अन्य फ़ेच की तरह ही देखी जा सकती हैं:

Chrome DevTools में नेटवर्क पैनल, जिसमें पहले से फ़ेच किए गए दस्तावेज़ दिख रहे हैं

लाल रंग में हाइलाइट किए गए दो अनुरोध, पहले से फ़ेच किए गए संसाधन हैं. इसकी जानकारी टाइप कॉलम से मिलती है. इन्हें Lowest प्राथमिकता के साथ फ़ेच किया जाता है, क्योंकि ये आने वाले समय में नेविगेशन के लिए होते हैं. साथ ही, Chrome मौजूदा पेज के संसाधनों को प्राथमिकता देता है.

किसी एक पंक्ति पर क्लिक करने से, Sec-Purpose: prefetch एचटीटीपी हेडर भी दिखता है. इससे सर्वर साइड पर इन अनुरोधों की पहचान की जा सकती है:

Chrome DevTools में, Sec-Purpose को 'प्रीफ़ेच करें' पर सेट करके हेडर को प्रीफ़ेच करना

अनुमान के हिसाब से लोड होने वाले यूआरएल टैब की मदद से prefetch को डीबग करना

Chrome DevTools के ऐप्लिकेशन पैनल में, बैकग्राउंड सेवाएं सेक्शन में एक नया अनुमानित लोड सेक्शन जोड़ा गया है. इससे, अनुमान लगाने से जुड़े नियमों को डीबग करने में मदद मिलती है:

Chrome DevTools के 'संभावित लोड' टैब, प्रीफ़ेच नियम दिखाते हैं

अहम जानकारी: संभावित लोड टैब, अनुमान के नियमों के साथ काम करने के लिए होते हैं. इन नियमों की मदद से, पेज को प्रीफ़ेच (पेज के कॉन्टेंट को लोड होने से पहले ही उसे डाउनलोड करना) और प्री-रेंडर (पेज के कॉन्टेंट को लोड होने से पहले ही उसे दिखाना) किया जाता है. इन नियमों को "संभावित नेविगेशन" भी कहा जाता है. इन टैब का इस्तेमाल, <link rel="preload"> का इस्तेमाल करके सब-रिसॉर्स को पहले से लोड करने, <link rel="prefetch"> का इस्तेमाल करके सब-रिसॉर्स को पहले से लोड करने या <link rel="prerender"> के पुराने वर्शन बिना स्टेटस के पहले से लोड करने को डीबग करने के लिए नहीं किया जा सकता.

इस सेक्शन में तीन टैब उपलब्ध हैं:

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

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

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

अनुमान टैब में, सभी टारगेट यूआरएल की सूची होती है. साथ ही, इसमें यह जानकारी भी होती है कि किस कार्रवाई (प्रीफ़ेच या प्री-रेंडर) के लिए ये यूआरएल चुने गए हैं, वे किस नियम सेट से आए हैं (एक पेज पर कई नियम सेट हो सकते हैं), और हर अनुमान का स्टेटस:

Chrome DevTools के 'अनुमान' टैब में, पहले से फ़ेच किए गए यूआरएल और उनकी स्थिति दिख रही है

यूआरएल के ऊपर मौजूद ड्रॉप-डाउन का इस्तेमाल करके, सभी नियम सेट या किसी खास नियम सेट के यूआरएल दिखाए जा सकते हैं. इसके नीचे, सभी यूआरएल की सूची दी गई है. किसी यूआरएल पर क्लिक करने से, आपको ज़्यादा जानकारी मिलती है.

इस स्क्रीनशॉट में, next3.html पेज के लोड न होने की वजह देखी जा सकती है. यह पेज मौजूद नहीं है और इसलिए, यह 404 कोड दिखाता है, जो नॉन-2xx एचटीटीपी स्टेटस कोड है.

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

प्रीफ़ेच किए गए पेज पर जाने पर, आपको 'पेज लोड हो गया' मैसेज दिखेगा:

Chrome DevTools के 'संदिग्ध लोड' टैब में, प्रीफ़ेच की प्रोसेस पूरी होने की जानकारी

अनुमान

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

DevTools में, मेल न खाने वाले यूआरएल हाइलाइट किए जाते हैं

उदाहरण के लिए, यहां हमने next4.html पर नेविगेट किया है, लेकिन सिर्फ़ next.html, next2.html या next3.html को प्रीफ़ेच किया गया है. इसलिए, हम देख सकते हैं कि यह उन तीनों नियमों में से किसी से भी पूरी तरह मेल नहीं खाता.

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

Chrome DevTools, अनुमानित लोड टैब में मैच न होने वाला यूआरएल दिखा रहा है

Chrome की टीम इन मामलों में यूज़र इंटरफ़ेस को बेहतर बनाने के लिए, इस सुविधा पर काम कर रही है.

अनुमानित लोड टैब, अनुमान लगाने के नियमों को डीबग करने और JSON में सिंटैक्स की गड़बड़ियों का पता लगाने के लिए काफ़ी मददगार होते हैं.

प्रीफ़ेच के लिए, नेटवर्क पैनल ज़्यादा जाना-पहचाना है. प्रीफ़ेच न हो पाने का उदाहरण देखने के लिए, प्रीफ़ेच के लिए 404 कोड यहां देखें:

Chrome DevTools का नेटवर्क पैनल, जिसमें प्रीफ़ेच करने में हुई गड़बड़ी दिख रही है

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

prerender के लिए अनुमान लगाने के नियम

पेज को पहले से रेंडर करने के अनुमान से जुड़े नियम, पेज को पहले से लोड करने के अनुमान से जुड़े नियमों के जैसे ही सिंटैक्स का पालन करते हैं. उदाहरण के लिए:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

यह नियम सेट, चुने गए पेजों को पूरी तरह से लोड और रेंडर करने की प्रोसेस को ट्रिगर करता है. हालांकि, इसके लिए कुछ शर्तें लागू होती हैं. इससे, तुरंत लोड होने का अनुभव मिल सकता है. हालांकि, इसके लिए ज़्यादा संसाधनों की ज़रूरत होगी.

हालांकि, प्रीफ़ेच के उलट, इन्हें नेटवर्क पैनल में नहीं देखा जा सकता. इसकी वजह यह है कि इन्हें Chrome में, रेंडर करने की एक अलग प्रोसेस में फ़ेच और रेंडर किया जाता है. इससे, अनुमान के आधार पर पेज को पहले से रेंडर करने के नियमों को डीबग करने के लिए, अनुमान के आधार पर लोड टैब ज़्यादा अहम हो जाते हैं.

अनुमान के हिसाब से लोड हुए यूआरएल टैब की मदद से prerender को डीबग करना

अनुमानित लोड वाली स्क्रीन का इस्तेमाल, अनुमान के आधार पर पेज को पहले से रेंडर करने के नियमों के लिए किया जा सकता है. इसकी जानकारी, एक ऐसे डेमो पेज के साथ दी गई है जो तीन पेजों को पहले से लोड करने के बजाय, उन्हें पहले से रेंडर करने की कोशिश करता है:

Chrome DevTools, पहले से रेंडर करने के अनुमान के नियमों वाले पेज के लिए, टैब को अनुमान के आधार पर लोड करता है

यहां हम फिर से देखते हैं कि तीन में से एक यूआरएल प्री-रेंडर नहीं हो पाया. डेवलपर, 2 रेडी, 1 फ़ेल लिंक पर क्लिक करके, अनुमान टैब में हर यूआरएल की जानकारी पा सकते हैं.

Chrome 121 में, हमने दस्तावेज़ के नियमों के लिए सहायता लॉन्च की थी. इससे ब्राउज़र, यूआरएल के किसी खास सेट को सूची में शामिल करने के बजाय, पेज पर मौजूद एक ही ऑरिजिन के लिंक से इन्हें चुन सकता है:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

इस उदाहरण में, एक ही ऑरिजिन वाले सभी लिंक चुने जाते हैं. हालांकि, /not-safe-to-prerender से शुरू होने वाले लिंक को प्री-रेंडर के उम्मीदवारों के तौर पर नहीं चुना जाता.

यह प्री-रेंडर eagerness को moderate पर भी सेट करता है. इसका मतलब है कि लिंक पर कर्सर घुमाने या उस पर क्लिक करने पर, नेविगेशन प्री-रेंडर हो जाते हैं.

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

Chrome DevTools के 'अनुमान' टैब में, ट्रिगर नहीं हुए कई यूआरएल

इनके लिए प्रीरेंडर करने की प्रोसेस शुरू नहीं हुई है, इसलिए स्टेटस ट्रिगर नहीं हुआ है. हालांकि, लिंक पर कर्सर घुमाने पर, हमें हर यूआरएल के प्री-रेंडर होने की वजह से स्थिति में बदलाव दिखता है:

Chrome DevTools के 'अनुमान' टैब में, पहले से रेंडर किए गए पेजों को ट्रिगर किया गया

Chrome ने प्री-रेंडर करने की सुविधा पर सीमाएं तय की हैं. इनमें moderate ईगरनेस के लिए, ज़्यादा से ज़्यादा दो प्री-रेंडर शामिल हैं. इसलिए, तीसरे लिंक पर कर्सर घुमाने के बाद, हमें उस यूआरएल के लिए गड़बड़ी की वजह दिखती है:

Chrome DevTools के 'अनुमान' टैब में, प्रीलोड न हो पाने वाले आइटम की जानकारी

DevTools के अन्य पैनल की मदद से prerender को डीबग करना

पहले से लोड किए गए पेजों के उलट, पहले से रेंडर किए गए पेज, नेटवर्क पैनल जैसे DevTools पैनल में, रेंडर करने की मौजूदा प्रोसेस में नहीं दिखेंगे. इसकी वजह यह है कि ये पेज, पर्दे के पीछे अपने रेंडरर में रेंडर किए जाते हैं.

हालांकि, अब DevTools पैनल में इस्तेमाल किए जाने वाले रेंडरर को बदला जा सकता है. इसके लिए, सबसे ऊपर दाईं ओर मौजूद ड्रॉप-डाउन मेन्यू का इस्तेमाल करें या पैनल के सबसे ऊपर मौजूद यूआरएल को चुनकर जांच करें को चुनें:

Chrome DevTools में अब उन रेंडरर को स्विच किया जा सकता है जिनके लिए जानकारी दिखती है

यह ड्रॉप-डाउन और चुनी गई वैल्यू, अन्य सभी पैनल में भी शेयर की जाती है. जैसे, नेटवर्क पैनल, जहां आपको यह दिख सकता है कि अनुरोध किया गया पेज पहले से रेंडर किया गया है:

Chrome DevTools का नेटवर्क पैनल, जिसमें पहले से रेंडर किए गए पेज के लिए नेटवर्क अनुरोध दिखाए जा रहे हैं

इन रिसॉर्स के एचटीटीपी हेडर को देखकर, हम यह देख सकते हैं कि ये सभी Sec-Purpose: prefetch;prerender हेडर के साथ सेट होंगे:

Chrome DevTools का नेटवर्क पैनल, जिसमें पहले से रेंडर किए गए पेज के लिए Sec-Purpose हेडर दिख रहा है

इसके अलावा, एलिमेंट पैनल में भी पेज का कॉन्टेंट देखा जा सकता है. जैसे, यहां दिए गए स्क्रीनशॉट में, <h1> एलिमेंट को पहले से रेंडर किए गए पेज के लिए दिखाया गया है:

पहले से रेंडर किए गए पेज के लिए, Chrome DevTools का एलिमेंट पैनल

इसके अलावा, कंसोल पैनल में भी, पहले से रेंडर किए गए पेज से जनरेट हुए कंसोल लॉग देखे जा सकते हैं:

Chrome DevTools कंसोल पैनल, जिसमें पहले से रेंडर किए गए पेज का कंसोल आउटपुट दिख रहा है

पहले से रेंडर किए गए पेज पर, अनुमान लगाने के नियमों को डीबग करना

पिछले सेक्शन में, पहले से रेंडर किए गए पेजों को डीबग करने का तरीका बताया गया है. हालांकि, पहले से रेंडर किए गए पेज भी, Analytics कॉल करके या कंसोल में लॉग करके, डीबग करने से जुड़ी जानकारी दे सकते हैं. कंसोल को पिछले सेक्शन में बताए गए तरीके से देखा जा सकता है.

इसके अलावा, जब कोई उपयोगकर्ता किसी पेज पर जाता है और वह पेज पहले से रेंडर हो जाता है, तो अनुमानित लोड टैब में यह स्टेटस दिखेगा. साथ ही, यह भी दिखेगा कि पेज को पहले से रेंडर किया गया है या नहीं. अगर वीडियो को पहले से रेंडर नहीं किया जा सका, तो इसकी वजह बताई जाएगी:

Chrome DevTools का 'स्पकुलेटिव लोड' टैब, जिसमें पहले से रेंडर किए गए पेज के लोड होने और न होने, दोनों की जानकारी दिख रही है

इसके अलावा, जैसा कि प्रीफ़ेच के लिए होता है—अनुमान लगाने के ऐसे नियमों वाले पेज से नेविगेट करने पर जो मौजूदा पेज से मेल नहीं खाते, तो आपको यह दिखाने की कोशिश की जाएगी कि यूआरएल, अनुमान के आधार पर लोड किए गए पेज टैब में मौजूद पिछले पेज के अनुमान लगाने के नियमों में शामिल यूआरएल से मेल क्यों नहीं खाते:

Chrome DevTools में यूआरएल मेल न खाने की जानकारी

नतीजा

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

आभार

Unsplash पर न्यूबल्सन फ़र्नांडीस की थंबनेल इमेज.