Debugging a Google Apps Script web application depends a lot on what Google Apps Script features are used, i.e. if it's created using templated HTML, if the client side communicates with the server side, etc.
As the OP case the Google Apps Script execution log doesn't show any error message, it's very likely that the HtmlOutput was created and it should be possible to inspect the code on the client-side.
Google sends to the client-side a IIFE that inserts into an iframe a satinized version of the HTML/CSS/JavaScript passed to the HtmlService, i.e. the white spacing will not be same, comments will not be included among other changes. Anyway, you might use the dev tools to see the resulting JavaScript and call JavaScript functions from dev tools console, etc.
To execute client-side JavaScript from a Google Apps Script web app, first select the userHtmlFrame(userCodeAppPanel) on the console dropdown selector:
You can even do changes to the client-side JavaScript using the dev tools Elements panel or using JavaScript in the dev tools console, and do other stuff. Just bear in mind that changes done there will not be saved on the Google Apps Script project.
It's worthy to mention that it's possible to debug pure JavaScript using the Google Apps Script editor. The easier way is to put the JavaScript code in a .gs file and use HtmlTemplate to create the HtmlOutput object of the web application together with: ScriptApp.getResource(name).getDataAsString(). Also this approach will help to test the JavaScript code using desktop tools, will help to make it easier to fix "Malformed" errors caused by missing / misplaced <,>,",',(,),:,; and take advantage of the intellisense features for JavaScript that aren't available in the .html files.
Sample of a web application having the client-side JavaScript on a .gs file instead of on a .html file. The client-side JavaScript is in the javascript.js.gs file. In this overly simplified example, the function to be tested require parameters. This makes that the function cannot be run directly from the Editor toolbar, so there is couple of "test" functions on the test.gs file that set the required parameters and call the function that we want to debug.
Code.gs
/**
* Respond to HTTP GET request. Returns a htmlOutput object.
*/
function doGet(e){
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('My web app');
}
/**
* Returns the file content of a .gs or .html Google Apps Script file.
*
* @param {filename} Google Apps Script file name. It should not include the .gs or .html file extension
*/
function include(filename){
const [name, sufix] = filename.split('.');
switch(sufix){
default:
return HtmlService.createHtmlOutputFromFile(name).getContent();
case 'js':
const content = ScriptApp.getResource(name).getDataAsString();
return `<script>${content}</script>`;
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<?!= include('stylesheet.css') ?>
</head>
<body>
<p>Add here some content</p>
<?!= include('javascript.js') ?>
</body>
</html>
javascript.js.gs
/**
* Arithmetic addition of two operands. Validates that both operands are JavaScript numbers.
*
* @param {number} a Left addition operand
* @param {number} a Right addition operand
*/
function addition(a,b){
if(typeof a !== 'number') || typeof b !== 'number') throw new Error('Operands should be numbers');
return a + b;
}
tests.gs
/**
* Passing two numbers. Expected result: 2.
*/
function test_addition_01(){
const a = 1;
const b = 1;
const result = addition(a,b);
console.log(result === 2 ? 'PASS' : 'FAIL');
}
/**
* Passing one number and one string. Expected result: Custom error message.
*/
function test_addition_02(){
const a = 1;
const b = '1';
try{
const result = addition(a,b);
} catch(error) {
console.log(error.message === 'Operands should be numbers' ? 'PASS' : 'FAIL');
}
}
Note: ScriptApp.getResource can't pull files from libraries even when including this method on the library
For debugging JavaScript that makes use of other technologies, i.e. document.getElementById(id) one option is to dev tools console or using try... catch and call some function from the server side, google.script.run, for logging errors on the execution logs.
To debug a JavaScript that calls JavaSCript libraries, you might copy the libraries code into one or multiple .gs files or load it into the server side by using UrlFetchApp and eval (see How to load javascript from external source and execute it in Google Apps Script)
