Magento 2 Frontend Dev Tools: Reference Manual & Setup

1. Overview & Architecture

Traditional Magento 2 built-in profilers (like mage/profiler) output raw unstyled tables at the bottom of the page that break responsive CSS layouts, expose sensitive database queries to unauthenticated shoppers if enabled globally, and fail to work behind Varnish Full Page Cache (FPC).

Modracx_FrontendDevTools solves this by injecting an isolated, dark-themed floating HUD toolbar via a frontend response plugin. The toolbar activates only when an authorized developer cookie or IP match is present, leaving 100% of shopper traffic unaffected.

2. System Requirements

Component	Supported Version	Details
Magento Version	2.4.4 – 2.4.7+ (Open Source / Commerce)	PHP 8.1, 8.2, 8.3 compatible
Full Page Cache (FPC)	Built-in File, Redis, Varnish 6.x/7.x	Bypasses cache cleanly via developer debug header
Frontend Themes	Luma, Blank, Hyvä Themes, Custom Themes	CSS is encapsulated in a Shadow DOM wrapper

3. Installation via Composer

# Install module via Composer
composer require modracx/module-frontend-dev-tools

# Enable and upgrade Magento
bin/magento module:enable Modracx_FrontendDevTools
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:clean

4. Profiling Metrics Provided

4.1. Block Execution Tree & Render Durations

Hooks into Magento\Framework\View\Element\AbstractBlock::toHtml via an aroundToHtml plugin. Calculates microsecond render times for every nested container and template block, highlighting blocks taking > 50ms in amber and > 150ms in red.

4.2. Layout Handle Hierarchy

Lists all evaluated layout handles for the current request (e.g. default, catalog_product_view, catalog_product_view_type_configurable) and the order in which XML updates were merged.

4.3. SQL Query Counter & Duplication Detector

Inspects the Zend DB Profiler adapter to record query execution times and flag identical repeated queries (N+1 query loops) triggered during block rendering.

5. Configuration & Security Shielding

Navigate to Stores > Configuration > MODRACX > Frontend Dev Tools:

Configuration Field	Default Value	Description
`Enabled`	No	Master switch for the profiler
`Developer Secret Key`	(Auto-generated)	URL query parameter key to activate toolbar (e.g. `?mxd_dev=secret123`)
`IP Whitelist`	(Empty)	Comma-separated list of IPv4/IPv6 addresses permitted to view profiler
`Profile Database Queries`	No	Enables DB query interception (recommended for dev/staging only)

6. Frequently Asked Questions

Will this slow down production storefront performance? When the master switch is disabled or for visitors without the secret cookie/IP match, the module exits early on the first plugin hook with less than 0.2ms of overhead.

Does it work on Hyvä themes? Yes. Because the toolbar CSS is isolated in a modern Shadow DOM root, Hyvä's Tailwind CSS reset does not conflict with toolbar styling.

Magento 2 Frontend Dev Tools: Reference Manual