Chrome DevTools का इस्तेमाल करके, अपने इंटरैक्टिव कैनवस कैनवस ऐप्लिकेशन को डीबग किया जा सकता है. Chrome डीबगर, Google Home या Google Nest स्मार्ट डिसप्ले पर 30 या उसके बाद के वर्शन (यह अपडेट अक्टूबर 2020 से रोल आउट होना शुरू होगा) और 1.50 या उसके बाद के वर्शन वाले कास्ट फ़र्मवेयर वर्शन पर काम करता है. अपने स्मार्ट डिसप्ले पर, System settings / About device में दिए गए वर्शन देखे जा सकते हैं.
अपना एनवायरमेंट सेट अप करें
डीबग करने से पहले, सही तरीके से अपना एनवायरमेंट सेट अप करने के लिए यह तरीका अपनाएं:
- Actions Console में सिम्युलेटर में जाकर, अपने ऐक्शन को टेस्ट करने के लिए चालू करें.
- अपनी मशीन को उसी स्थानीय एरिया नेटवर्क से कनेक्ट करें जिससे आपने Google Home या Google Nest डिवाइस को कनेक्ट किया है.
- पक्का करें कि आपका नेटवर्क, डिवाइसों के बीच पैकेट को ब्लॉक न करे.
- Actions Console और Google Home या Google Nest डिवाइस पर एक ही Google खाते से लॉग इन करें.
एनवायरमेंट तैयार हो जाने के बाद, आपके पास टेस्ट के लिए स्मार्ट डिसप्ले पर अपनी कार्रवाई लॉन्च करने का विकल्प होगा.
डीबगर वेब ऐप्लिकेशन को डीबगर से कनेक्ट करें
अपने कैनवस वेब ऐप्लिकेशन को Chrome DevTools डीबगर से कनेक्ट करने के लिए, यह तरीका अपनाएं:
- अपनी स्थानीय डेवलपमेंट मशीन में, Google Chrome ब्राउज़र इंस्टॉल और लॉन्च करें.
- Chrome इंस्पेक्टर लॉन्च करने के लिए, अपने Chrome ब्राउज़र के पता फ़ील्ड में
chrome://inspect#devicesडालें. आपको पेज पर डिवाइसों की सूची दिखेगी. हालांकि, कैनवस एचटीएमएल यूआरएल, टेस्ट Google Home या Google Nest डिवाइस के नाम के नीचे दिखना चाहिए. ध्यान दें कि Chrome को आपके नेटवर्क पर मौजूद सभी डिवाइस खोजने में कुछ समय लग सकता है. - Chrome DevTools को लॉन्च करने के लिए, एचटीएमएल यूआरएल के नीचे मौजूद
inspectलिंक पर क्लिक करें.
Chrome DevTools अपनी विंडो में लोड होता है. डिवाइस पर रेंडर किए गए वेब GUI को देखने के लिए, स्क्रीनकास्ट (
) बटन पर क्लिक करें. नीचे दिया गया स्क्रीनशॉट दिखाता है कि
Chrome DevTools में आपका वेब ऐप्लिकेशन कैसा दिखता है:
ध्यान दें कि आपके कैनवस वेब ऐप्लिकेशन को iframe में लोड किया गया है.
डीबग करने से जुड़ी सलाह
डीबग करते समय इन अतिरिक्त सुझावों को ध्यान में रखें:
- Chrome DevTools में पेज को रीफ़्रेश करें. ऐसा करने के लिए, डेवलपमेंट यूआरएल के नए कोड के साथ, स्थानीय शिपिंग ऐप्लिकेशन का कंटेनर फिर से लोड करें.
- यह देख लें कि आपका JavaScript ऐप्लिकेशन बिना किसी गड़बड़ी के लोड हो रहा हो. ऐसा करने के लिए, DevTools पेज के कंसोल सेक्शन की जांच करें.
- अपने वेब ऐप्लिकेशन कोड में
debugger;का इस्तेमाल करके, अपने कोड में मैन्युअल ब्रेकपॉइंट जोड़ें. - अगर आपको लंबे समय तक
chrome://inspect#devicesमें अपना डिवाइस नहीं दिखता है, तो जांच करने वाले पेज को रीफ़्रेश करें. - परफ़ॉर्मेंस से जुड़ी किसी भी समस्या को डीबग करने के लिए, रनटाइम परफ़ॉर्मेंस विश्लेषण का इस्तेमाल शुरू करना लेख में दिए गए निर्देशों का पालन करें.
- स्मार्ट डिसप्ले मेमोरी सीमित होने की वजह से, अगर आपका वेब ऐप्लिकेशन 200 एमबी से ज़्यादा चलता है, तो वह बंद हो सकता है या हो सकता है. मेमोरी से जुड़ी किसी भी समस्या को डीबग करने के लिए, मेमोरी से जुड़ी समस्याओं को ठीक करने का ट्यूटोरियल देखें.
- कार्रवाइयों को पूरा करने से जुड़ी किसी भी गड़बड़ी की जांच करने के लिए, Google के Actions on Google सर्वर के वेबहुक लॉग या Stackdriver लॉग से भेजे गए अनुरोधों को देखें.