Google教學：如何偵錯試算表網頁應用程式？善用 Logger.log 找出錯誤

在使用 Google Apps Script 開發網頁應用程式 (Web App) 時，開發者最常遇到的挑戰之一就是「偵錯」。不同於在編輯器中可以直接執行的函式，網頁應用程式是透過外部的 HTTP 請求 (POST 或 GET) 來觸發，這意味著我們無法在編輯器中按下「執行」或「偵錯」按鈕來驗證帶有參數的程式邏輯。

那麼，當網頁應用程式回傳的結果不如預期，或甚至直接出錯時，該如何找出問題點呢？答案就是善用 Logger.log 來記錄訊息。然而，這其中有一個關鍵的「眉角」，如果沒注意到，你可能會發現紀錄檔(Log)始終是空的。

今天這篇教學，我們就來詳細解說如何正確地使用 Logger.log 偵錯你的網頁應用程式。

為什麼在網頁應用程式中看不到 Log？

首先，我們要理解網頁應用程式的運作模式：

1. 外部觸發：使用者透過瀏覽器訪問發佈的網址，觸發後端的 doGet(e) 或 doPost(e) 函式。

2. 參數傳遞：使用者的操作（例如填寫表單）會以參數的形式，透過事件物件 e 傳遞到你的 Apps Script 程式碼中。

3. 權限問題：當你使用無痕模式或在未登入 Google 帳號的情況下呼叫網頁應用程式時，Google 會將你視為匿名使用者。基於安全考量，匿名使用者的操作不會將紀錄寫入開發者的執行紀錄中。

這就是為什麼很多開發者在程式碼中明明寫了 Logger.log(e.parameter)，卻在「執行項目」中什麼也看不到的原因。

正確的偵錯步驟

要成功看到 Logger.log 的回傳訊息，請務必遵循以下步驟：

步驟一：在程式碼中加入 Logger

在你的 doGet(e) 或 doPost(e) 函式中，在你想要觀察的變數或流程處，加入 Logger.log()。最常見的用法是檢查收到的參數是否正確。

function doGet(e) {
  // 記錄收到的所有參數，確認前端是否正確傳遞
  var params = e.parameter;
  var orderId = params.OrderID;
  var shopName = params.ShopName;

  // 使用 Logger.log 顯示變數內容
  Logger.log("收到的訂單編號: " + orderId);
  Logger.log("收到的店家名稱: " + shopName);
  
  // ... 後續程式碼 ...
  
  // 也可以記錄準備回傳的資料
  var data = []; 
  // ... 查詢資料的邏輯 ...
  Logger.log(data); // 記錄陣列或物件

  return ContentService.createTextOutput(JSON.stringify(data))
      .setMimeType(ContentService.MimeType.JSON);
}

步驟二：透過帶有參數的網址呼叫

執行你的網頁前端，進行一次查詢操作。這時，前端會產生一個帶有參數的完整網址，例如：

https://script.google.com/macros/s/AKf.../exec?OrderID=A0003&ShopName=香純滴雞精

將這個完整的網址複製下來。

步驟三：在「已登入」的瀏覽器中執行

這是最關鍵的一步！

• 錯誤做法：貼到無痕視窗執行。這樣你只會看到程式的最終輸出，但後端不會留下任何 Log 紀錄。

• 正確做法：

  1. 開啟一個新的、正常的瀏覽器分頁。

  2. 確認這個瀏覽器已經登入了與此 Apps Script 專案相同的 Google 帳號。

  3. 將剛剛複製的完整網址貼上，並執行。

步驟四：查看執行項目

回到你的 Apps Script 編輯器，點擊左側的「執行項目」圖示 (一個時鐘)。你會看到剛剛觸發的一筆 doGet 紀錄。點擊它，這次你就能在下方看到所有 Logger.log 所輸出的訊息了！

實戰演練：找出參數名稱打錯的問題

假設你的程式碼總是找不到資料，但前端看起來一切正常。這時你懷疑可能是參數名稱出了問題。

1. 你按照上述步驟，用登入的帳號執行了正確的網址。

2. 你在 Log 中看到 收到的訂單編號: undefined。

這個 undefined 馬上就告訴你問題所在：後端程式碼中的 params.OrderID 變數是空的！這意味著前端傳來的參數名稱並非 OrderID，或者你在後端程式碼中打錯了字（例如，大小寫不符 orderid vs OrderID）。透過這個線索，你就能快速定位並修正錯誤。

總結

為 Google Apps Script 網頁應用程式偵錯的核心技巧很簡單，但容易被忽略，在此為大家總結重點：

• 使用 Logger.log() 來印出你想檢查的變數或流程訊息。

• 必須在已登入開發者 Google 帳號的一般瀏覽器視窗中，執行你的 Web App 網址。

• 切勿使用無痕模式或未登入的瀏覽器來進行偵錯，否則將看不到任何 Log 紀錄。

掌握了這個技巧，未來在開發網頁應用程式時，就能更有效率地找出問題，讓開發過程更加順利。希望這篇教學對您有幫助！