How to show debugger in public pages with no header bar

vFlow
, , ,
1

Hi,
My application is mobile centric journey with no header as well as no login screen. I want to show the debugger in my app while doing development. As per my knowledge, there is no way to show debugger on all pages without adding custom headers.

How to show debugger in my app which has no header component?

@tushar.jain @vipin.verma @simran.sachdeva

2 Likes
2

@tushar.jain any ideas?

2 Likes
3

As of now, debugger is visible only on the application header. This can be raised as a feature request. FYI @nimesh.singh

19 Likes
4

One workaround could be to use custom css to hide the header and make debugger button as a floating action button
like in the following image in bottom right corner:

image
image1917×934 32.9 KB

CSS for it:

header .mat-toolbar{
    min-height: 0 !important;
    
}
header .mat-toolbar-row{
    height: 0 !important;
    padding: 0 !important;
    margin-top: -55px !important;
}
.three-dots {
    z-index: 100 !important;
    position: fixed;
    bottom: 20px;
    right: 20px; 
    background: white;
    padding: 10px 0px 10px 10px;
    border-radius: 100%; 
}

.boundary.pt-55{
    padding-top: 0 !important;
}
7 Likes
5

It is still a hack to make header transparent.

Debugger should be attached to app level not to any custom template and should be raised as an feature request

1 Like
6

@DebugHorror Yes its an hack, as we don’t have a open debugger task like we do in Vdesigner. but this would work on the app level and will be visible on every page on which the custom header is configured.

3 Likes