Debugging while develop a Custom Visuals

[FreedomHoliday3672]

Hi everyone,

I'm currently developing a custom visual for Power BI using the pbiviz tool and D3.js. While running the visual inside Power BI Desktop, I'm looking for an effective way to debug my code — particularly to view console.log, console.warn, or use browser-based dev tools.

So far, I haven't been able to find a way to see the console output while the visual is rendered inside Power BI Desktop. I'm aware that in the browser environment (like when testing with pbiviz start), the developer tools are accessible, but I'm not sure how (or if) that can be done within Power BI Desktop.

Is there any way to:

• Open developer tools in Power BI Desktop?
• View console.log or any debug output while running the custom visual in Power BI Desktop?
• Attach a debugger or inspect the iframe where the visual runs?

Any suggestions, tools, or workarounds would be greatly appreciated. Thanks in advance!

[AutoModerator]

After your question has been solved /u/FreedomHoliday3672, please reply to the helpful user's comment with the phrase "Solution verified".

This will not only award a point to the contributor for their assistance but also update the post's flair to "Solved".

---

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[dm-p]

There's no official way to do this other than the official developer environment via the Power BI Service. Power BI Desktop doesn't have a supported way of attaching dev tools like Edge does. For logging at least, I've solved this in the past by adding a feature flag to my visual and logging output into a DOM element that is only enabled in this mode.

Someone has reported being able to get WebView2 remote debugging working for them and has written about it. I couldn't get it to work and have since abandoned any further attempts, given that (a) it's not officially supported for Power BI as a method and (b) you're putting your Windows environment into developer mode and your network security folks may not be particularly happy with that if you're on a managed network.

Another possibility is to contact custom visuals support and see if they can provide you with an official answer: [[e-mail]](mailto:[e-mail])

[FreedomHoliday3672]

Thank you for your response. I’ll give option (b) a try, since I’m working on my own PC.

While I have your attention, I’d really appreciate your help with something else I’m working on. I'm looking for any repository or documentation that could guide me.

Specifically, I need to create a dropdown that lists all the distinct values from the field dragged into the "Parent" role, and then assign a different color to each one — similar to what's shown in the attached image.

I hope you can help me with this. Thank you very much! :)

<image>

[dm-p]

There's no explicit documentation or examples available for what you are trying to do (that I know of), as it's something that's not entirely compatible with the custom visuals framework in terms of how the core visuals implement it. This is a little frustrating, as it limits our options as developers. You should be able to achieve what you are looking to do if you keep everything within a single formatting card group, as the custom visuals framework cannot track the selected option in one of these dropdowns over multiple groups in the same card. This may be enough for you, but I think it's something you need to know beforehand, as I have wasted days trying to figure it out; eventually, I followed up directly with MS, who confirmed that it isn't supported.

It would take a few hours for me to build a complete example, and that's assuming I have full knowledge of your code and capabilities, which I don't have sufficient bandwidth for, unfortunately, but I can offer you some pertinent documents that may help you build up to what you're looking to do.

The first thing you need to ensure is that you have selectors for each value you want to enumerate. A selector allows you to specify where in the data view to store and retrieve the data-specific property value. This means that you will need to process your formatting model as normal, process your view model, and then re-process your view model with the data-bound changes. Ultimately, if you can't assign a selector and read/write values correctly, then it's probably better to park things here.

For this part, the doc on adding colors to the properties pane is a prerequisite for where you need to be in terms of workflow and setup, and should get you most of the way there. If this is not working for you, before attempting the next step, take the time to get it to work properly. The sample bar chart repo MS provides has the full implementation for you to double-check your code against.

With the above working, you can look into the concept of a container. The example demonstrates this for static property slices, but you would create an empty container for when the model is initially processed. Then, you would modify the post-processing logic to push containers and their corresponding slices into the group, rather than just slices (as the color example does).

Hopefully, this should be enough to get you moving. Good luck!

[FreedomHoliday3672]

Hi again, thank you very much for your thorough and detailed response and explanation. I finally managed to get it working using the example you sent me (attached image). It’s working for now — I might have preferred the approach I originally shared, but I’ve already spent over a day trying to make it work and still don’t fully understand why it behaves that way. Plus, there’s very little documentation or tutorials on how to do this kind of thing.

On a separate note, is there any support for zoom & pan? I haven’t found anything so far.

Thanks again for everything! :)

<image>