Gỡ lỗi tiện ích bổ sung của Google Workspace

Là một nhà phát triển Tiện ích bổ sung của Google Workspace, bạn có thể cần gỡ lỗi mã để kiểm thử các thay đổi hoặc khắc phục các vấn đề phức tạp. Bạn có thể gỡ lỗi tiện ích bổ sung của Google Workspace theo nhiều cách, tuỳ thuộc vào cấu trúc, chức năng của ứng dụng, cách triển khai ứng dụng và các lựa chọn ưu tiên của bạn.

Trang này giải thích cách gỡ lỗi Tiện ích bổ sung của Google Workspace bằng ngrok. Đây là một nền tảng nhập dữ liệu hợp nhất mà bạn có thể dùng để kiểm thử môi trường phát triển cục bộ. Trong hướng dẫn này, bạn sẽ kiểm thử các thay đổi về mã trong môi trường địa phương và khắc phục vấn đề trong môi trường từ xa.

Lưu ý: Nếu Tiện ích bổ sung Google Workspace của bạn được tạo bằng Google Apps Script, hãy sử dụng:

• Kiểm thử một quá trình triển khai
• Sử dụng trình gỡ lỗi và điểm ngắt

Gỡ lỗi từ môi trường phát triển cục bộ

Trong phần này, bạn sẽ tương tác với Tiện ích bổ sung của Google Workspace. Tiện ích bổ sung này sẽ thực thi trong môi trường cục bộ.

Hình 1. Gỡ lỗi trong môi trường phát triển cục bộ.

Điều kiện tiên quyết

Node.js

• Các phiên bản mới nhất của node và npm được cài đặt trong môi trường cục bộ.

• Phiên bản mới nhất của nodemon được cài đặt trong môi trường cục bộ, phiên bản này được dùng cho mục đích tự động tải lại:

  npm install -g nodemon
  

• Một dự án trên Google Cloud. Bạn có thể làm theo các phần Điều kiện tiên quyết và Thiết lập môi trường của Hướng dẫn nhanh.

• Mã của tiện ích bổ sung Google Workspace để gỡ lỗi trong môi trường cục bộ. Chúng tôi sử dụng các tính năng đường liên kết của bản xem trước trong ví dụ về mã 3p-resources trên kho lưu trữ GitHub googleworkspace/add-ons-samples trong hướng dẫn này để minh hoạ.

• IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng IDE Visual Studio Code và các tính năng gỡ lỗi mặc định của nó trong hướng dẫn này nhằm mục đích minh hoạ.

• Tài khoản ngrok.

• Phiên bản mới nhất của gcloud đã cài đặt và đã khởi chạy trong môi trường cục bộ.

Python

• Phiên bản python3 mới nhất được cài đặt trong môi trường cục bộ.
• Phiên bản mới nhất của pip và virtualenv được cài đặt trong môi trường cục bộ của bạn, chúng được dùng để quản lý các gói Python và môi trường ảo tương ứng.
• Một dự án trên Google Cloud. Bạn có thể làm theo các phần Điều kiện tiên quyết và Thiết lập môi trường của Hướng dẫn nhanh.
• Mã của tiện ích bổ sung Google Workspace để gỡ lỗi trong môi trường cục bộ. Chúng tôi sử dụng các tính năng đường liên kết của bản xem trước trong ví dụ về mã 3p-resources trên kho lưu trữ GitHub googleworkspace/add-ons-samples trong hướng dẫn này để minh hoạ.
• IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng IDE Visual Studio Code và các tính năng gỡ lỗi mặc định của nó trong hướng dẫn này nhằm mục đích minh hoạ.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud đã cài đặt và đã khởi chạy trong môi trường cục bộ.

Java

• Phiên bản ổn định mới nhất của Java SE 11's JDK được cài đặt trong môi trường cục bộ.
• Phiên bản Apache Maven mới nhất được cài đặt trong môi trường cục bộ và dùng để quản lý các dự án Java.
• Một dự án trên Google Cloud. Bạn có thể làm theo các phần Điều kiện tiên quyết và Thiết lập môi trường của Hướng dẫn nhanh.
• Mã của tiện ích bổ sung Google Workspace để gỡ lỗi trong môi trường cục bộ. Chúng tôi sử dụng các tính năng đường liên kết của bản xem trước trong ví dụ về mã 3p-resources trên kho lưu trữ GitHub googleworkspace/add-ons-samples trong hướng dẫn này để minh hoạ.
• IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng IDE Visual Studio Code và các tính năng gỡ lỗi mặc định của nó trong hướng dẫn này nhằm mục đích minh hoạ.
• Tài khoản ngrok.
• Phiên bản mới nhất của gcloud đã cài đặt và đã khởi chạy trong môi trường cục bộ.

Cung cấp dịch vụ localhost ở chế độ công khai

Bạn cần kết nối môi trường tại địa phương với Internet để tiện ích bổ sung của Google Workspace có thể truy cập vào tiện ích này. Ứng dụng ngrok dùng để chuyển hướng các yêu cầu HTTP được gửi đến một URL công khai đến môi trường cục bộ của bạn.

1. Trong trình duyệt ở môi trường cục bộ, hãy đăng nhập vào tài khoản ngrok của bạn.
2. Cài đặt ứng dụng và thiết lập authtoken trong môi trường tại địa phương.
3. Tạo một miền tĩnh trong tài khoản ngrok của bạn. Miền này được tham chiếu là NGROK_STATIC_DOMAIN trong hướng dẫn này.

Tạo và cài đặt chương trình triển khai tiện ích bổ sung

1. Định cấu hình tiện ích bổ sung Google Workspace để gửi tất cả các yêu cầu HTTP của tiện ích này đến miền tĩnh của bạn. Tệp triển khai của bạn sẽ có dạng như sau:

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

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn.

2. Thiết lập dự án Google Cloud để sử dụng:

   gcloud config set project PROJECT_ID
   

3. Thu thập thông tin đăng nhập mới của người dùng để sử dụng cho Thông tin xác thực mặc định của ứng dụng:

   gcloud auth application-default login
   

   Thay thế PROJECT_ID bằng mã dự án cho dự án Google Cloud của ứng dụng.

4. Tạo hoạt động triển khai:

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

   Thay thế DEPLOYMENT_FILE_PATH bằng đường dẫn của tệp triển khai.

5. Cài đặt triển khai:

   gcloud workspace-add-ons deployments install manageSupportCases
   

Hình 2. Tiện ích bổ sung Google Workspace gửi tất cả các yêu cầu HTTP đến miền tĩnh. Dịch vụ công cộng ngrok đóng vai trò là cầu nối giữa Tiện ích bổ sung Google Workspace và mã xử lý ứng dụng thực thi trên máy.

Kiểm thử tiện ích bổ sung của Google Workspace

Bạn có thể triển khai, kiểm thử, gỡ lỗi và tự động tải lại Tiện ích bổ sung Google Workspace trên thiết bị.

Lưu ý: Tiện ích bổ sung của Google Workspace thực thi với Khung chức năng đám mây như trong các ví dụ ở trên.

Node.js

1. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong cửa sổ mới, hãy mở thư mục add-ons-samples/node/3p-resources.

   2. Định cấu hình ứng dụng để chạy cục bộ và tự động tải lại gỡ lỗi bằng cách thêm một phần phụ thuộc và 2 tập lệnh trong tệp 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. Trong thư mục gốc, hãy cài đặt ứng dụng:

      npm install
      

   4. Tạo và định cấu hình hoạt động chạy có tên Debug Watch để kích hoạt tập lệnh debug-watch bằng cách tạo tệp .vscode/launch.json trong thư mục gốc:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. Thêm điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong tệp index.js, và bắt đầu chạy và gỡ lỗi bằng cấu hình Debug Watch đã thêm trước đó. Ứng dụng hiện đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. Ứng dụng đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

2. Chạy ứng dụng ngrok trong môi trường cục bộ của bạn:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả các yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

3. Giao diện web cũng được ứng dụng ngrok khởi động trên localhost, bạn có thể theo dõi tất cả các hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ và không hiển thị yêu cầu HTTP nào.

4. Kiểm thử tiện ích bổ sung của Google Workspace bằng cách xem trước URL yêu cầu trong một tài liệu Google Tài liệu mới bằng tài khoản người kiểm thử:

   • Tạo một tài liệu mới trên Google Tài liệu.

     Tạo một tài liệu mới trên Google Tài liệu

   • Nhập đường liên kết sau rồi nhấn enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Nhấp vào liên kết này.

5. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy quá trình thực thi bị tạm dừng tại điểm ngắt đã đặt.

   

   Hình 6. Quá trình thực thi sẽ bị tạm dừng tại điểm ngắt đã đặt.

6. Khi bạn tiếp tục thực thi trên trình gỡ lỗi Visual Studio Code trước khi Tiện ích bổ sung của Google Workspace hết thời gian chờ, Tiện ích bổ sung của Google Workspace sẽ hiển thị bản xem trước đường liên kết trong Google Tài liệu từ bộ nhớ đệm.

7. Bạn có thể kiểm tra nhật ký yêu cầu HTTP và phản hồi từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

8. Để thay đổi hành vi của ứng dụng, hãy thay thế Case bằng Case: cùng dòng 51 của index.js. Khi bạn lưu tệp, nodemon sẽ tự động tải lại ứng dụng bằng mã nguồn đã cập nhật và Visual Studio Code vẫn ở chế độ gỡ lỗi.

   

   Hình 8. Ứng dụng đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000 khi thay đổi mã được tải.

9. Lần này, thay vì nhấp vào đường liên kết và đợi vài giây trong một tệp Google Tài liệu mới, bạn có thể chọn yêu cầu HTTP gần đây nhất được ghi trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rồi nhấp vào Replay. Giống như lần trước, Tiện ích bổ sung của Google Workspace không phản hồi vì nó đang được gỡ lỗi.

10. Khi tiếp tục thực thi từ trình gỡ lỗi Visual Studio Code, bạn có thể thấy trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ nơi ứng dụng tạo phản hồi bằng phiên bản đã cập nhật của thẻ xem trước.

Python

1. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong cửa sổ mới, hãy mở thư mục add-ons-samples/python/3p-resources/create_link_preview.

   2. Tạo một môi trường ảo mới cho Python env và kích hoạt môi trường đó:

      virtualenv env
      source env/bin/activate
      

   3. Cài đặt tất cả các phần phụ thuộc của dự án bằng cách sử dụng pip trong môi trường ảo:

      pip install -r requirements.txt
      

   4. Tạo tệp .vscode/launch.json trong thư mục gốc và định cấu hình quá trình chạy có tên là Debug Watch để kích hoạt ứng dụng từ mô-đun functions-framework trên cổng 9000 ở chế độ gỡ lỗi trên môi trường ảo 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. Thêm điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong tệp main.py, và bắt đầu chạy và gỡ lỗi bằng cấu hình Debug Watch đã thêm trước đó. Ứng dụng hiện đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. Ứng dụng đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

2. Chạy ứng dụng ngrok trong môi trường cục bộ của bạn:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả các yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

3. Giao diện web cũng được ứng dụng ngrok khởi động trên localhost, bạn có thể theo dõi tất cả các hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ và không hiển thị yêu cầu HTTP nào.

4. Kiểm thử tiện ích bổ sung của Google Workspace bằng cách xem trước URL yêu cầu trong một tài liệu Google Tài liệu mới bằng tài khoản người kiểm thử:

   • Tạo một tài liệu mới trên Google Tài liệu.

     Tạo một tài liệu mới trên Google Tài liệu

   • Nhập đường liên kết sau rồi nhấn enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Nhấp vào liên kết này.

5. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy quá trình thực thi bị tạm dừng tại điểm ngắt đã đặt.

   

   Hình 6. Quá trình thực thi sẽ bị tạm dừng tại điểm ngắt đã đặt.

6. Khi bạn tiếp tục thực thi trên trình gỡ lỗi Visual Studio Code trước khi Tiện ích bổ sung của Google Workspace hết thời gian chờ, Tiện ích bổ sung của Google Workspace sẽ hiển thị bản xem trước đường liên kết trong Google Tài liệu từ bộ nhớ đệm.

7. Bạn có thể kiểm tra nhật ký yêu cầu HTTP và phản hồi từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

8. Để thay đổi hành vi của ứng dụng, hãy thay thế Case bằng Case: cùng dòng 56 của tệp main.py. Khi bạn lưu tệp, Visual Studio Code sẽ tự động tải lại ứng dụng bằng mã nguồn đã cập nhật và vẫn ở chế độ gỡ lỗi.

   

   Hình 8. Ứng dụng đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000 khi thay đổi mã được tải.

9. Lần này, thay vì nhấp vào đường liên kết và đợi vài giây trong một tệp Google Tài liệu mới, bạn có thể chọn yêu cầu HTTP gần đây nhất được ghi trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rồi nhấp vào Replay. Giống như lần trước, Tiện ích bổ sung của Google Workspace không phản hồi vì nó đang được gỡ lỗi.

10. Khi tiếp tục thực thi từ trình gỡ lỗi Visual Studio Code, bạn có thể thấy trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ nơi ứng dụng tạo phản hồi bằng phiên bản đã cập nhật của thẻ xem trước.

Java

1. Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

   1. Trong cửa sổ mới, hãy mở thư mục add-ons-samples/java/3p-resources.

   2. Định cấu hình dự án Maven để chạy ứng dụng CreateLinkPreview trên cổng 9000 cục bộ bằng cách thêm trình bổ trợ xây dựng Khung chức năng đám mây function-maven-plugin trong tệp 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. Giờ đây, bạn có thể chạy ứng dụng cục bộ ở chế độ gỡ lỗi:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. Tạo tệp .vscode/launch.json trong thư mục gốc và định cấu hình phiên chạy có tên Remote Debug Watch đính kèm với ứng dụng đã chạy trước đó bằng cổng 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Thêm điểm ngắt sẽ tạm dừng xử lý yêu cầu HTTP trong tệp CreateLinkPreview.java, và bắt đầu đính kèm và gỡ lỗi bằng cấu hình Remote Debug Watch đã thêm trước đó. Ứng dụng hiện đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

      

      Hình 3. ứng dụng của anh ấy đang chạy và theo dõi các yêu cầu HTTP trên cổng 9000.

2. Chạy ứng dụng ngrok trong môi trường cục bộ của bạn:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Thay thế NGROK_STATIC_DOMAIN bằng miền tĩnh trong tài khoản ngrok của bạn. Tất cả các yêu cầu hiện được chuyển hướng đến môi trường cục bộ và cổng mà ứng dụng sử dụng.

   

   Hình 4. Thiết bị đầu cuối có máy chủ ngrok đang chạy và chuyển hướng.

3. Giao diện web cũng được ứng dụng ngrok khởi động trên localhost, bạn có thể theo dõi tất cả các hoạt động bằng cách mở giao diện này trong trình duyệt.

   

   Hình 5. Giao diện web do ứng dụng ngrok lưu trữ và không hiển thị yêu cầu HTTP nào.

4. Kiểm thử tiện ích bổ sung của Google Workspace bằng cách xem trước URL yêu cầu trong một tài liệu Google Tài liệu mới bằng tài khoản người kiểm thử:

   • Tạo một tài liệu mới trên Google Tài liệu.

     Tạo một tài liệu mới trên Google Tài liệu

   • Nhập đường liên kết sau rồi nhấn enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Nhấp vào liên kết này.

5. Trong Visual Studio Code trong môi trường cục bộ, bạn có thể thấy quá trình thực thi bị tạm dừng tại điểm ngắt đã đặt.

   

   Hình 6. Quá trình thực thi sẽ bị tạm dừng tại điểm ngắt đã đặt.

6. Khi bạn tiếp tục thực thi trên trình gỡ lỗi Visual Studio Code trước khi Tiện ích bổ sung của Google Workspace hết thời gian chờ, Tiện ích bổ sung của Google Workspace sẽ hiển thị bản xem trước đường liên kết trong Google Tài liệu từ bộ nhớ đệm.

7. Bạn có thể kiểm tra nhật ký yêu cầu HTTP và phản hồi từ giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ.

   

   Hình 7. Yêu cầu HTTP từ giao diện web do ứng dụng ngrok lưu trữ.

8. Để thay đổi hành vi của ứng dụng, hãy thay thế Case bằng Case: cùng dòng 78 của tệp CreateLinkPreview.java, khởi động lại quy trình mvnDebug rồi chạy lại Remote Debug Watch để đính kèm và bắt đầu lại quá trình gỡ lỗi.

9. Lần này, thay vì nhấp vào đường liên kết và đợi vài giây trong một tệp Google Tài liệu mới, bạn có thể chọn yêu cầu HTTP gần đây nhất được ghi trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ rồi nhấp vào Replay. Giống như lần trước, Tiện ích bổ sung của Google Workspace không phản hồi vì nó đang được gỡ lỗi.

10. Khi tiếp tục thực thi từ trình gỡ lỗi Visual Studio Code, bạn có thể thấy trên giao diện web do ứng dụng ngrok lưu trữ trong môi trường cục bộ nơi ứng dụng tạo phản hồi bằng phiên bản đã cập nhật của thẻ xem trước.

Gỡ lỗi từ môi trường từ xa

Trong phần này, bạn sẽ tương tác với tiện ích bổ sung của Google Workspace. Tiện ích bổ sung này thực thi trên một môi trường từ xa.

Hình 9. Gỡ lỗi từ môi trường từ xa.

Điều kiện tiên quyết

• Đã triển khai và cài đặt tiện ích bổ sung của Google Workspace.
• Ứng dụng của bạn chạy trong môi trường từ xa với trình gỡ lỗi được bật trên một cổng nhất định, ứng dụng này được tham chiếu dưới dạng REMOTE_DEBUG_PORT trong hướng dẫn của hướng dẫn này.
• Môi trường cục bộ có thể ssh đối với môi trường từ xa của bạn.
• IDE được thiết lập trong môi trường cục bộ có thể gỡ lỗi. Chúng tôi sử dụng IDE Visual Studio Code và các tính năng gỡ lỗi mặc định của nó trong hướng dẫn này để minh hoạ.

Kết nối môi trường cục bộ và môi trường từ xa

Trong môi trường cục bộ mà bạn muốn bắt đầu kết nối ứng dụng gỡ lỗi, hãy thiết lập đường hầm SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Thay thế các đoạn mã sau:

• LOCAL_DEBUG_PORT: Cổng gỡ lỗi trong môi trường cục bộ của bạn.
• REMOTE_USERNAME: Tên người dùng trong môi trường từ xa của bạn.
• REMOTE_ADDRESS: Địa chỉ của môi trường từ xa.
• REMOTE_DEBUG_PORT: Cổng gỡ lỗi trong môi trường từ xa.

Cổng gỡ lỗi trong môi trường cục bộ hiện được liên kết với cổng gỡ lỗi trong môi trường từ xa.

Bắt đầu gỡ lỗi

Từ IDE Visual Studio Code được cài đặt trong môi trường cục bộ, hãy làm như sau:

1. Trong cửa sổ mới, hãy mở mã nguồn của ứng dụng.

2. Tạo tệp .vscode/launch.json trong thư mục gốc và định cấu hình bản khởi chạy có tên là Debug Remote đính kèm vào cổng gỡ lỗi trong môi trường cục bộ của bạn:

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

   Thay thế LOCAL_DEBUG_PORT bằng cổng gỡ lỗi trong môi trường cục bộ.

3. Thêm điểm ngắt trong mã nguồn của ứng dụng để tạm dừng xử lý yêu cầu HTTP, đồng thời bắt đầu chạy và gỡ lỗi bằng cấu hình Debug Remote đã thêm trước đó.

Tương tác với tiện ích bổ sung của Google Workspace mà bạn đã cài đặt. Tiện ích bổ sung Google Workspace của bạn không trả lời vì tiện ích này đang được gỡ lỗi trong IDE Visual Studio Code.

Chủ đề có liên quan

Tìm hiểu cách truy vấn nhật ký lỗi.