Create a plain text representation of an HTML document's skeleton. Great for logging.
html-skelly
on npmjs.org Β»
npm i html-skelly
Get some HTML and create a skelly. Tags will be represented by their name + id + class. Kinda like a CSS selector.
<img id="logo" class="bigger" src="/logo.jpeg">
becomes <img#logo.bigger>
import skelly from 'html-skelly'
const response = await fetch(`https://google.com`)
const html = await response.text()
console.log(skelly('π Google Skelly', html))
console.log(skelly('Google Skelly', html, { flare: false })) // without ANSI/emoji
Output (it looks better in a terminal with color support):
ββ π Google Skelly π©» ββ
β <html>
β <head>
β <meta>
β <meta>
β <meta>
β <meta>
β <title>
β <script>
β <f>
β <style>
β <style>
β <script>
β <g>
β <body>
β <script>
β <div#mngb>
β <div>
β <nobr>
β <b>
β <a>
β <a>
β <a>
β <a>
β <a>
β <a>
β <a>
β <a>
β <u>
β <div>
β <nobr>
β <span>
β <span>
β <span>
β <a>
β <a>
β <a>
β <div>
β <div>
β <center>
β <br#lgpd>
β <div#lga>
β <img#hplogo>
β <br>
β <br>
β <form>
β <table>
β <tr>
β <td>
β <td>
β <input>
β <input>
β <input>
β <input>
β <input>
β <div.ds>
β <input.lst>
β <br>
β <span.ds>
β <span.lsbb>
β <input.lsb>
β <span.ds>
β <span.lsbb>
β <input#tsuid_1.lsb>
β <script>
β <input>
β <td.fl.sblc>
β <a>
β <input#gbv>
β <script>
β <div#gac_scont>
β <div>
β <br>
β <span#footer>
β <div>
β <div#WqQANb>
β <a>
β <a>
β <a>
β <p>
β <a>
β <a>
β <script>
β <k>
β <script>
β <script>
β <amd>
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ