GAS 除錯

2025-12-312025-12-31

在 Code.gs 進行除錯

在後端環境除錯相對直覺。你可以直接在程式碼左側點擊行號設置斷點。點擊上方工具列的「偵錯」按鈕後，程式會執行到斷點處停止。這時你可以查看右側面板的變數狀態。

如果不想中斷執行，最常用的方法是使用 Logger.log() 或 console.log()。這兩種方法都會把訊息紀錄在下方的執行日誌中。執行完畢後，點擊左側導覽列的「執行項目」，就能看到所有過往的 Log 紀錄與報錯資訊。

在 index.html 進行除錯

前端的 HTML 檔案無法直接在 GAS 編輯器裡除錯。你需要透過瀏覽器的開發者工具。在部署或預覽網頁後，對著網頁點擊右鍵選擇「檢查」。在「Console」分頁中，你可以看到 JavaScript 的報錯。

如果你在 HTML 的 <script> 標籤中寫了程式碼，可以在代碼中加入 debugger; 指令。當瀏覽器開發者工具開啟時，執行到這行會自動暫停，讓你檢查前端變數。如果是透過 google.script.run 呼叫後端失敗，記得在前端加上 withFailureHandler 來捕捉錯誤訊息並印在 Console。

帶有錯誤處理的 google.script.run 範例碼

後端 Code.gs 的實作

在後端處理資料時，最怕不知道變數傳到了哪裡。你可以利用 try...catch 語法包住代碼。這樣當程式出錯時，就不會直接當掉，而是能回傳清楚的錯誤訊息。

function processData(input) {
  try {
    // 這裡放主要的邏輯
    return "處理成功";
  } catch (e) {
    Logger.log("出錯了：" + e.message);
    throw new Error("後端失敗：" + e.message);
  }
}

這段程式碼會把詳細的錯誤記錄在 GAS 的執行日誌裡。對前端來說，它會收到一個明確的報錯對象。

前端 index.html 的串接

在 HTML 頁面，我們利用 google.script.run 呼叫後端。關鍵是要接上 withFailureHandler。這個函數會捕捉後端丟出來的任何錯誤。

function callServer() {
  google.script.run
    .withSuccessHandler(function(res) {
      console.log("成功拿回資料：", res);
    })
    .withFailureHandler(function(err) {
      console.error("呼叫發生錯誤：", err.message);
    })
    .processData("測試資料");
}

當你點擊執行後，打開瀏覽器的檢查工具（F12）。如果出錯了，紅色的錯誤字樣會出現在 Console 頁面。這讓你一眼就能看出問題是出在前端的變數傳遞，還是後端的邏輯錯誤。

具備自動儲存功能的完整範例

後端 Code.gs 的儲存邏輯

後端主要負責把資料寫入試算表。我們會先檢查輸入是否為空。如果寫入過程發生問題，catch 區塊會捕捉錯誤並把詳細訊息丟回前端。這能避免前端一直處於等待狀態。

JavaScript

function saveToSheet(data) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName("工作表1");
    sheet.appendRow([new Date(), data]);
    return "儲存成功";
  } catch (e) {
    throw new Error("試算表寫入失敗：" + e.toString());
  }
}

這段程式碼會回傳一個字串給前端。如果你的工作表名稱寫錯，它就會觸發錯誤。

前端 index.html 的自動機制

前端我們可以使用 setInterval 來達成自動儲存。每隔一段時間就抓取輸入框的內容傳給後端。我們在 Console 印出狀態，方便你追蹤每次存檔的時間點。

HTML

<input type="text" id="userInput" placeholder="輸入內容會自動存檔">
<p id="status"></p>

<script>
  // 每 10 秒自動執行一次
  setInterval(function() {
    var val = document.getElementById("userInput").value;
    if (!val) return;

    document.getElementById("status").innerText = "儲存中...";

    google.script.run
      .withSuccessHandler(function(msg) {
        document.getElementById("status").innerText = msg;
        console.log("自動存檔紀錄：" + new Date().toLocaleTimeString());
      })
      .withFailureHandler(function(err) {
        document.getElementById("status").innerText = "存檔失敗";
        console.error("錯誤細節：", err);
      })
      .saveToSheet(val);
  }, 10000);
</script>

這樣你只要開著網頁輸入，後台就會自動運作。出問題時，直接看瀏覽器 Console 就能知道是哪次請求斷掉了。

如何把這個網頁正式部署成網頁應用程式

部署網頁應用程式的步驟

要讓別人看到你的網頁，必須進行部署。點擊編輯器右上角的「部署」按鈕，選擇「新增部署」。在選取類型的地方，點擊齒輪圖示並選擇「網頁應用程式」。

在設定頁面，將「執行身分」設定為「我」，並將「誰可以存取」設定為「任何人」。這步很重要，如果沒有設定為任何人，外部使用者或未登入 Google 的人會無法開啟網頁。點擊部署後，你會得到一段網址。

程式碼的基本要求

為了讓網頁能順利顯示，你的 Code.gs 必須包含一個名為 doGet 的函式。這是 Google 指定的進入點。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setTitle('我的自動存檔網頁')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

這段代碼會讀取你的 index.html 並把它渲染成網頁。加上 setXFrameOptionsMode 可以避免網頁在某些環境下被阻擋顯示。

更新網頁內容

如果你修改了程式碼，必須重新部署才能看到效果。點擊「管理部署」，點擊鉛筆圖示編輯，然後在版本選單選擇「新版本」。

如果只是為了開發測試，建議使用「測試部署」。測試部署提供的網址會即時反映你最新的程式碼變動，不需要每次都重新發布新版本。這在除錯階段非常方便。

Max的程式語言筆記