Blade DevTools

While toying around with Laravel's Blade compiler, I prototyped/hacked together a quick demo of what might turn into proper DevTools like the ones provided by Vue (https://devtools.vuejs.org) or React (https://react.dev/learn/react-developer-tools). As you can see in the screenshot, we can build up a component tree of blade components, together with their props and attributes. By switching out the ViewFactory with one that encodes additional information in HTML-comments, we can extract information about Blade's rendering process. This way, we can parse all of these special comments in the browser to access the information you can see in the screenshot. This forms the basis of e.g. shown a Blade Component tree, instead of the regular DOM, with the option of highlighting the respective DOM Element that was rendered by a particular Blade component. A potential downside is the resulting HTML, which currently looks like this: Email It does add some noise to the resulting DOM. Maybe this could be tuned down a bit, e.g. by only assigning some data-ids and rendering the data nodes at the bottom of the page or in an inline script tag or something. I just wanted to see if there is some interest in the community for a tool like this and get the discussion started / receive some feedback. I was definitely missing DevTools when not working with Vue or React, since sometimes it is interesting to see what props a model received. Not just for simple String properties, but e.g. when passing in eloquent models or other rich classes, where you are interested in the model attributes at the time of rendering. https://preview.redd.it/52qlm0obhoua1.png?width=2560&format=png&auto=webp&s=c3f8a6a19f7a07367c86191d24b3436d3c3c8397 submitted by /u/niclasve [link] [comments]