Search code examples
javascriptdebugginggoogle-apps-scriptweb-applicationsgoogle-visualization

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.

Solution

  • 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.