google-chrome-extension
Chrome एक्सटेंशन को डीबग करना
खोज…
अपने एक्सटेंशन को डिबग करने के लिए डेवलपर टूल का उपयोग करना
क्रोम एक्सटेंशन को अधिकतम 4 भागों में अलग किया जाता है:
- पृष्ठभूमि पृष्ठ
- पॉपअप पेज
- एक या अधिक सामग्री स्क्रिप्ट
- विकल्प पृष्ठ
प्रत्येक भाग, चूंकि वे सहज रूप से अलग हैं, व्यक्तिगत डिबगिंग की आवश्यकता होती है।
ध्यान रखें कि ये पृष्ठ अलग-अलग हैं, जिसका अर्थ है कि चर उनके बीच सीधे साझा नहीं किए जाते हैं और इन पृष्ठों में से एक में एक console.log() किसी अन्य भाग के लॉग में दिखाई नहीं देगा।
क्रोम devtools का उपयोग:
Chrome एक्सटेंशन अन्य वेबपृष्ठों और वेबपृष्ठों के समान डीबग किए जाते हैं। डिबगिंग को अक्सर क्रोम के डेवॉल्ट्स इंस्पेक्टर के उपयोग से खोला जाता है, जो क्रमशः विंडोज़ और मैक के लिए कीबोर्ड शॉर्टकट का उपयोग करके खोला जाता है: ctrl + shift + i और cmd + shift + i या पेज पर राइट क्लिक करके और निरीक्षण का चयन करें।
निरीक्षक से एक डेवलपर तत्वों एचटीएमएल जांच कर सकते हैं और कैसे सीएसएस उन्हें प्रभावित करता है, या जावास्क्रिप्ट चरों के मान का निरीक्षण किया और किसी से आउटपुट को पढ़ने के लिए कंसोल का उपयोग console.log() एस डेवलपर (रों) की स्थापना की।
Chrome Devtools में इंस्पेक्टर के उपयोग के बारे में अधिक जानकारी पाई जा सकती है।
पॉपअप, विकल्प पृष्ठ, और क्रोम का उपयोग करके सुलभ अन्य पृष्ठों का निरीक्षण: //.....yourExtensionId...::
पॉपअप पेज और विकल्प पेज को खुले रहने पर केवल निरीक्षण करके उन्हें एक्सेस किया जा सकता है।
अतिरिक्त HTML पृष्ठ जो एक्सटेंशन का हिस्सा हैं, लेकिन न तो पॉपअप हैं और न ही विकल्प पृष्ठ भी उसी तरह डिबग किए गए हैं।
पृष्ठभूमि पृष्ठ का निरीक्षण:
अपने बैकग्राउंड पेज को एक्सेस करने के लिए आपको पहले क्रोम एक्सटेंशन पेज को क्रोम: // एक्सटेंशन / पर नेविगेट करना होगा। सुनिश्चित करें कि 'डेवलपर मोड' चेकमार्क सक्षम है। 
फिर अपनी पृष्ठभूमि पृष्ठ का निरीक्षण करने के लिए "विचारों का निरीक्षण करें " के पास अपनी पृष्ठभूमि स्क्रिप्ट पर क्लिक करें। 
सामग्री स्क्रिप्ट का निरीक्षण:
कंटेंट स्क्रिप्ट उन वेबसाइटों के साथ-साथ चलती हैं, जिन्हें उन्होंने डाला था। आप पहले उस वेबसाइट का निरीक्षण करके सामग्री स्क्रिप्ट का निरीक्षण कर सकते हैं जहाँ सामग्री स्क्रिप्ट डाली गई है। कंसोल में आप अपने एक्सटेंशन के द्वारा किसी भी console.log() देख पाएंगे, लेकिन आप सामग्री स्क्रिप्ट के चर को बदलने या निरीक्षण करने में सक्षम नहीं होंगे। 
इसे ठीक करने के लिए आपको उस ड्रॉप डाउन पर क्लिक करना होगा जो आमतौर पर 'top' पर सेट होता है और एक्सटेंशन की सूची से अपना एक्सटेंशन चुनें। 
वहां से आपके एक्सटेंशन के भीतर चर तक पहुंच होगी।