Find and Inspect Apps Script-generated HTML in Chrome Dev Tools

HTML generated from Google Apps Script in Web Apps, or Sidebars and Modals in bound scripts can be pretty tricky to debug from Chrome Developer Tools.

Typically, the approach is to develop and test your Apps Script HTML code externally in a more suitable text editor either via CLASP ( A command line tool that allows you to code locally) or simply by copying and pasting in the code and feeding it sample data from a local text editor.

However, there comes a point where you need to add your HTML to your Apps Script code and test it.

The Problem

Your Apps Script HTML is buried inside nested iframes and processed by Google’s front-end parser, which often hides error locations. This makes debugging in the Apps Script Editor a nightmare. Let’s ease that pain!

The Starter Code

If you want to play along, grab a copy of the starter sheet below. It contains a sample WebApp (which you will need to deploy) and both a Google Sheets sidebar and modal dialogue sample.

The Starter Sheet

To test the modal and sidebar in Google Sheets, click Let's Go! menu and then select an option. You will have to go through the authorisation process the first time to complete this.

To test the HTML as a web app, you will need to first deploy the web app from the Apps Script IDE.

 

All front ends do the same thing: display a ‘find me’ message and call Google App Script to get some ASCII art of your email for a little bit of fun. Oh, and one other ASCII art easter egg that will be revealed later.

The Video

Follow along with the interactive video with your own starter sheet above.

The Video

Accessing Chrome DevTools

For the uninitiated, Google Chrome Developer Tools allows you to look at the code of any webpage, analyse it and run a whole suite of tests on it.

To access Dev Tools, you can:

1. Click on the 3 vertical ellipses (⋮) at the top right.
2. Select More tools
3. Select Developer Tools

Or, act like a coder and use the shortcuts 😉:

• Ctrl+Shift+I (PC), ⌘+Shift+I (Mac), or
• F12

Your dev tools display will be docked in one of 4 locations:

• To the left side of the page
• To the right side of the page
• Below the page
• In its own window

You can adjust this from the 3 vertical ellipses (⋮) at the top right of the dev tools window:

ACTION!

Either run the webapp or open the Google Sheet and then run either the modal or the sidebar. Next, access developer tools. Your developer tools will look a little like this:

Find the iframe where the HTML is contained

As I mentioned in the introduction, our Apps Script-generated HTML can be found in layers of embedded iframes.

Probably the fastest way to get to your HTML code is to:

1. Use the element selector ( Ctrl+Shift+C (PC) or ⌘+Shift+C (Mac). You can also select the element selector icon in the top left of the Dev Tools UI:

   

2. Hover over your HTML code section until you can see that it selects the entire region. You will also see that in the ‘Elements’ section, your code has been highlighted.

   

3. Click the region to select it.
4. In the ‘Elements’ section, you may need to expand the code and all nested code inside it to get where you need to. You can also right-click the element and select Expand recursively to open all the elements.

If you have the console open, you will also see that the console context has changed to userHtmlFrame inside userCodeAppPanel. This will become useful later when we want to test-run functions.

Resolving Errors in Chrome Dev Tools

The keen of you skipping ahead and reviewing the Console window may have found an error in my code (Apart from the other noticeably concerning errors that Google Apps Script and Google Sheets generate for…reasons).

Ideally, with a fairly standard debugging in the dev tools, you could just click the first link below the error message, which would navigate you to the location where the error occurred. However, this will lead you to Google’s special compiler code.

Instead, select the code at the top-right of the error message. This will take you to the correct source of the error.

Note! I have found that sometimes the VM# link is not displayed and is replaced with a userCodeAppPanel link. I have found rerunning the script to resolve this effectively.

Reading the Error

It’s funny, but the majority of comments in these tutorials are about errors the user is facing. Of those errors, most could have been resolved by the user reading the error message.

Here’s the example error:

It looks like we added a ridiculous property to an object in our code. Fortunately for us, the object key is unique enough for us to use the search (Ctrl+F (PC) or ⌘+F (Mac)) to find the culprit.

Wow! The whole Google script call is a red-hot mess.

ACTION! Go back to your Google Apps Script IDE. Navigate to the index.html page and delete the offending line, and save. We don’t need it. Then rerun the script.

Run functions in Chrome Developer Tools from the iframe content.

Another thing we might want to do inside Dev Tools is to test some of our functions and run them directly inside the tool’s console.

You may notice that the console cannot locate your Apps Script-generated functions. If this is the case, you are likely in the ‘top’ context of the Console, and you will need to change to your iframe’s context.

Alternatively, you could go with the Element Selector approach that we mentioned earlier.

Now that we are in the right context, you will be able to run your functions and create tests and console.logs until your heart is content.

ACTION! In the userHtmlFrame context in your Dev Tools Console, run the findMe() function to get a cute little easter egg.

Conclusion

Whelp. That wraps things up for now on using Chrome Developer Tools with Google Apps Script HTML code.

You can also create some custom snippets in dev tools that you could use to generate tests, which would be cool. Let me know in the comments below if you would be interested in a tutorial about this.

Alternatively, I would love to hear about how you use Dev Tools to review and test your own Apps Script front-end projects.

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

~Yagi