HI all. I’ve been successfully using Tago.io for some time with a custom dashboard, and now want to develop some custom widgets. I’ve started with the Tago.io ECharts custom widget tutorial ( ECharts Custom Widget Tutorial | TagoIO Docs ) but need some help. I have have the tutorial code building & running in VS Code, and the port-forwarding working so if I connect to the URL from an external browser it loads and displays “Loading…” (as intended since it’s not receiving any Tago device data that way). However, two problems:
Even though the custom widget is running in VS Code (via “npm start”) and it says “debugger attached” I cannot actually debug the code by setting breakpoints, etc. The breakpoints simply don’t work. I know this isn’t a Tago specific issue, but can anybody help with guidance here and successfully debugging in such an environment?
When I create a Custom Widget in a Tago Dashboard and configure it with the same port-forwarded URL, it never loads (and doesn’t need any parameters). I just get the “pulsating gray circle”. I’m using the code unmodified from the tutorial’s GitHub repo and it obviously loads OK when I point at the same URL from an external web browser. What might I be missing?
Have you setup your debugger right?
you need to install chrome debugger extension and add vscode debugging configuration to make it work.
VSCode team has put up a nice tutorial here: Using React in Visual Studio Code
If VSCode Forward Port isn’t working, I recommend using ngrok to expose your local app. Here’s how:
Thanks Gustavo. That was helpful. I’m familiar with VSCode, but not much with React. However, I’m really trying to use Angular (not React) to create TagoIO custom widgets and I’m running into more difficulties there as I’ve been unable to find a good boilerplate/skeleton example online of how to do that so far. See my subsequent support post on that.
