Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Testare e eseguire il debug dei componenti aggiuntivi di Google Workspace HTTP

In qualità di sviluppatore di componenti aggiuntivi di Google Workspace, potresti dover eseguire il debug del codice per testare le modifiche o risolvere problemi complessi. Il debug dei componenti aggiuntivi di Google Workspace può essere eseguito in molti modi diversi a seconda dell'architettura dell'app, di cosa fa l'app, di come viene implementata e delle tue preferenze.

Questa pagina spiega come eseguire il debug di un componente aggiuntivo Google Workspace HTTP utilizzando ngrok, una piattaforma di ingresso unificata che puoi utilizzare per testare gli ambienti di sviluppo locali. In questa guida, testerai le modifiche al codice in un ambiente locale e risolverai i problemi in un ambiente remoto.

Eseguire il debug dall'ambiente di sviluppo locale

In questa sezione interagisci con il componente aggiuntivo Google Workspace che viene eseguito nel tuo ambiente locale.

**Figura 1.** Esegui il debug in un ambiente di sviluppo locale.

Prerequisiti

Node.js

Le versioni più recenti di node e npm installate nell'ambiente locale.
L'ultima versione di nodemon installata nel tuo ambiente locale. Viene utilizzata per la ricarica automatica:
```
npm install -g nodemon
```
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e Configurare l'ambiente della guida rapida.
Il codice del componente aggiuntivo Google Workspace da eseguire il debug nel tuo ambiente locale. In questa guida utilizziamo le funzionalità del link di anteprima dell'esempio di codice 3p-resources del repository GitHub googleworkspace/add-ons-samples a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'IDE Visual Studio Code e le relative funzionalità di debug predefinite a scopo illustrativo.
Un account ngrok.
L'ultima versione di gcloud installata e inizializzata nel tuo ambiente locale.

Python

La versione più recente di python3 installata nel tuo ambiente locale.
L'ultima versione di pip e virtualenv installata nel tuo ambiente locale. Vengono utilizzati per gestire rispettivamente i pacchetti Python e gli ambienti virtuali.
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e Configurare l'ambiente della guida rapida.
Il codice del componente aggiuntivo Google Workspace da eseguire il debug nel tuo ambiente locale. In questa guida utilizziamo le funzionalità del link di anteprima dell'esempio di codice 3p-resources del repository GitHub googleworkspace/add-ons-samples a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'IDE Visual Studio Code e le relative funzionalità di debug predefinite a scopo illustrativo.
Un account ngrok.
L'ultima versione di gcloud installata e inizializzata nel tuo ambiente locale.

Java

L'ultima versione stabile di Java SE 11's JDK installata nel tuo ambiente locale.
La versione più recente di Apache Maven installata nel tuo ambiente locale. Viene utilizzato per gestire i progetti Java.
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e Configurare l'ambiente della guida rapida.
Il codice del componente aggiuntivo Google Workspace da eseguire il debug nel tuo ambiente locale. In questa guida utilizziamo le funzionalità del link di anteprima dell'esempio di codice 3p-resources del repository GitHub googleworkspace/add-ons-samples a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'IDE Visual Studio Code e le relative funzionalità di debug predefinite a scopo illustrativo.
Un account ngrok.
L'ultima versione di gcloud installata e inizializzata nel tuo ambiente locale.

Rendere disponibile pubblicamente il servizio localhost

Devi connettere il tuo ambiente locale a internet in modo che il componente aggiuntivo Google Workspace possa accedervi. L'applicazione ngrok viene utilizzata per reindirizzare le richieste HTTP effettuate a un URL pubblico al tuo ambiente locale.

In un browser nel tuo ambiente locale, accedi al tuo account ngrok.
Installa l'applicazione e configura authtoken nel tuo ambiente locale.
Crea un dominio statico nel tuo account ngrok, a cui viene fatto riferimento come NGROK_STATIC_DOMAIN nelle istruzioni di questa guida.

Creare e installare il deployment del componente aggiuntivo

Configura il componente aggiuntivo Google Workspace in modo che invii tutte le richieste HTTP al tuo dominio statico. Il file di deployment dovrebbe avere il seguente aspetto:

{
  "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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

Sostituisci NGROK_STATIC_DOMAIN con il dominio statico nel tuo account ngrok.

Imposta il progetto Google Cloud da utilizzare:
```
gcloud config set project PROJECT_ID
```
Acquisisci nuove credenziali utente da utilizzare per le credenziali predefinite dell'applicazione:
```
gcloud auth application-default login
```
Sostituisci PROJECT_ID con l'ID progetto del progetto Google Cloud dell'app.

Crea il deployment:

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

Sostituisci DEPLOYMENT_FILE_PATH con il percorso del file di deployment.

Installa il deployment:
```
gcloud workspace-add-ons deployments install manageSupportCases
```
Figura 2. Il componente aggiuntivo Google Workspace invia tutte le richieste HTTP al dominio statico. Il servizio pubblico `ngrok` funge da ponte tra il componente aggiuntivo Google Workspace e il codice dell'applicazione che viene eseguito localmente.

Testare il componente aggiuntivo di Google Workspace

Puoi eseguire il deployment, testare, eseguire il debug e ricaricare automaticamente il componente aggiuntivo Google Workspace in locale.

Node.js

Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:
1. In una nuova finestra, apri la cartella add-ons-samples/node/3p-resources.
2. Configura l'applicazione per l'esecuzione locale e il debug con ricarica automatica aggiungendo una dipendenza e due script nel file package.json:
```
{
    ...
    "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. Dalla directory principale, installa l'applicazione:
```
npm install
```
4. Crea e configura un lancio denominato Debug Watch che attiva lo script debug-watch creando il file .vscode/launch.json nella directory principale:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Debug Watch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": ["run-script", "debug-watch"]
    }]
}
```
5. Aggiungi un punto di interruzione che sospende l'elaborazione della richiesta HTTP nel file index.js e avvia l'esecuzione e il debug con la configurazione Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
Avvia l'applicazione ngrok nel tuo ambiente locale:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Sostituisci NGROK_STATIC_DOMAIN con il dominio statico nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e il reindirizzamento.
L'applicazione ngrok avvia anche un'interfaccia web su localhost. Puoi monitorare tutte le attività aprendole in un browser.

Figura 5. L'interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il componente aggiuntivo Google Workspace visualizzando l'anteprima di un URL di una richiesta in un nuovo documento Google con un account tester:
- Crea un documento Google.
  
  Creare un documento Google
- Digita il seguente link e premi enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Fai clic sul link.
In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal Visual Studio Codedebugger prima del timeout dei componenti aggiuntivi Google Workspace, il componente aggiuntivo Google Workspace mostra l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale.

Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.
Per modificare il comportamento dell'applicazione, sostituisci Case con Case: nella riga 51 di index.js. Quando salvi il file, nodemon ricarica automaticamente l'applicazione con il codice sorgente aggiornato e Visual Studio Code rimane in modalità di debug.

Figura 8. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000 con la modifica del codice caricata.
Questa volta, anziché fare clic sul link e attendere qualche secondo in un nuovo documento Google, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale e fare clic su Replay. Come l'ultima volta, il tuo componente aggiuntivo Google Workspace non risponde perché è in fase di debug attivo.
Quando riprendi l'esecuzione dal debugger Visual Studio Code, puoi vedere dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata della scheda di anteprima.

Python

Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:
1. In una nuova finestra, apri la cartella add-ons-samples/python/3p-resources/create_link_preview.
2. Crea un ambiente virtuale per Python env e attivalo:
```
virtualenv env
source env/bin/activate
```
3. Installa tutte le dipendenze del progetto utilizzando pip nell'ambiente virtuale:
```
pip install -r requirements.txt
```
4. Crea il file .vscode/launch.json nella directory principale e configura un avvio denominato Debug Watch che attiva l'applicazione dal modulo functions-framework sulla porta 9000 in modalità di debug nell'ambiente virtuale env:
```
{
    "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. Aggiungi un punto di interruzione che sospende l'elaborazione della richiesta HTTP nel file main.py e avvia l'esecuzione e il debug con la configurazione Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
Avvia l'applicazione ngrok nel tuo ambiente locale:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Sostituisci NGROK_STATIC_DOMAIN con il dominio statico nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e il reindirizzamento.
L'applicazione ngrok avvia anche un'interfaccia web su localhost. Monitora tutte le attività aprendole in un browser.

Figura 5. L'interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il componente aggiuntivo Google Workspace visualizzando l'anteprima di un URL di una richiesta in un nuovo documento Google con un account tester:
- Crea un documento Google.
  
  Creare un documento Google
- Digita il seguente link e premi enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Fai clic sul link.
In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal Visual Studio Codedebugger prima del timeout dei componenti aggiuntivi Google Workspace, il componente aggiuntivo Google Workspace mostra l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale.

Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.
Per modificare il comportamento dell'applicazione, sostituisci Case con Case: nella riga 56 del file main.py. Quando salvi il file, Visual Studio Code l'applicazione viene ricaricata automaticamente con il codice sorgente aggiornato e rimane in modalità di debug.

Figura 8. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000 con la modifica del codice caricata.
Questa volta, anziché fare clic sul link e attendere qualche secondo in un nuovo documento Google, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale e fare clic su Replay. Come l'ultima volta, il tuo componente aggiuntivo Google Workspace non risponde perché è in fase di debug attivo.
Quando riprendi l'esecuzione dal debugger Visual Studio Code, puoi vedere dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata della scheda di anteprima.

Java

Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:
1. In una nuova finestra, apri la cartella add-ons-samples/java/3p-resources.
2. Configura il progetto Maven per eseguire l'applicazione CreateLinkPreview sulla porta 9000 localmente aggiungendo il plug-in di build Cloud Functions Framework function-maven-plugin al file pom.xml:
```
...
<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. Ora puoi avviarlo localmente in modalità di debug:
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. Crea il file .vscode/launch.json nella directory principale e configura un avvio denominato Remote Debug Watch che si collega all'applicazione avviata in precedenza sulla porta 8000:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Remote Debug Watch",
        "projectName": "http-function",
        "hostName": "localhost",
        "port": 8000
    }]
}
```
5. Aggiungi un punto di interruzione che sospende l'elaborazione delle richieste HTTP nel file CreateLinkPreview.java e avvia l'allegato e il debug con la configurazione Remote Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000.
Avvia l'applicazione ngrok nel tuo ambiente locale:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Sostituisci NGROK_STATIC_DOMAIN con il dominio statico nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e il reindirizzamento.
L'applicazione ngrok avvia anche un'interfaccia web su localhost. Monitora tutte le attività aprendole in un browser.

Figura 5. L'interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il componente aggiuntivo Google Workspace visualizzando l'anteprima di un URL di una richiesta in un nuovo documento Google con un account tester:
- Crea un documento Google.
  
  Creare un documento Google
- Digita il seguente link e premi enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Fai clic sul link.
In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal Visual Studio Codedebugger prima del timeout dei componenti aggiuntivi Google Workspace, il componente aggiuntivo Google Workspace mostra l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale.

Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.
Per modificare il comportamento dell'applicazione, sostituisci Case con Case: nella riga 78 del file CreateLinkPreview.java, riavvia il processo mvnDebug e riavvia Remote Debug Watch per riconnettere e riavviare il debug.
Questa volta, anziché fare clic sul link e attendere qualche secondo in un nuovo documento Google, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale e fare clic su Replay. Come l'ultima volta, il tuo componente aggiuntivo Google Workspace non risponde perché è in fase di debug attivo.
Quando riprendi l'esecuzione dal debugger Visual Studio Code, puoi vedere dall'interfaccia web ospitata dall'applicazione ngrok nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata della scheda di anteprima.

Eseguire il debug dall'ambiente remoto

In questa sezione, interagisci con il componente aggiuntivo Google Workspace che viene eseguito in un ambiente remoto.

Esegui il debug da remoto dell'ambiente. — **Figura 9.** Esegui il debug dall'ambiente remoto.

Prerequisiti

Il componente aggiuntivo Google Workspace è stato implementato e installato.
L'applicazione viene eseguita nell'ambiente remoto con il debugger attivato su una determinata porta e viene indicata come REMOTE_DEBUG_PORT nelle istruzioni di questa guida.
Il tuo ambiente locale può ssh al tuo ambiente remoto.
Nell'ambiente locale è configurato un IDE in grado di eseguire il debug. In questa guida utilizziamo Visual Studio Code IDE e le relative funzionalità di debug predefinite a scopo illustrativo.

Connetti gli ambienti locali e remoti

Nel tuo ambiente locale da cui vuoi avviare una connessione del client di debug, configura un tunnel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Sostituisci quanto segue:

LOCAL_DEBUG_PORT: la porta di debug nell'ambiente locale.
REMOTE_USERNAME: il nome utente nel tuo ambiente remoto.
REMOTE_ADDRESS: l'indirizzo del tuo ambiente remoto.
REMOTE_DEBUG_PORT: La porta di debug nell'ambiente remoto.

La porta di debug nell'ambiente locale è ora collegata alla porta di debug nell'ambiente remoto.

Avvia debug

Dall'IDE Visual Studio Code installato nel tuo ambiente locale, esegui le seguenti operazioni:

In una nuova finestra, apri il codice sorgente della tua app.

Crea il file .vscode/launch.json nella directory radice e configura un avvio denominato Debug Remote che si collega alla porta di debug nell'ambiente locale:

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
    }]
}

Sostituisci LOCAL_DEBUG_PORT con la porta di debug nel tuo ambiente locale.

Aggiungi un punto di interruzione nel codice sorgente della tua app che metta in pausa l'elaborazione della richiesta HTTP e avvia l'esecuzione e il debug con la configurazione Debug Remote aggiunta in precedenza.

Interagisci con il componente aggiuntivo di Google Workspace installato. Il tuo componente aggiuntivo Google Workspace non risponde perché è in fase di debug attivo nell'IDE Visual Studio Code.

Argomenti correlati

Scopri come eseguire query sui log degli errori.

Testare e eseguire il debug dei componenti aggiuntivi di Google Workspace HTTP Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Eseguire il debug dall'ambiente di sviluppo locale

Prerequisiti

Node.js

Python

Java

Rendere disponibile pubblicamente il servizio localhost

Creare e installare il deployment del componente aggiuntivo

Testare il componente aggiuntivo di Google Workspace

Node.js

Python

Java

Eseguire il debug dall'ambiente remoto

Prerequisiti

Connetti gli ambienti locali e remoti

Avvia debug

Node.js

Python

Java

Argomenti correlati

Testare e eseguire il debug dei componenti aggiuntivi di Google Workspace HTTP