Enhanced live preview element highlight

[core-ai-bot]

Issue by a-axton
Tuesday Nov 22, 2016 at 01:32 GMT
Originally opened as adobe/brackets#12934

---

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.

[core-ai-bot]

Comment by swmitra
Tuesday Nov 22, 2016 at 06:37 GMT

---

@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.

[core-ai-bot]

Comment by DmitryNikulnikov
Monday Dec 19, 2016 at 14:13 GMT

---

@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!

[core-ai-bot]

Comment by Worie
Thursday Dec 22, 2016 at 12:58 GMT

---

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