Search code examples
google-chrome-devtoolsadobe-brackets

Brackets Code Editor - data-brackets-id= Issue


I'm relatively new to coding, but after trying a few different editors I've landed on Brackets as the one I am most comfortable with.

There is one thing that is bugging me though. In Chrome Dev Tools Brackets is giving my HTML it's own data-brackets-id's

<body data-brackets-id='8'>
  <div data-brackets-id='9' id="result"></div>
</body>

Obviously this is not reflected in the actual code, but it is an irritation and makes the code harder to read. Also it's driving my tutor crazy.

I'm presuming it has something to do with the Live View feature in Brackets (which I really like) but I'd like to know for sure and would also like to know if it can be disabled.

I really don't want to get into a thing about which editor is the best, as we all know that there are a bunch of excellent code editors out there. But if you have a solution for this, I'd really like to know.

Many thanks.


Solution

  • Yes, these ids are required for Live Preview to update the HTML instantly as you type (check out this talk for an explanation why).

    You can get rid of the id attributes with a bit of work, but HTML edits will only be reflected when you save the file (it'll auto reload). CSS edits will still be reflected on every keystroke though, since that does not require the ids. To do this, you'll need to set up a custom local web server and then point Brackets at your localhost URL. See Live Preview - Using your own backend in the Brackets docs for details.

    However, normally you can only tell that the ids exist if you open Dev Tools - which typically disconnects Live Preview anyway. So another option is to use Live Preview with full HTML live updating when you're just editing, but open the page without Live Preview when you need to debug the page using Dev Tools.