CODEWITHSUNDEEP
javascriptdebugginggoogle-apps-scriptweb-applicationsgoogle-visualization
Talisin
Talisin

Reputation: 2480

How to go about debugging JavaScript in the HtmlService in Google Scripts

I can't find syntax errors in my JavaScript that is in the Google HTMLService (html window in Google Scripts). My work involves Google Visualizations which requires this. It is my first experience with JavaScript and HTML so I'm quite prone to mistakes making this a distressing problem.

The execution log just shows that the html was run, and I don't where in my code to look for errors. I expect that somewhere would say "error in: line x" or "object not accepted line y" but I just don't know where to look.

I would appreciate any pointers on where to find a solution or how to clarify my question.

Upvotes: 4

Views: 3423

Answers (3)

Adrian
Adrian

Reputation: 10911

I was having some issues debugging client side Javascript in the DevTools, because Apps Script does something making stepping through the code impossible. It would break on debugger, but no code would be visible. However, I found that I could delete and reinject the code and then I would be able to debug it using DevTools again.

<!DOCTYPE html>
<html>
<head>
  <script id='my-script'>
    // code to debug here
    function example_code() {
      console.log('Running sidebar code');
      debugger;
    }
  </script>
  <script>
    function reinjectScript() {
      var existingScript = document.getElementById("my-script");
      console.log("Removing existing script...");
      var scriptContent = existingScript.textContent;
      existingScript.remove();

      var newScript = document.createElement("script");
      newScript.id = "my-script";
      newScript.textContent = scriptContent;

      document.body.appendChild(newScript);
      console.log("Script reinjected.");
    }

    document.addEventListener("DOMContentLoaded", function() {
      console.log("Sidebar loaded, injecting script...");
      reinjectScript();
    });
  </script>

Upvotes: 0

Wicket
Wicket

Reputation: 38131

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, suffix] = filename.split('.');
   switch(suffix){
     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)

Upvotes: 0

Alan Wells
Alan Wells

Reputation: 31300

You can use your browser's Developers Tools. In Chrome, press the f12 button, OR choose More Tools, Developer Tools, and window will open in your browser that looks like this:

Developer Tools

One of the tabs is labeled Console. You can print information to the console by using a:

console.log('This is text: ' + myVariable);

statement.

When the Apps Script macro runs, and serves the HTML to your browser, if there are errors, they will be displayed in the Console Log.

I used the HTML you posted, and got msgs in the console of this:

HTML Error

So, for the JavaScript in a <script> tag of the HTML, you don't look for errors in the Apps Script code editor. You need to use the browsers Developer Tools. The JavaScript in a .gs code file is server side code. It runs on Google's servers. The JavaScript in an HTML tag runs in the users browser on the users computer.

You can also step through client side JavaScript code in your browser.

One problem is, that when the HTML is served, the code is changed.

So the JavaScript in your Apps Script code editor will not look the same as what gets served to the browser. If you view the JavaScript served to the browser, it will look totally different than the code in the Script tag in the original file.

You could also use a code editor that has error checking in it. Net Beans has a free code editor.

Upvotes: 2

Related Questions