Debug Mode

If you use TallStackUI you must suffer from a common problem among all developers, even those who do not use TallStackUI: to know the attributes of a component we need to go to our editor, look for the component, and thus see the attributes that were configured. This is a problem because we waste considerable time having to constantly switch between the browser and the code editor.

Looking at the button below...

... Could you tell me exactly what attributes we are using on this?

Debug mode solves this problem by providing a complete overview of the state of all components on the page, regardless of where they are or whether they were called directly or from within other components such as parent and child.

Now that you understand the concept, see debug mode in action:

Did you notice that there are some little icons next to the button and the icon within the button? Put the mouse over them! This is the debug of the button component and also the component inside it, the icon. Note that all properties, including custom attributes, those that are not component properties, are displayed in a list for you.

For a quick and easy activation, you can just create a new env variable in your .env file:

TALLSTACKUI_DEBUG_MODE=true

Debug mode has a settings section in the TallStackUI configuration file. Through this configuration, you can configure several things, such as ignore debug mode for specific components. Click here to know how to publish the configuration file.

// ...
 
'debug' => [
    'status' => env('TALLSTACKUI_DEBUG_MODE', false),
    /*
    |----------------------------------------------------------------------
    | You can control in which environments the debug mode is enabled.
    |----------------------------------------------------------------------
    */
    'environments' => [
        'local',
        'sandbox',
        'staging',
    ],
    /*
    |----------------------------------------------------------------------
    | You can ignore debug mode for certain specific components
    | by setting the exact component name in this array.
    |----------------------------------------------------------------------
    */
    'ignore' => [
        //
    ],
],
 
// ...

• We recommend that you only use debug mode in dev. environments.
• Debug mode is skipped when running unit tests.
• The slot mode in debug tooltip indicates you are set the component content through slots.
• Only string-type attributes will be captured.
• Some alerts may be seen in the browser console when debug mode is activated.