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

Sofia Emelianova
Sofia Emelianova

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

खास जानकारी

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

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

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

'डेवलपर के लिए संसाधन' खोलें और स्थिति देखें

सोर्स मैप के लोड होने की स्थिति देखने के लिए:

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

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

स्टेटस और गड़बड़ी कॉलम.

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

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

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

सोर्स मैप लोड करने से जुड़ी समस्या हल करना

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

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

'वेबसाइट के ज़रिए लोड करें' चेकबॉक्स

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

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

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

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

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

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

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

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

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

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