https://github.com/norandiaconu/debug-html

Add/remove debug text from div elements in html files.
https://github.com/norandiaconu/debug-html

npm vscode-extension

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/norandiaconu/debug-html
• Owner: norandiaconu
• License: isc
• Created: 2022-07-15T22:15:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-13T00:35:44.000Z (8 months ago)
• Last Synced: 2025-01-16T01:37:25.099Z (26 days ago)
• Topics: npm, vscode-extension
• Language: TypeScript
• Homepage:
• Size: 99.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 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:  

``  

  `
start
`  

  ``  

    `
head
`  

  ``  

  ``  

    `
body
`  

  ``  

  `
end
`  

``


After:  

``  

  `
start
`.1.  

  ``  

    `
head
`.2.  

  ``  

  ``  

    `
body
`.3.  

  ``  

  `
end
`.4.  

``


**Hope this helps!**