Debugging without the console is like flying blind

I’m mentoring a highschool student at Iolani High School in the Robotics department.

Read Part Two if you’re interested in learning how we hacked the Google Maps API.

They’re building an autonomous catamaran to take various readings in the canal to monitor the health of the water source.

The student that I’ve been mentoring was tasked with creating 2 front end webpages for the project.

The first page is meant to take all of the sensor readings and display them on a graph so that other users can visually work through the data.

The second page allows users to tell the catamaran where it needs to travel to next by feeding it a GPS coordinate.

In this blog post I’ll share how we trouble shot the first issue. Read the second part of this story if you’re interested in seeing how we hacked the Google Maps API to get it to do what we needed it to do.

We worked on creating the first page with Google App Scripts to get the data from the catamaran and to populate a spreadsheet. The student ran into some problems getting the Javascript to populate the spreadsheet and emailed me:

I am having problems passing an array from my html document to a function in google script document.
I attached images of my code, but if it would be easier to view another way please let me know.

In the html document, the getCoord function (lines 110-120) I am cycling through an array of markers. First, I’m checking to see if the markers are visible on the map, then use getPosition to push the coordinates of the marker into an array named coord. I think something is going wrong here, and the array is empty when it gets sent to the google script document in line 81.

Previously, I passed the markers array to the google script document, but I don’t think getPosition works when it is not in the html document. In line 79, I tested getPosition in the html document and it does return the coordinates of the marker.
In the google script code, I want to input the coordinates into a google sheet. I’ve passed strings from the html document to the google script code which were successfully added to the google sheet. So, I think the syntax is correct.

Please email me if you know what may be going wrong or have any ideas about how to get around this.

I traced through the code and sent the following message back:

Thanks for sending over the code. I managed to find a few issues in the code and I’m happy to help.
The first issue is in index.html where you get the length of the markers array. You’re using markers.getLength(). Getting the length of an array in JavaScript is written as markers.length.
I found this error by using JavaScript’s console.log() function. Please let me know if you want some advice on how to use this debugging function to check on the state of variables in the web browser.
She took the feedback and did a lot more work than I thought she would be able to do.
Lesson learned: Debugging without the console is like flying blind.
That was it for the first page. In Part Two I’ll share a hilariously “hacky solution” we are using to determine if a GPS coordinate on water or land.

Author: David Neely

Professional Software Developer. Technology and Web Coordinator at the University of Hawaii's Manoa Career Center.