> For the complete documentation index, see [llms.txt](https://creatorlabs.gitbook.io/weblabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creatorlabs.gitbook.io/weblabs/getting-started/developer-mode.md).

# Developer Mode

Display Vite-Like errors in weblabs

From version `0.2.8-beta`, weblabs supports debugging logs simillar to what vite shows for react. This is still under development and can cause issues.

## DebugRender()

The new `DebugRender()` function is same as the `render()` function of WebLabs, what it does is intercepts all the errors of a specific application instance and reports them on a modal on the screen. It includes the error name and stack trace.

Example:

```typescript
import { DebugRender } from "@weblabsjs/core/util";
import { div } from "@weblabsjs/core/components";

function App() {

	return div(

		"Hello World",
		intentional_error

	) //intentional error here

}

DebugRender("app", App) //instead of render()
```

The error which will be reported will look somewhat like this:

<figure><img src="https://100730191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgcENi8WepIMy5Us3jkKn%2Fuploads%2FuBp0o2A0Z78uMojxrFUb%2FScreenshot%20from%202023-08-02%2018-12-41.png?alt=media&amp;token=7d0b11f5-7601-4b6c-90fd-2f3a5bb3b6d0" alt=""><figcaption><p>Error at - WebLabs@vite + tailwindcss, font Poppins</p></figcaption></figure>

If you have noticed, the `DebugRender()` function does not rakes `WebLabsElement`, but a function that returns `WebLabsElement`.

{% hint style="info" %}
It is to be noted that the error message will look different depending on the font used, the css styles used and as such. It does not have a pre-defined font style, and does not imports any assests. It is also available in CDN
{% endhint %}