How to debug web development in Google Application Script?

Question

I am testing/learning webhook. How to send, receive it. So I thought I would use GAS.

I have this simple script and I wonder why Logger does not work. In Projects/Executions I can see that the script doPost was executed but no logs. Email was sent and the script returned the value.

• using old, Legacy Editor (no idea how to get the new one)
• in Menu-Resources-Cloud Platform Project is said "This script has an Apps Script-managed Cloud Platform project."
• when I open the project in editor I get this message "This project is running on our new Apps Script runtime powered by Chrome V8."
• exception logging set to "exceptionLogging": "STACKDRIVER" is set to default

I tried console.log(e); but it did not work for me.

function doPost(e) {
  
 Logger.log("I was called")
 if(typeof e !== 'undefined'){

    Logger.log(e.parameter);
    Logger.log("I was called 2")
 
    MailApp.sendEmail({
     to: "radek@gmail.com",
     subject: "Call Sucessful",
     htmlBody: "I am your <br>" +
               JSON.stringify(e)+ "<br><br>" +
               JSON.stringify(e.parameters)
      
    });
    
  }  
  return ContentService.createTextOutput(JSON.stringify(e))
}

Question1: Can I make Logger work?

Question2: I would like to see accepted data in Debugger, is that possible?

Question3: Is there any way the GAS pushes the data it received to my web browser. Of course the browser is NOT sending the data.

Question4: No related to the topic but... Would you know what I need to do in order to be able to use new Editor?

Answer 1

If you want your own custom log information to go to Stackdriver, then you need to create a Google Cloud Platform project, and associate that GCP project with your Apps Script project.

First create a new GCP Project: Go to your GCP dashboard: https://console.cloud.google.com/home/dashboard?authuser=0

In the blue bar at the top, there is a drop down menu for project names. Click that, and a dialog should appear with a button to create a new project. Create a new Google Cloud Platform project. Copy the Project Number.

Go back to the Apps Script editor. From the legacy Apps Script editor, click the "Resources" menu. Click Cloud Platform project. Paste in the Project Number and click the button.

Now, any console.log() statements you have will send the logs to Stackdriver. And Stackdriver can be viewed in your browser.

Note: Some people set up their own logging system to log information from server side Apps Script code to a Google Sheet. There are some open source repos that are available.

The new code editor does have a "built-in" way to log server side information to a log pane code editor window. But, of course this assumes that you are running code from the code editor. This new feature avoids the need for changing browser tabs to see your logging output. I don't know of any way to log server side info to your browser console. You could save log info into an object, and then send it back to the client after the server code completed, and then log everything in the console.

The way that it might be possible to get logging information depends on how the code was originally triggered.

• From code editor
• From a user using your app
• From a Http Request to your Web App

Logging in Apps Script works differently depending upon:

• run time version being used - V8 or DEPRECATED_ES5 - Set in appsscript.json file or through the "Run" menu in the Legacy editor, Set in "Settings" in new IDE - New Apps Script projects default to V8 so chances are your project is using V8.
• Is your Apps Script project associated with a Google Cloud Platform (GCP) default or standard project
• Is exception logging set to "exceptionLogging": "STACKDRIVER" - Set in appsscript.json file - Default is always to include it - Probably already correct unless you deleted it.
• Using either Logger.log or console.log
• Using console.log in the server ".gs" file or client side ".html" file. console.log can be used in both server and client side code but the log print out goes to different places. You can't see logs in the browser dev tools from a console.log statement in your server code. If you use console.log in server side.gs files, and the Apps Script project is not associated with a standard GCP project, then the log only gets sent to your "Executions." I believe that the only way that you can get your logs sent to Stackdriver is by using a standard GCP project. The problem with that, is that you only have so many GCP projects that you can use without requesting an increase in your quota.

Plus there may be issues (bugs) depending upon how you have logging set up and other factors.

For example: https://issuetracker.google.com/issues/134374008

Answer 2

As lots of people specified, you can use console.log for this.

However, I also work with webhooks from time to time. And I find it much more comfortable to debug directly into google spreadsheets, using code like this

function doPost(e) {
  log('# doPost', JSON.stringify(e));
  try {
    // Some webhook-processing logic here
    if(e.parameter.action == 'test-error') {
      item.something = nothing;
    }
    if(e.parameter.action == 'test-log') {
      log('# custom log', 'Some data');
    }
  } catch(error) {
    log('# error', JSON.stringify([error, error.stack]));
  }
}

function log(event, message){
  SpreadsheetApp.getActive().getSheetByName('Log').appendRow([new Date(), event, message])
}

Example spreadsheet: https://docs.google.com/spreadsheets/d/144i9pxDIB_C8ZRZ-6vd9DiPIw8Rt85hTtVoqk7dtHQg/edit?usp=sharing

You can trigger logging by something like this

curl -X POST https://script.google.com/macros/s/AKfycby3EoaQ8DOt8H_Mc4vjH6JZkhsaAwYHk_sa9HE5Be3qVo0Ym0b2/exec?action=test-error

or

curl -X POST https://script.google.com/macros/s/AKfycby3EoaQ8DOt8H_Mc4vjH6JZkhsaAwYHk_sa9HE5Be3qVo0Ym0b2/exec?action=test-log

You can use same log for your custom logging of some intermediate variable during webhook resolution.

The reason I prefer this over standard stackdriver logging is that google sheets are more explicit and easier to manage.

Answer 3

You can use console.log() to see things within "My Executions".