Google Apps Script & Web App Debugging - How to Troubleshoot Your Code

all right in this video I'm gonna talk about some debugging skills you're gonna need to know so just basic debugging when you're working with Google scripts or web apps so the first thing I'm gonna do I'm gonna open a script editor here let's just name this project and wait forever apparently now when you name a project but that's a part of the new experience anyways so we have this so the first thing is locks right so we have now two type of logs so for example let me just create a variable here and let's just do a quick object in here so like this so now if we want to log this object one option is logger.log and then we can log that variable like this so if I run this what's called my function we just change this if I check my logs which again takes forever nah for whatever reason we get named Joe age 24 see this point zero that's basically its way of telling that this is a number if you don't get that point zero for your numbers in logger lock that basically means that's text but this is what logger.log is giving us let's try console log instead I'm gonna keep both of them so this is our lager put see basically age equals 24 name whatever is this weird way that it's doing the locks and a constant lock is more nodejs or javascript way of getting to lock so basically we get the object and this is in quotations telling it that it's string type so it's text and this is basically 24 so those are basic log types that we have here that we can use to lock things out and see what's actually in the variable that you're trying to look into so most of the time when you do like errors here so let's say we forget to close this bracket you're gonna get this error message right away it's gonna tell you something is wrong it's not gonna actually tell you what's wrong but it's basically telling you that on line 7 it found this and that was not supposed to be there now that's not always gonna be correct but you know at least it gives you something right so that's the error message you're gonna get now if you get to a little more advanced debugging you can start using this debugging tool that's right here so if I click someplace in well let's actually change the code assuming that our variable is changing over time right so if we log this the last time we changed that variable is this 44 so both of this should give us 44 if I save this and run see both of them are 44 again the logger.log gives you the numbers in this dot zero format and this is our regular console lot with debugger you can actually stop your code in the middle and check what's going on at that point with that variable if necessary so I might have a longer piece of code and at some point I want to see what's going on with this object variable at that point of time so for example if I click on this line six seed adds this little red thing stop point so if I click on this little bog thing debug and run this thing so here we are now I'm zoomed in so much we cannot see what's going on so I'm gonna zoom out a little bit so now as I'm zooming out hopefully you can see what's going on it has this screen in the bottom and then we have these local and global variables so let's look at our local variables for a second so if I open local see in our local variables we have this variable and it says that's this variable and the type of it is number and the value is 56 so this point it didn't run this line 6 so it goes up until that line that you clicked on and it stops without actually running that line now if you run this line is gonna become 77 but right now it's 56 now then we also have this step in which is gonna basically run that particular line and it ran this line now it went to this line so now if you look at this variable now it's 77 so now we can step in again and that ran this line so now we can see at that point it's 44 now I'm gonna stop this let me show you something let's actually put this in quotes like this save this and let's run this debugger again so right now if you look at this it's 56 and it's a number type if I step in see we ran that 77 now it's string because it's text and it's 77 in quotes as you can see so we can see what the variable type is now what you're gonna get under this global is basically stuff you have global access to so if I click on this local and close it now the only thing that we created globally is this function test function on this global level so that should be available in global and the rest should be all the global objects that you would expect so it would be things like well let me let me open that so you can see so test function that's this function that we made and the rest of this is basically all the main JavaScript Global's you have like date string regular expression promise etc all the stuff and then if you just keep scrolling at some point you're gonna see all the global objects here that come from Google so see the calendar app browser data studio app document app all this stuff so for example if you're working with spreadsheets you're gonna be using like spreadsheet app right so if I scroll down here we should be able to find it there this spreadsheet app and then it also has all this other services that you can kind of interact with that includes console right so that when we do that console log that's basically this console thing all right so that's that so I'm gonna stop this debugger and click on that to remove that whole red thing so again we can step through our code if we want to see what is the variable value at some point we can use the debugger to be able to do that and very often when you run things and you get data from your spreadsheet or whatever it is you do you often want to use console.log logger.log or the bugger to see did it actually work did it get you the right information you were expecting to get now things get a little more dicey when you start using web apps so if we do an HTML file and let's just make a web app out of this really quickly so I'm gonna go here and this will be for web apps or if you're working with sidebars and all that stuff anything that's HTML related in this case I'm gonna do a web app so do get is our required function for a web app to work and we need to return an HTML service so the file name is web stuff and then we're gonna evaluate that and that should return our HTML service so this should be a valid do get function now inside of here now you're gonna be doing some HTML and JavaScript which is going to be front-end HTML javascript so now let's say in the script we need to go and find this div with an ID app and put something in here so we're gonna do document get element by ID and the ID is app and we need to do text content equals to new text here so hopefully if this works correctly we should see that there is new text here in here in this diff so let me just make a web app out of this and publish this so deploy as web app some PS goes here and then we basically just yeah that's fine execute that's me I'm just gonna keep only myself that's good enough deploy does now we have this code right so I'm just gonna open the latest code that's fine and if I look here see it says new text here so this is when everything goes well so everything worked right now let's say I made a mistake here and I didn't type app right or maybe I did uppercase app now JavaScript is case sensitive and this I these are case sensitive too so this is not supposed to work anymore now if I had save and go back and reload this there's nothing in here now there's no errors showing up in here so you can't tell what's going on so how do you check if you have errors here so what do you do in this web app side you right click now I'm on Firefox so on Firefox I have inspect element if you're on Chrome I think it's called inspect or something like that if you're on a different browser just install Chrome or Firefox there is some inspector in all of them it's just you know painful experiences some of these browsers so grab Firefox or grab chrome some people swear by a chrome as you can see I like to use Firefox but whatever use it doesn't matter just open this basically this is gonna give us what it's gonna give us and that's one of the things about web apps that are painful in Google is because it's doing this i frames inside of iframes inside of ide frames to get to your app now if I go to the console over here that's where I'm gonna get some error messages if I did some errors in that front end JavaScript here it says document get element by ID is null and what that means is that I was trying to find an element with the ID app and it couldn't find it and therefore it's no now let's say we didn't mistyped this with mistyped document and i'm gonna save this go back and reload this and let's see what happens and yet again if I go to console see it says whatever I type is not defined basically because there's no thing like that that exists so this will give you at least some error messages so you can see what happens and that could be not showing up right away so if you have a button and you click on a button it doesn't work you want to open this console after you click on a button and see if you get any error messages here to see what you can do about them maybe you mistype something or maybe it says a bracket is missing or something which could happen too so for example if I had a function here and I didn't close the curly bracket for the function and save this let's actually type this document correctly this time if I go back and reload this and open the inspector see it says missing after functions so it gives you at least some debugging messages so you know what to look for now there are also going to be times when you want to see what's in your variables at some point in your code so let's just close this so you might have some variables that you set in here and you do some extra code here you want to see what's in that some person at some point right or maybe you just do a call to your service to get some data so I'm gonna actually do that after this so you can have an example of that too but let's just start with a basic so I'm gonna just go here and if you wanted to see what's in that some person variable at this point what you would do you would do console.log and that variable I want to run that me function at some point so this actually happens so I'm gonna go back here and do me and Rhonda function execute that so save that if I go back and reload this see that works because I corrected it but let's see what happens now even though you're doing console.log here you're not gonna get this logs in this log because this is HTML client-side client-side is not available in here so on client side this is where you go again to right click inspect element go to console and now see that output Joe because that's what's inside of that variable so that console log is being out put it in this front-end console in your browser you cannot use logger.log here because logger lock doesn't exist here at all logger log is just the server side thing here now let's just do a quick call to our spreadsheet get some data and output and log it out so you can see what's gonna happen so if I go here and say Linda in this a two cell now I want to do a function to go grab that information from the sheet one so I'll go here go to this and create a function and we're going to start with our spreadsheet app that was I think a to sell and I want to do get value so by the way in JavaScript you could do things like this with every dot you could just move to the next line if it gets too big and sometimes you do tabs like this to make it nice but anyways I just want to return this information back once I'm reading this a to sell and get the value out of it here and this could be an array your rating would get values it doesn't matter so if I save this now I have this function get name and I'd like to call that function from our front end site so I go here and to call that function we're gonna do that google script run I'll try to just not do anything fancy here and just keep it like this Google script and this is gonna have a success handler right so and the reason it has a success handler is because we're returning something from that coal and the function that I'm running is this get name which should return whatever it gets from the spreadsheet now this is going to accept a callback function here that's what I'm going to call that function so that's a function we need to define action is gonna accept a variable here that's basically what's being passed from here from this gate name the return value here which in our case should be Linna now I want to see does that work do I get Linda back right so what I can do here I can again do console.log that data to see if I get that information back so if I save this go back and reload if this works it should lock to the console Linda and let's actually remove this one and remember this is the HTML part so it's gonna log this in the browser not here so if I save this and again go back and reload this and by the way if you get that that just means you forgot to give permission because if you're calling spreadsheet app or some other Google service you need to run that function here in the backend to set permissions I'm gonna go get name and run this thing so now hopefully with this I should be able to go back and reopen this and now it works and now if I open the console see Linda is out put it here because after that ran it it did the console log over here and that data is now Linda which is the information we're getting from our spreadsheet so one last thing I'm going to test here because I get a lot of comments that it doesn't work and I'm curious does it actually not work or somebody is just doing something wrong so I get messages when they pass variables to this like when you do a question mark here and do age equals 255 something like that so I constantly get that this doesn't work on the log side when they do this so I'm gonna go here and just do get and here we're gonna get that e which is gonna be that object that comes from here and let's just do just out of curiosity let's do console.log for that e and then do logger.log for that e - let me try to go and try to run this and see if we get anything in our logs you all right so that's actually not returning anything here interesting now what happens when we look at our executions transcript I'm gonna have to zoom out here a little bit so I think the last do get was this and then it's gonna run this function automatically anyways because of that script run but let's open this and see what's going on in there Oh so if we look at our execution see it says parameter is 55 so over here we actually get those values and we have this this one and we have this one I assume this one is console.log and this one is logger.log from the looks of it let me actually go back and delete the other one and see if the bog this is probably the constant lock so let's go check this out so let's remove this logger save this and go back and refresh this page let's just change this 55 to something else too so 777 okay let's go check our executions so see now we have another two this is still running apparently it's s but anyways this is do get let's open this one yeah as I expected the info one was logger.log and this one is console.log so we can still get these we just have to get them from execution transcripts anyways so there it is so that's a couple of logging things you can get your logs here on the front and side you can get your logs in a back-end side you can also get your execution transcripts these are also useful when you have like triggered runtimes like if you set up a function to run every day or every month or whatever or on a form submit and you're trying to see what happened with that submission you would look at this execution transcripts and get some ideas what's going on with those and that should give you all the basic tools you need to do some basic debugging in your code to see what's going on when something doesn't work and something is not working is a part of writing scripts so you have to be patient and look into it maybe look over it the next day sometimes getting some sleep helps there could be one character you've missed some place and then the whole thing falls apart let me know if I forgot something thanks for watching please subscribe and I'll see you next one

Channel: Get __it Done!

Views: 5,893

Keywords: Google, Apps Script, script, web app, Troubleshoot, debug

Id: flxj-QB50zo

Length: 21min 41sec (1301 seconds)

Published: Tue May 12 2020