Debugging applications built with HTML Service can feel like a two-part process: debugging the server-side Apps Script code and debugging the client-side HTML, CSS, and JavaScript running in the browser. Fortunately, Google Apps Script provides excellent tools to help you tackle both.
The primary tool for debugging your Apps Script code is the execution log. When you run a script, any output from Logger.log() statements will appear in the execution log. This is invaluable for tracing the flow of your script and inspecting variable values.
function myFunction() {
var data = SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
Logger.log('Data retrieved from spreadsheet: %s', data);
// ... further processing ...
}To view the execution log, go to the Apps Script editor, click on the 'Executions' icon (looks like a clock), and then select the execution you want to inspect. You'll see a 'Logs' tab at the bottom.
For debugging your client-side code (HTML, CSS, and JavaScript running in the browser), you can leverage the browser's built-in developer tools. When your HTML Service web app is open in a browser, you can right-click anywhere on the page and select 'Inspect' or 'Inspect Element'.
This opens a panel with various tabs: 'Elements' (to inspect the HTML structure), 'Console' (to see JavaScript errors and console.log output), 'Sources' (to view your loaded JavaScript files and set breakpoints), and 'Network' (to see requests made by your web app).
Crucially, any console.log() statements in your client-side JavaScript will appear in the browser's developer console. This is the equivalent of Logger.log() for your client-side code.
// client-side JavaScript
console.log('Page loaded and client-side script is running.');
function sendDataToServer() {
google.script.run.withSuccessHandler(onSuccess).processClientData(someClientData);
console.log('Sent data to server.');
}
function onSuccess(serverResponse) {
console.log('Received response from server:', serverResponse);
}Setting breakpoints in the browser's developer tools is also a powerful technique. In the 'Sources' tab, you can navigate to your loaded JavaScript files and click on the line numbers to set breakpoints. When your script execution reaches a breakpoint, it will pause, allowing you to inspect the values of variables at that moment and step through your code line by line.
When communicating between the client and server using google.script.run, errors can occur on either side. If google.script.run throws an error, it will be caught by the withFailureHandler() you can attach to your google.script.run calls. This handler receives an error object that can provide clues about what went wrong.
google.script.run
.withSuccessHandler(onSuccess)
.withFailureHandler(onFailure)
.callServerFunction(clientData);
function onFailure(error) {
console.error('Server-side error:', error);
// Display a user-friendly error message
}For more complex issues, consider using try...catch blocks in both your server-side and client-side JavaScript to gracefully handle potential errors and log them for inspection.
graph TD;
A[Client-side JavaScript] -->|console.log()| B(Browser Developer Console);
A -->|Breakpoint| C(Pause Execution & Inspect);
A -->|google.script.run()| D(Server-side Apps Script);
D -->|Logger.log()| E(Apps Script Execution Log);
D -->|Error| F(Apps Script Execution Log/Failure Handler);
A -->|google.script.run() FailureHandler| G(Browser Developer Console);
E --> H{Inspect Logs & Variables};
B --> I{Inspect Logs & Variables};
C --> J{Step Through Code};
G --> K{Inspect Error Details};