Google Chat ऐप्लिकेशन डीबग करना

Google Chat के ऐप्लिकेशन डेवलपर के तौर पर, आपको बदलावों की जांच करने या मुश्किल समस्याओं को हल करने के लिए, कोड को डीबग करना पड़ सकता है. Chat ऐप्लिकेशन कई तरीकों से डीबग किए जा सकते हैं. यह इस बात पर निर्भर करता है कि आपके ऐप्लिकेशन का आर्किटेक्चर, ऐप्लिकेशन क्या करता है, ऐप्लिकेशन कैसे डिप्लॉय किया गया है, और आपकी प्राथमिकताएं क्या हैं.

इस पेज पर बताया गया है कि ngrok का इस्तेमाल करके एचटीटीपी चैट ऐप्लिकेशन को कैसे डीबग किया जाता है. यह यूनिफ़ाइड इनग्रेस प्लैटफ़ॉर्म है. इसका इस्तेमाल करके स्थानीय डेवलपमेंट एनवायरमेंट की जांच की जा सकती है. इस गाइड की मदद से, स्थानीय एनवायरमेंट में कोड में होने वाले बदलावों को टेस्ट किया जा सकता है. साथ ही, रिमोट एनवायरमेंट में समस्याओं को हल किया जा सकता है.

लोकल डेवलपमेंट एनवायरमेंट से डीबग करना

इस सेक्शन में, आपको अपने Chat ऐप्लिकेशन से इंटरैक्ट करने का विकल्प मिलता है. यह सुविधा आपके स्थानीय वातावरण में काम करती है.

लोकल डेवलपमेंट एनवायरमेंट से डीबग करना

पहला डायग्राम. लोकल डेवलपमेंट एनवायरमेंट में डीबग करें.

वर्कशॉप

Node.js

Python

Java

ज़रूरी शर्तें

Node.js

Python

Java

localhost सेवा सार्वजनिक रूप से उपलब्ध कराना

आपको अपने आस-पास के नेटवर्क को इंटरनेट से कनेक्ट करना होगा, ताकि Chat ऐप्लिकेशन इसे ऐक्सेस कर सके. ngrok ऐप्लिकेशन का इस्तेमाल किसी सार्वजनिक यूआरएल पर किए गए एचटीटीपी अनुरोधों को आपके लोकल एनवायरमेंट में रीडायरेक्ट करने के लिए किया जाता है.

  1. अपने लोकल एनवायरमेंट में बनाए गए ब्राउज़र में, अपने ngrok खाते में साइन इन करें.
  2. ऐप्लिकेशन इंस्टॉल करें और अपने authtoken को अपने स्थानीय सिस्टम में सेट अप करें.
  3. अपने ngrok खाते में एक स्टैटिक डोमेन बनाएं. इस गाइड में दिए गए निर्देशों में इसे NGROK_STATIC_DOMAIN के तौर पर दिखाया गया है.

Chat ऐप्लिकेशन को कॉन्फ़िगर करें

Chat ऐप्लिकेशन को कॉन्फ़िगर करें, ताकि इसके सभी एचटीटीपी अनुरोध आपके स्टैटिक डोमेन पर भेजे जा सकें.

  1. Google Cloud Console में, Google Chat API पेज खोलें:

    Google Chat API पेज पर जाएं

  2. कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. इंटरैक्टिव सुविधाएं > कनेक्शन सेटिंग पर जाएं और टेक्स्ट फ़ील्ड ऐप्लिकेशन का यूआरएल की वैल्यू को इस पर सेट करें:

    https://NGROK_STATIC_DOMAIN
    

    अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें.

  4. सेव करें पर क्लिक करें.

Chat ऐप्लिकेशन अपने सभी एचटीटीपी अनुरोधों को स्टैटिक डोमेन पर भेजता है

दूसरी इमेज. Chat ऐप्लिकेशन अपने सभी एचटीटीपी अनुरोधों को स्टैटिक डोमेन पर भेजता है. ngrok सार्वजनिक सेवा, Chat ऐप्लिकेशन और स्थानीय रूप से लागू होने वाले ऐप्लिकेशन कोड के बीच पुल की तरह काम करती है.

Chat ऐप्लिकेशन को टेस्ट करें

अपने Chat ऐप्लिकेशन को स्थानीय तौर पर डिप्लॉय, कॉन्फ़िगर, टेस्ट, डीबग, और अपने-आप लोड किया जा सकता है.

Node.js

  1. GitHub से googleworkspace/google-chat-samples रिपॉज़िटरी का क्लोन अपने लोकल एनवायरमेंट में बनाएं. इसमें लागू करने के लिए, ऐप्लिकेशन का कोड शामिल है:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  2. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

    1. नई विंडो में, google-chat-samples/node/basic-app फ़ोल्डर खोलें.
    2. package.json फ़ाइल में दो स्क्रिप्ट जोड़कर, अपने-आप फिर से लोड होने वाले डीबग के लिए ऐप्लिकेशन को कॉन्फ़िगर करें:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    3. रूट डायरेक्ट्री से, यह ऐप्लिकेशन इंस्टॉल करें:

      npm install
      
    4. Debug Watch नाम का ऐसा लॉन्च बनाएं और कॉन्फ़िगर करें जो रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाकर, debug-watch स्क्रिप्ट को ट्रिगर करे:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. ऐसा ब्रेकपॉइंट जोड़ें जो index.js फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता हो. साथ ही, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन के साथ, चलना और डीबग करना शुरू करें. ऐप्लिकेशन अभी चल रहा है और 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      ऐप्लिकेशन चल रहा है और
पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

      तीसरी इमेज. ऐप्लिकेशन, 9000 पोर्ट पर एचटीटीपी अनुरोधों को चला रहा है और सुन रहा है.

  3. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

    `ngrok` सर्वर वाला टर्मिनल. यह सर्वर चल रहा है और
रीडायरेक्ट कर रहा है

    चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

  4. ngrok ऐप्लिकेशन की मदद से, आपके localhost पर एक वेब इंटरफ़ेस भी शुरू किया गया है. इसे किसी ब्राउज़र में खोलकर, सभी गतिविधियों पर नज़र रखी जा सकती है.

    `ngrok` ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा

    पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

  5. अपने Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज स्पेस में, Hello टाइप करें और enter दबाएं. आपका Chat ऐप्लिकेशन जवाब नहीं देता, क्योंकि इसे आसानी से डीबग किया जा रहा है.

  6. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

    प्रोग्राम को उस ब्रेकपॉइंट पर रोक दिया जाता है
जिसे ट्रिगर किया गया था

    छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

  7. जब Google Chat का समय खत्म होने से पहले, Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तब Chat ऐप्लिकेशन Your message : Hello का जवाब देता है.

  8. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

    `ngrok` ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से आने वाला एचटीटीपी अनुरोध

    सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

  9. ऐप्लिकेशन का व्यवहार बदलने के लिए, Your message को index.json में से Here was your message इनलाइन 35 से बदलें. फ़ाइल को सेव करने पर, nodemon अपडेट किए गए सोर्स कोड के साथ ऐप्लिकेशन को अपने-आप फिर से लोड करता है और Visual Studio Code डीबग मोड में बना रहता है.

    ऐप्लिकेशन चल रहा है और पोर्ट पर
`9000` पर एचटीटीपी अनुरोधों को सुन रहा है. साथ ही, कोड में बदलाव भी लोड हो रहा है

    आठवां इमेज. ऐप्लिकेशन चल रहा है और कोड में बदलाव लोड किए गए 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

  10. इस बार, स्पेस में दूसरा मैसेज Hello भेजने के बजाय, आपके पास अपने लोकल एनवायरमेंट में मौजूद ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुनने और Replay पर क्लिक करने का विकल्प होता है. पिछली बार की तरह ही, आपका Chat ऐप्लिकेशन जवाब नहीं दे रहा है क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

  11. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, मैसेज Here was your message : Hello मैसेज के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.

Python

  1. ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल के लिए, नए उपयोगकर्ता क्रेडेंशियल हासिल करें:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    ऐप्लिकेशन के क्लाउड प्रोजेक्ट के लिए, PROJECT_ID की जगह प्रोजेक्ट आईडी डालें.

  2. GitHub से googleworkspace/google-chat-samples रिपॉज़िटरी का क्लोन अपने लोकल एनवायरमेंट में बनाएं. इसमें ऐप्लिकेशन कोड शामिल है:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

    1. नई विंडो में, google-chat-samples/python/avatar-app फ़ोल्डर खोलें.
    2. Python env के लिए, नया वर्चुअल एनवायरमेंट बनाएं और इसे चालू करें:

      virtualenv env
      source env/bin/activate
      
    3. वर्चुअल एनवायरमेंट में pip का इस्तेमाल करके, सभी प्रोजेक्ट डिपेंडेंसी इंस्टॉल करें:

      pip install -r requirements.txt
      
    4. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Debug Watch नाम का ऐसा लॉन्च कॉन्फ़िगर करें जो वर्चुअल एनवायरमेंट env पर डीबग मोड में पोर्ट 9000 पर मॉड्यूल functions-framework से ऐप्लिकेशन को ट्रिगर करे:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. ऐसा ब्रेकपॉइंट जोड़ें जो main.py फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता हो. साथ ही, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन के साथ, चलना और डीबग करना शुरू करें. ऐप्लिकेशन अभी चल रहा है और 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      ऐप्लिकेशन चल रहा है और
पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

      तीसरी इमेज. ऐप्लिकेशन, 9000 पोर्ट पर एचटीटीपी अनुरोधों को चला रहा है और सुन रहा है.

  4. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

    `ngrok` सर्वर वाला टर्मिनल. यह सर्वर चल रहा है और
रीडायरेक्ट कर रहा है

    चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

  5. ngrok ऐप्लिकेशन की मदद से, आपके localhost पर एक वेब इंटरफ़ेस भी शुरू किया गया है. इसे किसी ब्राउज़र में खोलकर, सभी गतिविधियों पर नज़र रखी जा सकती है.

    `ngrok` ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा

    पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

  6. अपने Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज स्पेस में, Hey! टाइप करें और enter दबाएं. आपका Chat ऐप्लिकेशन जवाब नहीं दे रहा, क्योंकि इसे आसानी से डीबग किया जा रहा है.

  7. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

    प्रोग्राम को उस ब्रेकपॉइंट पर रोक दिया जाता है
जिसे ट्रिगर किया गया था

    छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

  8. अगर Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तो Google Chat का समय खत्म होने से पहले, Chat ऐप्लिकेशन आपके मैसेज में आपका नाम और अवतार फ़ोटो के साथ जवाब देता है.

  9. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

    `ngrok` ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से आने वाला एचटीटीपी अनुरोध

    सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

  10. ऐप्लिकेशन का व्यवहार बदलने के लिए, Hello को main.py फ़ाइल की Hey इनलाइन 51 से बदलें. फ़ाइल सेव करने पर, Visual Studio Code अपडेट किए गए सोर्स कोड के साथ ऐप्लिकेशन को अपने-आप फिर से लोड करता है और डीबग मोड में बना रहता है.

    ऐप्लिकेशन चल रहा है और पोर्ट पर
`9000` पर एचटीटीपी अनुरोधों को सुन रहा है. साथ ही, कोड में बदलाव भी लोड हो रहा है

    आठवां इमेज. ऐप्लिकेशन चल रहा है और कोड में बदलाव लोड किए गए 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

  11. इस बार, स्पेस में दूसरा मैसेज Hey! भेजने के बजाय, आपके पास अपने लोकल एनवायरमेंट में मौजूद ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुनने और Replay पर क्लिक करने का विकल्प होता है. पिछली बार की तरह, आपका Chat ऐप्लिकेशन जवाब नहीं देता, क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

  12. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, मैसेज के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.

Java

  1. ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल के लिए, नए उपयोगकर्ता क्रेडेंशियल हासिल करें:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    ऐप्लिकेशन के क्लाउड प्रोजेक्ट के लिए, PROJECT_ID की जगह प्रोजेक्ट आईडी डालें.

  2. अपने स्थानीय एनवायरमेंट में GitHub से googleworkspace/google-chat-samples रिपॉज़िटरी का क्लोन बनाएं. इसमें ऐप्लिकेशन कोड शामिल है:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

    1. नई विंडो में, google-chat-samples/java/avatar-app फ़ोल्डर खोलें.
    2. pom.xml फ़ाइल में Cloud Functions फ़्रेमवर्क बिल्ड प्लगिन function-maven-plugin जोड़कर, पोर्ट 9000 पर HelloChat ऐप्लिकेशन को चलाने के लिए, Maven प्रोजेक्ट को कॉन्फ़िगर करें:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>HelloChat</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      
    3. अब इसे स्थानीय तौर पर डीबग मोड में लॉन्च किया जा सकता है:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      
    4. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Remote Debug Watch नाम का ऐसा लॉन्च कॉन्फ़िगर करें जो पोर्ट 8000 के साथ पहले लॉन्च किए गए ऐप्लिकेशन से जुड़ा हो:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      
    5. ऐसा ब्रेकपॉइंट जोड़ें जो HelloChat.java फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता है. साथ ही, पहले जोड़े गए Remote Debug Watch कॉन्फ़िगरेशन के साथ, अटैच और डीबग करना शुरू करें. ऐप्लिकेशन अब चल रहा है और 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      ऐप्लिकेशन चल रहा है और
पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

      तीसरी इमेज. वह ऐप्लिकेशन चल रहा है और 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

  4. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

    `ngrok` सर्वर वाला टर्मिनल. यह सर्वर चल रहा है और
रीडायरेक्ट कर रहा है

    चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

  5. ngrok ऐप्लिकेशन की मदद से, आपके localhost पर एक वेब इंटरफ़ेस भी शुरू किया गया है. इसे किसी ब्राउज़र में खोलकर, सभी गतिविधियों पर नज़र रखी जा सकती है.

    `ngrok` ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा

    पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

  6. अपने Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज स्पेस में, Hey! टाइप करें और enter दबाएं. आपका Chat ऐप्लिकेशन जवाब नहीं दे रहा, क्योंकि इसे आसानी से डीबग किया जा रहा है.

  7. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

    प्रोग्राम को उस ब्रेकपॉइंट पर रोक दिया जाता है
जिसे ट्रिगर किया गया था

    छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

  8. अगर Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तो Google Chat का समय खत्म होने से पहले, Chat ऐप्लिकेशन आपके मैसेज में आपका नाम और अवतार फ़ोटो के साथ जवाब देता है.

  9. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

    `ngrok` ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से आने वाला एचटीटीपी अनुरोध

    सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

  10. ऐप्लिकेशन के व्यवहार में बदलाव के लिए, Hello को HelloChat.java फ़ाइल की Hey इनलाइन 55 से बदलें. इसके बाद, mvnDebug प्रोसेस को रीस्टार्ट करें. इसके बाद, डीबग फिर से अटैच करके फिर से शुरू करें. इसके लिए, Remote Debug Watch को फिर से लॉन्च करें.

  11. इस बार, स्पेस में दूसरा मैसेज Hey! भेजने के बजाय, आपके पास अपने लोकल एनवायरमेंट में मौजूद ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुनने और Replay पर क्लिक करने का विकल्प होता है. पिछली बार की तरह ही, आपका Chat ऐप्लिकेशन जवाब नहीं दे रहा है क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

  12. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, मैसेज के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.

रिमोट एनवायरमेंट से डीबग करें

इस सेक्शन में, अपने Chat ऐप्लिकेशन का इस्तेमाल किया जा सकता है. यह सुविधा रिमोट एनवायरमेंट पर काम करती है.

रिमोट एनवायरमेंट से डीबग
करें

नौवीं इमेज. रिमोट एनवायरमेंट से डीबग करें.

ज़रूरी शर्तें

  • Chat ऐप्लिकेशन में डायरेक्ट मैसेज स्पेस होता है. इसके लिए, क्विकस्टार्ट गाइड के Chat ऐप्लिकेशन की जांच करें सेक्शन को फ़ॉलो करें और Chat ऐप्लिकेशन खोजें.
  • किसी दिए गए पोर्ट पर डीबगर की सुविधा के साथ, रिमोट एनवायरमेंट में चल रहा आपका ऐप्लिकेशन, इस गाइड के निर्देशों में इसे REMOTE_DEBUG_PORT के तौर पर दिखाया गया है.
  • आपका लोकल एनवायरमेंट, आपके रिमोट एनवायरमेंट में ssh हो सकता है.
  • आपके लोकल एनवायरमेंट में सेट अप किया गया IDE, जो डीबग कर सकता है. हम उदाहरण के लिए, इस गाइड में मौजूद Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग सुविधाओं का इस्तेमाल कर रहे हैं.

अपने लोकल और रिमोट एनवायरमेंट को कनेक्ट करें

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

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

इन्हें बदलें:

  • LOCAL_DEBUG_PORT: आपके स्थानीय सिस्टम में डीबग पोर्ट.
  • REMOTE_USERNAME: आपके रिमोट एनवायरमेंट में उपयोगकर्ता नाम.
  • REMOTE_ADDRESS: आपके रिमोट एनवायरमेंट का पता.
  • REMOTE_DEBUG_PORT: आपके रिमोट एनवायरमेंट में डीबग पोर्ट.

आपके लोकल एनवायरमेंट में मौजूद डीबग पोर्ट को अब आपके रिमोट एनवायरमेंट में मौजूद डीबग पोर्ट से लिंक कर दिया गया है.

डीबग करना शुरू करें

अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE की मदद से, ये काम करें:

  1. नई विंडो में, अपने ऐप्लिकेशन का सोर्स कोड खोलें.
  2. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Debug Remote नाम का ऐसा लॉन्च कॉन्फ़िगर करें जो आपके लोकल एनवायरमेंट में डीबग पोर्ट से जुड़ता हो:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    अपने लोकल एनवायरमेंट में LOCAL_DEBUG_PORT को डीबग पोर्ट से बदलें.

  3. अपने ऐप्लिकेशन के सोर्स कोड में ऐसा ब्रेकपॉइंट जोड़ें जो एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता है. साथ ही, पहले जोड़े गए Debug Remote कॉन्फ़िगरेशन के साथ, चलना और डीबग करना शुरू करें.

अपने Chat ऐप्लिकेशन से डायरेक्ट मैसेज स्पेस में, जिस किसी भी चीज़ की जांच करनी है उसे टाइप करें और enter दबाएं. आपके Chat ऐप्लिकेशन ने जवाब नहीं दिया है, क्योंकि इसे Visual Studio Code IDE में डीबग किया जा रहा है.