debug-html

Add/remove debug text from div elements in html files.

Usage

After installing the extension, two commands will now be available from the command palette.

Add Debug: adds .#. after each div element in the html file currently open in the vs code editor
- Optionally enter a letter in following text box to help differentiate files
- Ex: Entering x will output .x#. and empty input will output .#.
Remove Debug: removes the .#. added by the previous command

These should help to quickly identify elements on an html page that has many div elements.

Example

Before:
<html>
  <div>start</div>
  <head>
    <div>head</div>
  </head>
  <body>
    <div>body</div>
  </body>
  <div>end</div>
</html>

After:
<html>
  <div>start</div>.1.
  <head>
    <div>head</div>.2.
  </head>
  <body>
    <div>body</div>.3.
  </body>
  <div>end</div>.4.
</html>

Hope this helps!

debug-html

Noran Diaconu

debug-html

Usage

Example