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

सोफ़िया एमेलियानोवा
सोफ़िया इमेलियानोवा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. अपनी मूल फ़ाइल को डीबग करने के लिए आगे बढ़ें.