Debugging Server-side Errors and Inspecting App Connect Components Data

[Teodor]

Intro

Wappler just got even better with two new tools: the Network Panel and the Live Data Panel.

The Network Panel helps you check network requests and spot errors, just like browser developer tools, but it’s built right into Wappler. The Live Data Panel lets you view and inspect real-time data and properties of your app’s components.

Both tools are fully integrated into Wappler, making debugging and working with data easier and faster.

Network Panel

You can find the Network panel icon next to the Structure panel icon:

On the top of the Network panel you can find useful filters, which you can use to filter the requests by resource types - stylesheets, scripts, assets and XHR (Server Connect or API calls):

You can expand a resource to see its Status, MimeType, Headers:

If there's and error loading the resource you can easily check it:

You can filter and show just the XHR requests:

This will show you any Server Connect or API call on your page, where you can inspect its response:

Live Data Panel

The live data panel provides you with live data from the components on your page, similar to what some of Wappler users already do in the browser console using dmx.app.data
You can find the Live Data panel icon next to the Properties panel icon:

Selecting App in the App Structure panel will show all the components on your page, under data:

You can expand any of the components and see its data and properties:

You can also select a specific component in the App Structure and you can find its data in the Live Data panel:

You can inspect all the data in details easily, directly in Wappler:

[baub]

Still can't pass query paramter values onto the page?

[sitestreet]

Am I doing something wrong? Selecting anything just shows:

Please don't say it's Node only

[patrick]

It get's the data directly from App Connect running in design view, make sure App Connect is enabled and the selected element is an App Connnect component.

[Teodor]

@sitestreet

Am I doing something wrong? Selecting anything just shows:

Please don't say it's Node only

Well select a component on the page

[sitestreet]

I think I picked a page where the data was coming from a server connect which required being logged in so returned nothing. And I didn't have App Connect enabled.

I can now see how it all works. I think this is going to be very useful.

[sitestreet]

@Teodor

Well select a component on the page

Even I'm not that daft!

[sid]

Do these panels work only in the design mode? Or do they work for what we see in the browser as well?

Because inside Wappler, it probably won't be useful for me.

[brad]

Bug?

Wappler 7 Beta 15: Network Panel Question (Errors)

Not sure if this is a bug or not. But if there is an error there is no way to see what the error is? Maybe it's still a work in progress? [Screenshot 2025-01-16 at 9.22.32 AM]

[Teodor]

@sid

Do these panels work only in the design mode? Or do they work for what we see in the browser as well?

They work for what you see in Wappler.
In the browser you can use the dev tools

[sid]

@Teodor

In the browser you can use the dev tools

Dev tools is great for Network requests.. but there is no comparable live panels experience.
Maybe a Wappler Chrome extension could be built to get a visual tree of dmx data similar to Live Panel in the dev tools?

[Teodor]

@sid

but there is no comparable live panels experience

Yes there is, you can use dmx.app.data if you want to debug in the browser.

[sid]

Its not a comparable experience. Its very raw and has extra Target node I have to drill down for every single component along with extra data as well.
AC1 was simpler, but with AC2 it has changed (for the better - performance wise, but not so much for browsing).