HTTP Google Workspace eklentilerini test edin ve hata ayıklayın

Google Workspace eklentisi geliştiricisi olarak veya karmaşık sorunları giderebilirsiniz. Google Workspace eklentilerinde hata ayıklama uygulamanızın mimarisine, ekibinizin hangi sisteme uygulamanızın nasıl dağıtıldığı ve tercihleriniz.

Bu sayfada, HTTP Google Workspace eklentisindeki hataları ayıklamak için Ngrok eklentisidir. Bu birleşik giriş platformu, yerel site bağlantılarını test etmek için ortamları için değerlidir. Bu kılavuzda, yerel bir uzaktaki bir ortamda çalışarak sorunları gidermenize yardımcı olabilir.

Yerel geliştirme ortamından hata ayıkla

Bu bölümde, Google Workspace Eklentiniz ile yerel ortamınızda yürütülür.

Yerel geliştirmeden hata ayıkla
ortam

Şekil 1. Yerel geliştirme ortamında hata ayıklayın.

Ön koşullar

Node.js

Python

Java

Yerel ana makine hizmetini herkese açık hale getir

Yerel ortamınızı internete bağlamanız gerekir. Böylece Google Workspace Eklentisi buna erişebilir. ngrok uygulaması kullanılıyor özelliğini kullanabilirsiniz.

  1. Yerel ortamınızdaki bir tarayıcıda ngrok hesabınızda oturum açın.
  2. Uygulamayı yükleyin ve authtoken cihazınızı yerel bir ortamdan bahsetmek istiyorum.
  3. Şurada bir statik alan oluşturun: ngrok hesabı, referans: NGROK_STATIC_DOMAIN inceleyin.

Eklenti dağıtımını oluşturma ve yükleme

  1. Google Workspace eklentisini, tüm HTTP isteklerini statik alanınız. Dağıtım dosyanız aşağıdaki gibi görünmelidir:

    {
      "oauthScopes": [
        "https://www.googleapis.com/auth/workspace.linkpreview",
        "https://www.googleapis.com/auth/workspace.linkcreate"
      ],
      "addOns": {
        "common": {
          "name": "Manage support cases",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
          "layoutProperties": {
            "primaryColor": "#dd4b39"
          }
        },
        "docs": {
          "linkPreviewTriggers": [
            {
              "runFunction": "NGROK_STATIC_DOMAIN",
              "patterns": [
                {
                  "hostPattern": "example.com",
                  "pathPrefix": "support/cases"
                },
                {
                  "hostPattern": "*.example.com",
                  "pathPrefix": "cases"
                },
                {
                  "hostPattern": "cases.example.com"
                }
              ],
              "labelText": "Support case",
              "localizedLabelText": {
                "es": "Caso de soporte"
              },
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ],
          "createActionTriggers": [
            {
              "id": "createCase",
              "labelText": "Create support case",
              "localizedLabelText": {
                "es": "Crear caso de soporte"
              },
              "runFunction": "$URL2",
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ]
        }
      }
    }
    

    NGROK_STATIC_DOMAIN yerine ngrok hesabı.

  2. Kullanılacak Google Cloud projesini ayarlayın:

    gcloud config set project PROJECT_ID
    
  3. Uygulama Varsayılanı için kullanılacak yeni kullanıcı kimlik bilgileri edinin Kimlik bilgileri:

    gcloud auth application-default login
    

    PROJECT_ID değerini şununla değiştirin: proje kimliği Google Cloud projesi için

  4. Dağıtımı oluşturun:

    gcloud workspace-add-ons deployments create manageSupportCases \
        --deployment-file=DEPLOYMENT_FILE_PATH
    

    DEPLOYMENT_FILE_PATH yerine dağıtım dosyası olabilir.

  5. Dağıtımı yükleyin:

    gcloud workspace-add-ons deployments install manageSupportCases
    

Google Workspace eklentisi, tüm HTTP isteklerini
statik alan

Şekil 2. Google Workspace eklentisi, tüm HTTP isteklerini gönderir anahtar/değer çiftini ekleyin. ngrok kamu hizmeti Google Workspace Eklentisi ve çalışan uygulama kodu yerel olarak.

Google Workspace eklentisini test etme

Uygulamanızı yerel olarak dağıtabilir, test edebilir, hata ayıklayabilir ve otomatik olarak yeniden yükleyebilirsiniz. Google Workspace eklentisi.

Node.js

  1. Yerel ortamınızda yüklü Visual Studio Code IDE'den şunları yapın:

    1. Yeni bir pencerede klasörü açın add-ons-samples/node/3p-resources
    2. Uygulamayı yerel çalıştırma ve otomatik yeniden yükleme hata ayıklaması için yapılandırarak package.json dosyasına bir bağımlılık ve iki komut dosyası ekleyerek:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      
    3. Kök dizinden uygulamayı yükleyin:

      npm install
      
    4. Debug Watch adında bir lansman oluşturup yapılandırarak debug-watch komut dosyasını kullanarak .vscode/launch.json kök dizin:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. HTTP isteğinin işlenmesini duraklatan ve index.js dosyasını açın ve çalışmaya ve hata ayıklama Daha önce Debug Watch yapılandırması eklendi. Uygulama artık 9000 bağlantı noktasında HTTP isteklerini çalıştırma ve dinleme.

      Uygulama çalışıyor ve
bağlantı noktası "9000"

      Şekil 3. Uygulama çalışıyor ve HTTP'yi dinliyor 9000 bağlantı noktasındaki istekleriniz.

  2. ngrok uygulamasını yerel ortamınızda başlatın:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını şu statik alanla değiştirin: ngrok hesabınız. Tüm istekler artık yerel sayfanıza yönlendiriliyor ortam ve uygulama tarafından kullanılan bağlantı noktası.

    "ngrok" sunucusunun çalıştığı terminal ve
yönlendirme

    4.Şekil ngrok sunucusunun çalıştırıldığı ve yönlendirildiği terminal.

  3. ngrok tarafından, yerel ana bilgisayarınızda da bir web arayüzü başlatıldı uygulamasını bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve HTTP göstermeyen web arayüzü
istekler

    5. Şekil. ngrok uygulaması tarafından barındırılan web arayüzü hiç HTTP isteği gösterilmiyor.

  4. Destek kaydı URL'sini yeni bir Test kullanıcısı hesabıyla Google Dokümanı:

    • Yeni bir Google Dokümanı oluşturun.

      Yeni bir Google Dokümanı oluşturma

    • Aşağıdaki bağlantıyı yazıp enter düğmesine basın:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Bağlantıyı tıklayın.

  5. Yerel ortamınızdaki Visual Studio Code içinde şunları görebilirsiniz: yürütme, ayarlanan kesme noktasında duraklatılır.

    Yürütme işlemi belirlenen kesme noktasında duraklatıldı
ayarla

    6. Şekil. Yürütme, ayarlanan kesme noktasında duraklatıldı.

  6. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde Google Workspace Eklentileri, Google Workspace Eklentisini zaman aşımına uğratmadan önce Google Dokümanındaki bağlantı önizlemesini önbellekten görüntüler.

  7. HTTP istek ve yanıt günlüklerini web arayüzünden kontrol edebilirsiniz yerel ortamınızdaki ngrok uygulaması tarafından barındırılır.

    "ngrok" tarafından barındırılan web arayüzünden gelen HTTP isteği
uygulama

    7.Şekil Search Ads 360'ın barındırdığı web arayüzünden HTTP isteği ngrok uygulaması.

  8. Uygulama davranışını değiştirmek için Case öğesini Case: satır içi ile değiştirin 51 / index.js. Dosyayı kaydettiğinizde otomatik olarak nodemon uygulamayı güncellenmiş kaynak koduyla yeniden yükler ve Visual Studio Code, hata ayıklama modunda kaldı.

    Uygulama çalışıyor ve bağlantı noktasındaki HTTP isteklerini dinliyor
Kod değişikliğini içeren "9000"
yüklendi

    8. Şekil. Uygulama çalışıyor ve HTTP isteklerini dinliyor kod değişikliği yüklenmiş olarak 9000 bağlantı noktasında.

  9. Bu kez bağlantıyı tıklayıp bağlantıda birkaç saniye beklemek yerine, Web'de günlüğe kaydedilen son HTTP isteğini seçebilirsiniz. yerel ortamınızda ngrok uygulaması tarafından barındırılan arayüz ve Replay'ı tıklayın. Geçen seferki gibi Google Workspace Eklentiniz şu anda hata ayıklama işlemi devam ettiğinden yanıt vermiyor.

  10. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın yanıt oluşturduğu yerel ortamınızı Önizleme kartının güncellenmiş sürümüne.

Python

  1. Yerel ortamınızda yüklü Visual Studio Code IDE'den şunları yapın:

    1. Yeni bir pencerede klasörü açın add-ons-samples/python/3p-resources/create_link_preview
    2. Python env için yeni bir sanal ortam oluşturun ve bu ortamı etkinleştirin:

      virtualenv env
      source env/bin/activate
      
    3. Sanal ortamda pip kullanarak tüm proje bağımlılıklarını yükleyin ortam:

      pip install -r requirements.txt
      
    4. Kök dizinde .vscode/launch.json dosyasını oluşturun ve uygulamayı tetikleyen Debug Watch adlı bir başlatma yapılandırması yapılandır hata ayıklama modunda 9000 bağlantı noktasındaki functions-framework modülünden env sanal ortamında:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. HTTP isteğinin işlenmesini duraklatan ve main.py dosyasını açın ve çalışmaya ve hata ayıklama Daha önce Debug Watch yapılandırması eklendi. Uygulama şu anda 9000 bağlantı noktasında HTTP isteklerini çalıştırma ve dinleme.

      Uygulama çalışıyor ve
bağlantı noktası "9000"

      Şekil 3. Uygulama çalışıyor ve HTTP'yi dinliyor 9000 bağlantı noktasındaki istekleriniz.

  2. ngrok uygulamasını yerel ortamınızda başlatın:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını şu statik alanla değiştirin: ngrok hesabınız. Tüm istekler artık yerel sayfanıza yönlendiriliyor ortam ve uygulama tarafından kullanılan bağlantı noktası.

    "ngrok" sunucusunun çalıştığı terminal ve
yönlendirme

    4.Şekil ngrok sunucusunun çalıştırıldığı ve yönlendirildiği terminal.

  3. ngrok tarafından, yerel ana bilgisayarınızda da bir web arayüzü başlatıldı uygulamasını bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve HTTP göstermeyen web arayüzü
istekler

    5. Şekil. ngrok uygulaması tarafından barındırılan web arayüzü hiç HTTP isteği gösterilmiyor.

  4. Destek kaydı URL'sini yeni bir Test kullanıcısı hesabıyla Google Dokümanı:

    • Yeni bir Google Dokümanı oluşturun.

      Yeni bir Google Dokümanı oluşturma

    • Aşağıdaki bağlantıyı yazıp enter düğmesine basın:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Bağlantıyı tıklayın.

  5. Yerel ortamınızdaki Visual Studio Code içinde şunları görebilirsiniz: yürütme, ayarlanan kesme noktasında duraklatılır.

    Yürütme işlemi belirlenen kesme noktasında duraklatıldı
ayarla

    6. Şekil. Yürütme, ayarlanan kesme noktasında duraklatıldı.

  6. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde Google Workspace Eklentileri, Google Workspace Eklentisini zaman aşımına uğratmadan önce Google Dokümanındaki bağlantı önizlemesini önbellekten görüntüler.

  7. HTTP istek ve yanıt günlüklerini web arayüzünden kontrol edebilirsiniz yerel ortamınızdaki ngrok uygulaması tarafından barındırılır.

    "ngrok" tarafından barındırılan web arayüzünden gelen HTTP isteği
uygulama

    7.Şekil Search Ads 360'ın barındırdığı web arayüzünden HTTP isteği ngrok uygulaması.

  8. Uygulama davranışını değiştirmek için Case öğesini Case: satır içi ile değiştirin main.py dosyasından 56. Dosyayı kaydettiğinizde Visual Studio Code uygulamayı, güncellenmiş kaynak koduyla otomatik olarak yeniden yükler ve hata ayıklama modunda kalır.

    Uygulama çalışıyor ve bağlantı noktasındaki HTTP isteklerini dinliyor
Kod değişikliğini içeren "9000"
yüklendi

    8. Şekil. Uygulama çalışıyor ve HTTP isteklerini dinliyor kod değişikliği yüklenmiş olarak 9000 bağlantı noktasında.

  9. Bu kez bağlantıyı tıklayıp bağlantıda birkaç saniye beklemek yerine, Web'de günlüğe kaydedilen son HTTP isteğini seçebilirsiniz. yerel ortamınızda ngrok uygulaması tarafından barındırılan arayüz ve Replay'ı tıklayın. Geçen seferki gibi Google Workspace Eklentiniz şu anda hata ayıklama işlemi devam ettiğinden yanıt vermiyor.

  10. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın yanıt oluşturduğu yerel ortamınızı Önizleme kartının güncellenmiş sürümüne.

Java

  1. Yerel ortamınızda yüklü Visual Studio Code IDE'den şunları yapın:

    1. Yeni bir pencerede klasörü açın add-ons-samples/java/3p-resources
    2. Uygulamayı çalıştırmak için Maven projesini yapılandırma Yerel olarak Cloud'u ekleyerek 9000 bağlantı noktasında CreateLinkPreview Functions Framework derleme eklentisi function-maven-plugin pom.xml dosyası:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      
    3. Artık hata ayıklama modunda yerel olarak başlatabilirsiniz:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      
    4. Kök dizinde .vscode/launch.json dosyasını oluşturun ve şuna ekli Remote Debug Watch adlı bir başlatma yapılandırması yapılandır: daha önce 8000 bağlantı noktasıyla başlatılan uygulama:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      
    5. HTTP isteğinin işlenmesini duraklatan ve CreateLinkPreview.java dosyasını açın ve dosyaları hata ayıklama Daha önce Remote Debug Watch yapılandırması eklendi. Uygulama şu anda 9000 bağlantı noktasında HTTP isteklerini çalıştırıyor ve dinliyor.

      Uygulama çalışıyor ve
bağlantı noktası &quot;9000&quot;

      Şekil 3. Uygulama çalışırken ve HTTP'yi dinliyordur istekleri 9000 bağlantı noktası üzerinden gerçekleştirilir.

  2. ngrok uygulamasını yerel ortamınızda başlatın:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını şu statik alanla değiştirin: ngrok hesabınız. Tüm istekler artık yerel sayfanıza yönlendiriliyor ortam ve uygulama tarafından kullanılan bağlantı noktası.

    &quot;ngrok&quot; sunucusunun çalıştığı terminal ve
yönlendirme

    4.Şekil ngrok sunucusunun çalıştırıldığı ve yönlendirildiği terminal.

  3. ngrok tarafından, yerel ana bilgisayarınızda da bir web arayüzü başlatıldı uygulamasını bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    &quot;ngrok&quot; uygulaması tarafından barındırılan ve HTTP göstermeyen web arayüzü
istekler

    5. Şekil. ngrok uygulaması tarafından barındırılan web arayüzü hiç HTTP isteği gösterilmiyor.

  4. Destek kaydı URL'sini yeni bir Test kullanıcısı hesabıyla Google Dokümanı:

    • Yeni bir Google Dokümanı oluşturun.

      Yeni bir Google Dokümanı oluşturma

    • Aşağıdaki bağlantıyı yazıp enter düğmesine basın:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Bağlantıyı tıklayın.

  5. Yerel ortamınızdaki Visual Studio Code içinde şunları görebilirsiniz: yürütme, ayarlanan kesme noktasında duraklatılır.

    Yürütme işlemi belirlenen kesme noktasında duraklatıldı
ayarla

    6. Şekil. Yürütme, ayarlanan kesme noktasında duraklatıldı.

  6. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde Google Workspace Eklentileri, Google Workspace Eklentisini zaman aşımına uğratmadan önce Google Dokümanındaki bağlantı önizlemesini önbellekten görüntüler.

  7. HTTP istek ve yanıt günlüklerini web arayüzünden kontrol edebilirsiniz yerel ortamınızdaki ngrok uygulaması tarafından barındırılır.

    &quot;ngrok&quot; tarafından barındırılan web arayüzünden gelen HTTP isteği
uygulama

    7.Şekil Search Ads 360'ın barındırdığı web arayüzünden HTTP isteği ngrok uygulaması.

  8. Uygulama davranışını değiştirmek için Case öğesini Case: satır içi ile değiştirin CreateLinkPreview.java dosyası 78, mvnDebug uygulamasını yeniden başlatın işlemi yapın ve yeniden ekleyip yeniden başlatmak için Remote Debug Watch uygulamasını yeniden başlatın hata ayıklama sayfasına gidin.

  9. Bu kez bağlantıyı tıklayıp bağlantıda birkaç saniye beklemek yerine, Web'de günlüğe kaydedilen son HTTP isteğini seçebilirsiniz. yerel ortamınızda ngrok uygulaması tarafından barındırılan arayüz ve Replay'ı tıklayın. Geçen seferki gibi Google Workspace Eklentiniz şu anda hata ayıklama işlemi devam ettiğinden yanıt vermiyor.

  10. Yürütmeyi Visual Studio Code hata ayıklayıcısından devam ettirdiğinizde ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın yanıt oluşturduğu yerel ortamınızı Önizleme kartının güncellenmiş sürümüne.

Uzak ortamdan hata ayıkla

Bu bölümde, Google Workspace Eklentiniz ile uzak bir ortamda yürütülür.

Uzaktan hata ayıkla
ortam

9. Şekil. Uzak ortamdan hata ayıklayın.

Ön koşullar

  • Google Workspace Eklentiniz dağıtıldı ve yüklendi.
  • Hata ayıklayıcıyla uzak ortamınızda çalışan uygulamanız belirli bir bağlantı noktasında etkinse REMOTE_DEBUG_PORT inceleyin.
  • Yerel ortamınız uzak ortamınıza ssh.
  • Yerel ortamınızda hata ayıklama yapabilen bir IDE (Entegre Geliştirme Ortamı) kurulumu. Biz Visual Studio Code IDE ve varsayılanı hata ayıklama özellikleri kılavuzda bulabilirsiniz.

Yerel ve uzak ortamlarınızı bağlayın

Yerel ortamınızda hata ayıklama istemcisi başlatmak istediğiniz yerde bağlantı kurmak için bir SSH tüneli oluşturun:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Aşağıdakini değiştirin:

  • LOCAL_DEBUG_PORT: Yerel sayfanızdaki hata ayıklama bağlantı noktası bahsedeceğim.
  • REMOTE_USERNAME: Uzak ortamınızdaki kullanıcı adı.
  • REMOTE_ADDRESS: Uzak ortamınızın adresi.
  • REMOTE_DEBUG_PORT: Uzaktan kumandanızdaki hata ayıklama bağlantı noktası bahsedeceğim.

Yerel ortamınızdaki hata ayıklama bağlantı noktası artık uzak bir ortamda yapmak gerekir.

Hata ayıklamayı başlat

Yerel ortamınızda yüklü Visual Studio Code IDE'den şunu yapın: takip etmek için:

  1. Yeni bir pencerede uygulamanızın kaynak kodunu açın.
  2. Kök dizinde .vscode/launch.json dosyasını oluşturun ve yerel sunucunuzdaki hata ayıklama bağlantı noktasına eklenen Debug Remote adlı ortam:

    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 yerine yardımcı olur.

  3. Uygulamanızın kaynak koduna HTTP isteğini duraklatan bir ayrılma noktası ekleyin. ve çalışmaya ve hata ayıklama işlemini daha önce eklenen Debug Remote yapılandırmasıyla yapın.

Yüklü Google Workspace Eklentinizle etkileşimde bulunun. Sizin Google Workspace eklentisi etkin şekilde çalıştığından yanıt vermiyor. hatalar ayıklandı Visual Studio Code IDE'sinde.

Hata günlüklerini nasıl sorgulayacağınızı öğrenin.