डेवलपर रिसॉर्स: सोर्स मैप देखें और मैन्युअल तरीके से लोड करें

Sofia Emelianova
Sofia Emelianova

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

DevTools खोलने पर, यह सोर्स मैप (अगर कोई है) को लोड करने की कोशिश करता है. अगर ऐसा नहीं हो पाता है, तो कंसोल इससे मिलती-जुलती गड़बड़ी लॉग करता है.

कंसोल में सोर्स मैप लोड होने में गड़बड़ी हुई.

डेवलपर रिसॉर्स पैनल टैब में, सोर्स मैप लोड होने का स्टेटस देखा जा सकता है. यहां तक कि मैन्युअल तौर पर सोर्स मैप को लोड भी किया जा सकता है.

डेवलपर रिसॉर्स खोलें और स्टेटस देखें

सोर्स मैप के लोड होने का स्टेटस देखने के लिए:

  1. DevTools खोलें, सोर्स मैप चालू करना पक्का करें और तीन बिंदु वाला मेन्यू. > ज़्यादा टूल > डेवलपर रिसॉर्स पर जाएं.
  2. टेबल में, इन कॉलम में मौजूद वैल्यू देखें:

    • स्थिति से पता चलता है कि सोर्स मैप लोड हुआ या नहीं.
    • अगर कोई गड़बड़ी का मैसेज मिलता है, तो उसे पढ़ने के लिए गड़बड़ी.

स्थिति और गड़बड़ी कॉलम.

यूआरएल या गड़बड़ी के हिसाब से रिसॉर्स फ़िल्टर करें

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

ऐसे सोर्स मैप फ़िल्टर किए जा रहे हैं जिनके यूआरएल में 'js' नहीं है.

समस्या हल करें

डिफ़ॉल्ट रूप से, DevTools वेबसाइट के बजाय सोर्स मैप का अनुरोध करता है. ऐसे अनुरोधों को क्रॉस-ऑरिजिन माना जा सकता है और हो सकता है कि वे पूरे न हों.

वेबसाइट का सोर्स मैप देखने का अनुरोध करने के लिए, डेवलपर रिसॉर्स के सबसे ऊपर दाएं कोने में, चेकबॉक्स. टारगेट के ज़रिए लोड करना चालू करें को चुनें.

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

सोर्स मैप को मैन्युअल तरीके से लोड करें

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

  1. उन टूल का इस्तेमाल करके सोर्स मैप जनरेट करें जो उन पर काम कर सकते हैं.
  2. सोर्स मैप को स्थानीय तौर पर होस्ट करें.
  3. अपने पेज पर DevTools खोलें और पक्का करें कि सोर्स मैप चालू हों.
  4. डिप्लॉय की गई (प्रोसेस की गई) फ़ाइल को Sources में खोलें. इसके बाद, एडिटर में उस पर राइट क्लिक करें और मेन्यू से सोर्स मैप जोड़ें चुनें.

    मेन्यू से 'सोर्स मैप जोड़ें' चुनें.

  5. टेक्स्ट बॉक्स में, सोर्स मैप का यूआरएल डालें और जोड़ें पर क्लिक करें.

    सोर्स मैप का यूआरएल तय करना.

  6. देखें कि सोर्स मैप, डेवलपर रिसॉर्स में और फ़ाइल ट्री में ओरिजनल फ़ाइल (डिप्लॉय किए गए फ़ाइल से मैप किया गया) में दिखता है या नहीं.

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

  7. अपनी ओरिजनल फ़ाइल को डीबग करें.