Debugging JavaScript in Canvas using DevTools

[NatFeibish]

Two questions in one day!

I uploaded some JavaScript, and it doesn't work in Canvas. Okay, no problem, just need to debug. I opened up Chrome Dev Tools and for the life of me could not find my JS file, or code, anywhere. I did upload it using the Theme Editor. I verified that it is there, and I could find it hosted on AWS (not where I put it so it was loaded there). But with the page loaded, within its sources, I could not find it anywhere in order to debug. I utilized search functionality on both lines of my functions and the name of the file. Nothing.

Understand that it works outside of Canvas, so there is some internal conflict. I need to test it within the Canvas environment, but I just can't find the thing. I'm guessing it may have gotten rolled into another file somewhere but I can't find the file. 

How do I debug, within Canvas, using Dev Tools?

[chriscas · Accepted solution]

Hi @NatFeibish,

You might be experiencing a slight upload/cache delay with your upload, assuming your theme was saved and applied correctly.  You should definitely see your files, as shown in the screenshot here form our Canvas instance:

If you still don't see anything after maybe 10-15 minutes, I'd go back to the theme area and make sure everything you did is still there.  Also, make sure you're in the account/subaccount that you made the theme changes to, and not something in a different branch of your account structure (I've been caught out by that a few times before).

-Chris

[NatFeibish]

I had only installed a single JavaScript file, not one for both mobile and desktop. BUT THAT BEING SAID Thank you for showing what top folder it is in. That's the big piece of information I was missing. 

[dtod]

Another solution is to add a console.log message in your code and then jump to the source from that log line.

You can also set up local overrides to do your development work.