Effective way to debug a Google Apps Script Web App

Question

I have had some experience writing container-bound scripts, but am totally new to web apps.

How do I debug (eg look at variable values, step through code etc) a web app? In a container bound script it was easy, because I could set breakpoints, use the apps script debugger - how do I go about this in a web page eg when I execute a doPost ?

Answer 1

In his excellent book "Google Script", James Ferreira advocates setting up your own development environment with three browser windows; one for the code, one for the live view (in Publish, Deploy as web app, you are provided with a "latest code" link that will update the live view to the latest save when it is refreshed), and one for a spreadsheet that logs errors (using try/catch wrapped around bits of code you want to keep an eye on).

Answer 2

In Web Apps, even the most basic debugging of variables through Logger.log() does not work!

A great solution to have at least simple variable logging available is Peter Herrmann's BetterLog for Apps Script . It allows you to log into a spreadsheet (the same as your working spreadsheet or a separate one).

Installation is very simple - just add an external resource (see the Github readme) and a single line of code to override the standard Logger object:

Logger = BetterLog.useSpreadsheet('your-spreadsheet-key-goes-here');

Remember , that the spreedsheet that you give here as a parameter will be used for the logging output and thus must be writable by anybody !

BetterLog will create a new sheet called "Log" in the given spreadsheet and will write each log call into a separate row of that sheet.

Answer 3

So, for me, I debug the front-end using inspector, I haven't found a way to step through code yet, but you can use 'debugger' in your javascript (along with console.log) to stop the code and check variables.

to debug the backend, what I've been doing is to write my functions like

function test_doSomething(){
  payload = "{item1: 100, item2: 200}"  //<- copy paste from log file
  backend_doSomething(payload)
}
function backend_doSomething(payload){
  Logger.log(payload)
  params = JSON.parse(payload)
  ...
}

Then after refreshing your project on the backend, you can look at executions, grab the payload from the log file, and paste it into your test_doSomething() function.

From there, you are re-creating the call that you want to debug and you can run that, stepping through the backend code as usual.