Questa pagina è stata tradotta dall'API Cloud Translation.

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

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. Debug dei componenti aggiuntivi di Google Workspace può essere eseguito in molti modi diversi a seconda dell'architettura dell'app, di il deployment dell'app, le modalità di deployment e le tue preferenze.

In questa pagina viene spiegato come eseguire il debug di un componente aggiuntivo di Google Workspace HTTP utilizzando ngrok, una piattaforma in entrata unificata che puoi utilizzare per testare di sviluppo software. In questa guida testerai le modifiche al codice in una regione dell'ambiente di lavoro e risolvere i problemi in un ambiente remoto.

Debug dall'ambiente di sviluppo locale

In questa sezione interagisci con il tuo componente aggiuntivo di Google Workspace, vengono eseguite nel tuo ambiente locale.

Debug dallo sviluppo locale
ambiente

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

Prerequisiti

Node.js

Versioni più recenti di node e npm installato nel tuo ambiente locale.
La versione più recente di nodemon installata nel tuo paese , viene utilizzato per il ricaricamento automatico:
```
npm install -g nodemon
```
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e impostare ambiente della Guida rapida di assistenza.
Il codice del componente aggiuntivo Google Workspace per eseguire il debug nella tua località completamente gestito di Google Cloud. Usiamo le funzionalità dei link di anteprima del codice di esempio 3p-resources dal repository GitHub googleworkspace/add-ons-samples in questa guida a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.
Un account ngrok.
Ultima versione di gcloud installato e inizializzato ambiente locale.

Python

Ultima versione di python3 installato nel tuo ambiente locale.
La versione più recente di pip e virtualenv installata in nell'ambiente locale, vengono utilizzati per gestire pacchetti Python ambienti operativi.
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e impostare ambiente della Guida rapida di assistenza.
Il codice del componente aggiuntivo Google Workspace per eseguire il debug nella tua località completamente gestito di Google Cloud. Usiamo le funzionalità dei link di anteprima del codice di esempio 3p-resources dal repository GitHub googleworkspace/add-ons-samples in questa guida a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.
Un account ngrok.
Ultima versione di gcloud installato e inizializzato ambiente locale.

Java

Ultima versione stabile di Java SE 11's JDK installato nel tuo completamente gestito di Google Cloud.
Ultima versione di Apache Maven installato nel tuo ambiente locale, per gestire i progetti Java.
Un progetto Google Cloud. Puoi seguire le sezioni Prerequisiti e impostare ambiente della Guida rapida di assistenza.
Il codice del componente aggiuntivo Google Workspace per eseguire il debug nella tua località completamente gestito di Google Cloud. Usiamo le funzionalità dei link di anteprima del codice di esempio 3p-resources dal repository GitHub googleworkspace/add-ons-samples in questa guida a scopo illustrativo.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.
Un account ngrok.
Ultima versione di gcloud installato e inizializzato ambiente locale.

Rendi il servizio localhost disponibile pubblicamente

Devi connettere il tuo ambiente locale a internet in modo che il componente aggiuntivo di Google Workspace può accedervi. Applicazione ngrok in uso 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 il tuo authtoken nel tuo completamente gestito di Google Cloud.
Crea un dominio statico nel tuo account ngrok, è indicato come NGROK_STATIC_DOMAIN nelle istruzioni di questa guida.

Crea e installa il deployment dei componenti aggiuntivi

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

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

Sostituisci NGROK_STATIC_DOMAIN con il dominio statico in Account ngrok.

Imposta il progetto Google Cloud da utilizzare:
```
gcloud config set project PROJECT_ID
```
Acquisisci nuove credenziali utente da utilizzare per App predefinita Credenziali:
```
gcloud auth application-default login
```
Sostituisci PROJECT_ID con ID progetto per il 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 tuo di deployment.

Installa il deployment:

gcloud workspace-add-ons deployments install manageSupportCases

Il componente aggiuntivo di Google Workspace invia tutte le sue richieste HTTP al
dominio statico

Figura 2. Il componente aggiuntivo di Google Workspace invia tutte le sue richieste HTTP al dominio statico. Il servizio pubblico ngrok funge da collegamento tra il componente aggiuntivo di Google Workspace e il codice dell'applicazione che viene eseguito a livello locale.

Testa il componente aggiuntivo di Google Workspace

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

Node.js

Dall'IDE Visual Studio Code installato nel tuo ambiente locale: procedi nel seguente modo:
1. In una nuova finestra, apri la cartella add-ons-samples/node/3p-resources.
2. Configura l'applicazione per l'esecuzione locale e il ricaricamento automatico del debug 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. Installa l'applicazione dalla directory root:
```
npm install
```
4. Crea e configura un lancio denominato Debug Watch che attivi il script debug-watch creando il file .vscode/launch.json in nella directory radice:
```
{
    "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 metta in pausa l'elaborazione della richiesta HTTP nel index.js e iniziare a eseguire e il debug con Configurazione Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto del protocollo HTTP richieste 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 in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.
Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il tuo componente aggiuntivo di Google Workspace visualizzando l'anteprima dell'URL di una richiesta in un nuovo Documento Google con un account tester:
- Crea un nuovo documento Google.
  
  Creare un nuovo 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 debugger di Visual Studio Code prima che i componenti aggiuntivi di Google Workspace scadano per il componente aggiuntivo di Google Workspace. visualizza l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

Figura 7. La richiesta HTTP dall'interfaccia web ospitata dal Applicazione ngrok.
Per modificare il comportamento dell'applicazione, sostituisci Case con Case: in linea 51 di index.js. Quando salvi il file, nodemon automaticamente ricarica l'applicazione con il codice sorgente aggiornato 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, invece di fare clic sul link e attendere qualche secondo un nuovo documento Google, puoi selezionare l'ultima richiesta HTTP registrata sul web interfaccia ospitata dall'applicazione ngrok nel tuo ambiente locale e fai clic su Replay. Come l'ultima volta, il componente aggiuntivo di Google Workspace non risponde perché è in fase di debug attivo.
Quando riprendi l'esecuzione dal debugger di Visual Studio Code puoi vedere nell'interfaccia web ospitata dall'applicazione ngrok in del tuo ambiente locale con cui l'applicazione genera una risposta la versione aggiornata della scheda di anteprima.

Python

Dall'IDE Visual Studio Code installato nel tuo ambiente locale: procedi nel seguente modo:
1. In una nuova finestra, apri la cartella add-ons-samples/python/3p-resources/create_link_preview.
2. Crea un nuovo ambiente virtuale per Python env e attivalo:
```
virtualenv env
source env/bin/activate
```
3. Installa tutte le dipendenze del progetto utilizzando pip nella macchina virtuale questo ambiente:
```
pip install -r requirements.txt
```
4. Crea il file .vscode/launch.json nella directory principale e configura un lancio denominato Debug Watch che attiva l'applicazione dal modulo functions-framework sulla porta 9000 in modalità di debug sull'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 metta in pausa l'elaborazione della richiesta HTTP nel main.py e iniziare a eseguire e il debug con Configurazione Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto del protocollo HTTP richieste 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 in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.
Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il tuo componente aggiuntivo di Google Workspace visualizzando l'anteprima dell'URL di una richiesta in un nuovo Documento Google con un account tester:
- Crea un nuovo documento Google.
  
  Creare un nuovo 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 debugger di Visual Studio Code prima che i componenti aggiuntivi di Google Workspace scadano per il componente aggiuntivo di Google Workspace. visualizza l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

Figura 7. La richiesta HTTP dall'interfaccia web ospitata dal Applicazione ngrok.
Per modificare il comportamento dell'applicazione, sostituisci Case con Case: in linea 56 del file main.py. Quando salvi il file, Visual Studio Code ricarica automaticamente l'applicazione con il codice sorgente aggiornato 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, invece di fare clic sul link e attendere qualche secondo un nuovo documento Google, puoi selezionare l'ultima richiesta HTTP registrata sul web interfaccia ospitata dall'applicazione ngrok nel tuo ambiente locale e fai clic su Replay. Come l'ultima volta, il componente aggiuntivo di Google Workspace non risponde perché è in fase di debug attivo.
Quando riprendi l'esecuzione dal debugger di Visual Studio Code puoi vedere nell'interfaccia web ospitata dall'applicazione ngrok in del tuo ambiente locale con cui l'applicazione genera una risposta la versione aggiornata della scheda di anteprima.

Java

Dall'IDE Visual Studio Code installato nel tuo ambiente locale: procedi nel seguente modo:
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 in locale aggiungendo il Cloud Plug-in di build del framework di Functions function-maven-plugin in pom.xml file:
```
...
<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 configurare un lancio denominato Remote Debug Watch che si collega al dell'applicazione avviata in precedenza con la 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 metta in pausa l'elaborazione della richiesta HTTP nel CreateLinkPreview.java e inizia ad allegare e il debug con Configurazione Remote Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.
  
  Figura 3. L'applicazione è in esecuzione e rimane in ascolto di HTTP richieste 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 in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.
Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.
Testa il tuo componente aggiuntivo di Google Workspace visualizzando l'anteprima dell'URL di una richiesta in un nuovo Documento Google con un account tester:
- Crea un nuovo documento Google.
  
  Creare un nuovo 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 debugger di Visual Studio Code prima che i componenti aggiuntivi di Google Workspace scadano per il componente aggiuntivo di Google Workspace. visualizza l'anteprima del link nel documento Google dalla cache.
Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

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

Debug da ambiente remoto

In questa sezione interagisci con il tuo componente aggiuntivo di Google Workspace, su un ambiente remoto.

Debug da remoto
ambiente

Figura 9. Debug da ambiente remoto.

Prerequisiti

È stato eseguito il deployment e l'installazione del tuo componente aggiuntivo di Google Workspace.
L'applicazione in esecuzione nell'ambiente remoto con il debugger abilitato su una determinata porta, viene definito REMOTE_DEBUG_PORT nelle istruzioni di questa guida.
Il tuo ambiente locale può ssh nel tuo ambiente remoto.
Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite di debug in questo a scopo illustrativo.

Connetti i tuoi ambienti locali e remoti

Nel tuo ambiente locale da cui vuoi avviare un client di debug per configurare 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 nella libreria locale completamente gestito di Google Cloud.
REMOTE_USERNAME: il nome utente nell'ambiente remoto.
REMOTE_ADDRESS: l'indirizzo del tuo ambiente remoto.
REMOTE_DEBUG_PORT: la porta di debug del telecomando completamente gestito di Google Cloud.

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

Avvia debug

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

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

Crea il file .vscode/launch.json nella directory radice e configura un avviare Debug Remote che si collega alla porta di debug questo ambiente:

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 ambiente locale.

Aggiungi un punto di interruzione nel codice sorgente dell'app che mette in pausa la richiesta HTTP nell'elaborazione e iniziare a eseguire il debug con la configurazione Debug Remote aggiunta in precedenza.

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

Argomenti correlati

Scopri come eseguire query sui log degli errori.