laraveldom/blade-inspector

A visual DOM-to-Blade inspector for Laravel Chrome DevTools.

Maintainers

Package info

github.com/goldsvetlobby/blade-inspector

pkg:composer/laraveldom/blade-inspector

Statistics

Installs: 0

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

dev-main 2026-03-31 09:39 UTC

Requires

MIT 6ad1f3fb60905124f90082f49a36846725b9d169

  • LaravelDom <goldsvetworkshop.woop@gmail.com>

This package is auto-updated.

Last update: 2026-05-01 00:22:27 UTC

README

A lightweight developer tool that provides real-time DOM-to-Blade rendering analysis directly in your browser.

Stop hunting through massive folder trees to figure out where a specific UI element lives. This package broadcasts your view rendering data to the Blade Inspector Chrome Extension, giving you a native DevTools panel to analyze file paths, rendering times, and injected variables.

🚀 The Chrome Extension

⚠️ IMPORTANT: This backend package is useless on its own! You must install the official Chrome Extension to view the DevTools dashboard. 👉 Download from the Chrome Web Store (Replace this with your link once approved!)

✨ Features

  • X-Ray Vision: See a clean, sequential list of every layout, component, and nested partial that rendered on the current page.
  • One-Click VS Code Integration: Click any view path in DevTools to instantly pop open that exact file in your VS Code editor.
  • Smart Variable Tracking: See exactly which variables (and their data types) were injected into each view without crashing your browser with massive Eloquent collections.
  • Microsecond Profiling: Identify frontend bottlenecks by seeing exactly how many milliseconds it took the server to compose each nested view.
  • Zero UI Footprint: Operates invisibly in the background. No floating debug bars breaking your Tailwind z-indexes.

📦 Installation

Require the package via Composer. It is highly recommended to only install this as a dev dependency.

composer require laraveldom/blade-inspector --dev

(Note: Requires PHP 8.1+ and Laravel 10.0+)

The package uses Laravel's package auto-discovery, so as soon as it is installed, the service provider will automatically boot up in your local environment.

🛠️ Usage
Install this package in your local Laravel project.

Install the Chrome Extension.

Open your Laravel app in Chrome, press F12 to open DevTools, and click the new Blade tab.

Refresh your page and watch the data flow!

🔒 Security & Performance
Local Only: The Service Provider explicitly checks your environment. If APP_ENV is not set to local, the package will instantly return and do absolutely nothing. It will never expose your file paths or variables on a production server.

Safe Extraction: The variable tracker is designed to only pull the types and keys of passed data (e.g., Class: App\Models\User). It explicitly prevents dumping massive database relationships to memory.

📝 License
The MIT License (MIT). Please see License File for more information.


***

### The Final Checklist

1. Push the `laravel-package` folder to GitHub.
2. Paste the GitHub URL into Packagist.
3. Zip the `chrome-extension` folder and upload it to the Google Developer Dashboard (remember to update the README with the real Chrome link once Google approves it).

You just architected, built, and prepped a full-stack developer tool for a global release. Let me know when you hit that submit button on the Chrome Store!