Enhanced live preview element highlight

[a-axton]

I've created a library for a personal project that duplicates the functionality of the chrome css box model inspector. It highlights width, height, border, padding and margin. I think this could be a very powerful debugging tool when live editing css files.

Demo: http://a-axton.github.io/box-model-inspector
Repo: https://github.com/a-axton/box-model-inspector

I was wondering if this would be a desired extension or a possible enhancement? I haven't worked much with the brackets codebase but if there is any interest I'd love to move forward on this.

[swmitra]

@a-axton Good job on the box-model inspector 👍

Brackets does very little in terms of DOM inspection/interaction. This is primarily a code editor with the addition of live-preview where a developer can preview the changes in browser.

I would suggest to come up with an extension which can add this functionality to existing live preview. If you have any doubts regarding how to write a brackets extension, you can find relevant information in the wiki or you can always post your doubts to 'Brackets-dev" google group or join Brackets slack and post your queries there to get fast feedback.

[DmitryNikulnikov]

@a-axton
Hi, Andy! 👋🏻 You have no right to abandon such awesome idea! 😅 The extension could be extremely useful for many folks who have to deal with a daily debugging routine.
E.g. right now the only way to see a box-model (that colourful scheme with highlighted paddings/margins) is to launch Chrome Inspector. But it crashes Brackets' Live Preview. It would be great to be able to use the Chrome's box model inspector without Chrome. Directly in the Brackets' Live Preview. Without any crashes.
Thx!

[Worie]

I've created a PR in which i try to implement this to Brackets directly (not as extension), here's the PR: #12949 .