Testing custom widget

[DrewPhillips2]

I searched the forums and didn't see what I was looking for - please tell me if this question is a duplicate.

I'm a beginner coder trying to customize a widget. I have ~2 years of experience with python scripting but only a passing familiarity with JS and larger web projects.

My question is: how can I debug a Widget that I've customized? At this point I'm just playing around with official widgets to see how modifying things changes the widget. However, any error I make means that the widget just doesn't load and doesn't offer me any debugging info. Is this done through console.log? Or something more web-developer-y?

Thanks for your help!

[RobertScheitlin__GISP]

Drew,

   Normally you will see some error in the browsers web console as to why the widget is bombing. Now it is true that there are some situations where the widget will not load and there is nothing shown in the console but this is an exception. I normally use Chrome dev tools to add breakpoints and inspect the code.

[DrewPhillips2]

Cool, an answer from the Main Man himself! Here's what I understand: you can set breakpoints in the browser's debugger window and see where errors arise in your JS. Then you'd need to use an IDE or a text editor (I'm using Atom) to edit the JS directly. Does that sound right? Thanks again for your help.

[RobertScheitlin__GISP]

Correct.

[shaylavi]

put a "debugger;" statement at the top of your custom code and make sure the browser's devtools are open. you'll hit the breakpoint and take it from there with the debugging tools.

[DrewPhillips2]

That's an alternative to adding breakpoints in the Developer Tools Debugger, right? If I do that will I have to disable those breakpoints when I deploy the app?

[RobertScheitlin__GISP]

Adding a "debugger" command word into your code would have to be removed when you are done with your debugging or before deployment of your code. That is actually why I rarely use them.

I just run the app, go to developer tools, click Sources tab then hit Ctrl+P, type "Widget.js" find my Widget.js I am interested in and click a code line number to add my break point. Then refresh the app and it will then break on that line (if I still have my developer tools window open).

[shaylavi]

As Robert said, they should be removed. It's not best practice to leave those lines around in your code but generally speaking, the users will not experience them as they respond only when the devtools tab is opened. You can also wrap them with an "if" condition.. there are many ways to approach this but they should be definitely cleaned once you're done testing.

I use them for small blocks and usually when I'm not sure what I'm looking for. They act like (hardcoded) breakpoints and I think its a good way to start with web development.