Having issues debugging in Chrome w/Google Apps Script

Question

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.

Answer 1

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.