1

I am trying to debug JavaScript code in Chrome. I am using Google Apps Script. In my JavaScript code (which is definitely being ran) I put a debugging; line because I can't simply find my code in the Source panel and put a break point on a line.

The only code files I can find in the Source panel are basically "garbage" machine style code. I cannot find the files for my app which is why I tried the debugger; line in my actual source code. It appears that the program does halt at the point in time where I have a debugger; line, but this is only represented in Chrome debugger by a pause, I can't actually view my code that it's hit on. (It should just jump to the code that it's stopped on) Instead it always shows some "userCodeAppPanel" which is just machine style code...

I find it nearly impossible to debug as a result without simply just using console.logs, which is just simply not enough for effective debugging.

Birdman
  • 1,404
  • 5
  • 22
  • 49
  • I mean that is helpful, especially the information about how the code get re-written. That's most of the problem is I can't really see what I'm debugging. Due to other limitation like how all of your files must be .js or .html, you have to do weird things to get CSS included. Therefore I don't think this is something that can be debugged locally. The most odd part is VERY occasionally, the Chrome debugger displays my .js code like I would expect, and I can step through fine. Upon refresh, it's back to garble. I'm basically baffled on why that would occur if the code is always re-written. – Birdman Feb 01 '19 at 01:57
  • @Birdan Ok, but what is the question? – Rubén Feb 01 '19 at 02:04
  • I'm confused because at one point it WAS letting me see my exact JS code and step through as I would expect in an IDE. Now it's just giving me this garbage code. I tried resetting all chrome debug settings to default and pushing a current version of the code and viewing it. So that is my confusion. At one point it was working as expected where I could see my code and it would break at the point I expect and bring me to my JS breakpoint. Now it's just garbage code...I'm so confused why this would change. If the code always get re-written it should be 100% consistent. – Birdman Feb 01 '19 at 02:08
  • Please update the question, add a [mcve] an make a specific question as is suggested in [ask]. – Rubén Feb 01 '19 at 02:11

1 Answers1

0

Caja changes the JavaScript into an unreadable format. Chrome can debug it and even step through it, it just can't render it correctly.

So to debug your script, you need to get it past Caja intact. One way to do this is to change the script into a string and push the string into your app. Then, once you're past Caja and in your app, turn the string into live html, for example via the jquery .html() command. This way your script will not be sterilized by Caja and Chrome can properly display it.

The question remains why sometimes the Chrome dev tools properly display the original JavaScript. I presume this is some failsafe or failure case of Caja.

Mackey McCandlish
  • 1
  • According to [this answer](https://stackoverflow.com/a/15168485/1595451) from Eric Koleda, Caja was removed from Google Apps Script, but still the client-side code passed to the HtmlService is satinized some way. – Rubén Oct 06 '22 at 19:14