topic Re: Testing custom widget in Web AppBuilder Custom Widgets Questions

Testing custom widget

DrewPhillips2 — Thu, 24 Oct 2019 22:02:53 GMT

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!

Re: Testing custom widget

RobertScheitlin__GISP — Fri, 25 Oct 2019 13:14:23 GMT

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.

Re: Testing custom widget

shaylavi — Sun, 27 Oct 2019 23:01:40 GMT

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.

Re: Testing custom widget

DrewPhillips2 — Mon, 28 Oct 2019 15:22:49 GMT

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.

Re: Testing custom widget

RobertScheitlin__GISP — Mon, 28 Oct 2019 15:54:27 GMT

Correct.

Re: Testing custom widget

DrewPhillips2 — Mon, 28 Oct 2019 16:52:02 GMT

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?

Re: Testing custom widget

RobertScheitlin__GISP — Mon, 28 Oct 2019 17:09:42 GMT

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).

Re: Testing custom widget

shaylavi — Tue, 29 Oct 2019 00:30:00 GMT

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.