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);
}