Docs: Debugger

About debugger

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Debugger options

Enable debug mode to use debugger panel for administrators and related functions during development.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

  • Debug mode: Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.
    Recommended only in development.
  • Debug mode advanced: Adds more verbose to PHP and JS logs and enables developer mode in admin panel.
    Recommended only in development, for advanced users.

Debugger settings

Enable debug mode to use debugger panel for administrators and related functions during development.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

  • Debug mode: Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.
    Recommended only in development.
  • Debug mode advanced: Adds more verbose to PHP and JS logs and enables developer mode in admin panel.
    Recommended only in development, for advanced users.

Recommended only in development.

Recommended only in development, for advanced users.

Debugger panel options

Set options for debugger panel, available in frontend and admin panel when debug mode is enabled.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

Debugger panel options

Set options for debugger panel, available in frontend and admin panel when debug mode is enabled.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

Debugger settings

Enable debug mode to use debugger panel for administrators and related functions during development.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

  • Debug mode: Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.
    Recommended only in development.
  • Debug mode advanced: Adds more verbose to PHP and JS logs and enables developer mode in admin panel.
    Recommended only in development, for advanced users.

Recommended only in development.

Recommended only in development, for advanced users.

Debugger panel options

Set options for debugger panel, available in frontend and admin panel when debug mode is enabled.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

How to debug

Use debugger panel log for PHP and JS

Add an entry to the debugger panel log in PHP and JS custom files code:

dct_debug(text, variable, level, advanced);

Use this function to debug any variable type with a custom level when debug mode is enabled. In JS, also logs to the browser console.
  • text: Text to debug. Default: empty.
  • var: Variable to debug (any type). Default: empty.
  • level: Level of log entry, allows filtering. Options: "log" (default), "info", "success", "warning", "error".
  • advanced: Only log when debug mode advanced is enabled. Default: false.
  • var_table: Only for JS. Log variable to console in table format. Default: false.

How to use dct_debug function with custom files code:

Use $dct object in PHP and JS

Object $dct contains information about your child theme, environment and current page that can be used in custom JS and PHP code.


How to use global $dct object with custom files code:

Current $dct object contents:
{
    "debug": {
        "enabled": true,
        "advanced": false,
        "maintenance": false
    },
    "scss_compiler": {
        "minify": true,
        "autocompile": false
    },
    "colors": {
        "primary": "#3fa6a5",
        "primary-dark": "#2a6e6d",
        "primary-darker": "#153736",
        "primary-light": "#6bc6c5",
        "primary-lighter": "#a2dbda",
        "primary-comp": "#a63f40"
    },
    "fonts": [],
    "sizes": [],
    "assets": {
        "css": [
            "dct-style-admin",
            "dct-style"
        ],
        "js": [
            "dct-base-js",
            "dct-admin-js",
            "gsap-min-js",
            "ScrollTrigger-min-js",
            "Draggable-min-js",
            "InertiaPlugin-min-js",
            "custom-js"
        ]
    },
    "customizer": {
        "preloader": false,
        "admin_panel": true,
        "login_page": false
    },
    "theme": {
        "Name": "DCT for WP",
        "Version": "1.1.2",
        "Description": "Dynamic Child Theme for WordPress",
        "ThemeURI": "https://www.dctforwp.com",
        "Author": "Estudi FGH.net",
        "AuthorURI": "https://www.estudifgh.net",
        "Template": "Divi",
        "TextDomain": "dct",
        "DomainPath": "",
        "Status": "publish",
        "Stylesheet": "dct-child-theme",
        "StylesheetURI": "https://www.dctforwp.com/wp-content/themes/dct-child-theme"
    },
    "post": {
        "post_title": "Debugger",
        "post_id": 37,
        "post_type": "page",
        "post_status": "publish",
        "post_date": "23/04/2026",
        "post_author": ""
    },
    "user": {
        "user_login": false,
        "user_id": 0,
        "user_name": false,
        "user_email": false,
        "user_roles": null
    },
    "conditionals": {
        "is_admin": false,
        "is_blog_admin": false,
        "is_login": false,
        "is_front_page": false,
        "is_home": false,
        "is_singular": true,
        "is_single": false,
        "is_page": true,
        "is_archive": false,
        "is_category": false,
        "is_tag": false,
        "is_date": false,
        "is_attachment": false,
        "is_author": false,
        "is_page_template": false,
        "is_paged": false,
        "is_post_type_archive": false,
        "is_search": false,
        "is_404": false,
        "is_ssl": true
    },
    "environment": {
        "Site URL": "https://www.dctforwp.com",
        "Theme basepath": "https://www.dctforwp.com/wp-content/themes/dct-child-theme",
        "Theme name": "DCT for WP",
        "Theme version": "1.1.2",
        "Wordpress version": "6.9.4",
        "PHP version": "8.2.31"
    },
    "language": {
        "locale": "en_US",
        "user_locale": "en_US"
    }
}

Maintenance mode

Enable maintenance mode to disable the website for all users except administrators with a customizable page during development.
Recommended only in development.
Site will be disabled to users.


On update: Related theme mod will be updated. If maintenance mode is enabled, site will be disabled for all users except administrators.
On reset: Related theme mod will be reset to default values. Maintenance mode will be disabled.

Maintenance mode

Enable maintenance mode to disable the website for all users except administrators with a customizable page during development.
Recommended only in development.
Site will be disabled to users.


On update: Related theme mod will be updated. If maintenance mode is enabled, site will be disabled for all users except administrators.
On reset: Related theme mod will be reset to default values. Maintenance mode will be disabled.

Recommended only in development.
Site will be disabled to users.

Background

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

deg


primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

%


primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

%

px

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

Message

Add HTML contents to maintenance page
Code: HTML
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40
primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

Custom CSS

Add custom CSS to maintenance page. Message elements are inside a wrapper with class .dct-maintenance-mode-wrapper
Custom CSS is not applied in admin preview. Use a private window or logout to check the maintenance page.

Code: CSS
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.

Maintenance page preview

Maintenance mode disabled.