Visual Debugger

🚀 Visual Debugger adalah library JavaScript modular untuk mendeteksi baris visual (line-break, wrapping, dan layout) pada elemen HTML di browser. Cocok untuk analisis layout, debugging UI, atau membuat fitur "read more", tooltip per baris, dan lainnya.

✨ Fitur Utama

✅ Deteksi dan ambil data baris yang di-wrap, <br>, atau akibat CSS flow. ✅ Highlight baris tanpa mengubah DOM asli
✅ Mendukung elemen inline, block, dan kombinasi nested
✅ API sederhana & clean

🔧 Instalasi

1️⃣ NPM

npm install visual-debugger

2️⃣ Manual (Browser)

Unduh VisualDebugger.js, lalu:

<script src="VisualDebugger.js"></script>

🚀 Penggunaan

ES Module (Modern)

import visualDebugger, { VisualDebugger } from './VisualDebugger.js';

const v = visualDebugger(document.querySelector('.target'));
v.highlight();
console.log(v.lines);

CommonJS (Node.js)

const { visualDebugger, VisualDebugger } = require('./VisualDebugger.js');

const v = visualDebugger(document.querySelector('.target'));
v.highlight();

Browser Global

<script src="VisualDebugger.js"></script>
<script>
  const v = visualDebugger(document.querySelector('.target'));
  v.highlight();
</script>

✨ API

VisualDebugger(el)

Instansiasi class baru:

const v = new VisualDebugger(el);

visualDebugger(el)

Helper function untuk instansiasi cepat:

const v = visualDebugger(el);

🌍 Dukungan Lingkungan

✅ ES Module

✅ CommonJS

✅ Browser (<script>)

📊 Struktur Data lines

Setiap baris visual direpresentasikan sebagai objek:

{
    node: Node,          // Node asal
    x: Number,           // Posisi X (viewport)
    y: Number,           // Posisi Y (viewport)
    top: Number,         // Dimensi kotak
    left: Number,        // Dimensi kotak
    right: Number,       // Dimensi kotak
    bottom: Number,      // Dimensi kotak
    height: Number,      // Dimensi kotak
    width: Number,       // Dimensi kotak
    text: String         // Teks pada baris
}

🧪 Contoh Test

HTML:

<div id="testElement" style="width: 300px; height: auto;">
  Baris pertama.<br><br>
  Baris kedua dengan <a href="#">link</a>.
  <div style="height: 50px;">Blok lain</div>
  Baris terakhir.
</div>

JS Test:

import VisualDebugger from 'visual-debugger';

const dbg = new VisualDebugger(document.querySelector('#testElement'));
console.log(dbg.lines);

✅ Hasil: Array dengan data per-baris (termasuk baris kosong & wrapping).

🔥 Catatan Tambahan

Khusus untuk development frontend heavy:

• Cocok dipakai untuk inspeksi layout, debugging truncation, read more, dan tooltip.
• Bebas dimodifikasi untuk kebutuhan spesifik.

Changelog

[1.1.1] - 2025-05-27

🎯 Fitur Utama

• Memperbaiki kesalahan index

[1.1.0] - 2025-05-27

🎯 Fitur Utama

• Deteksi baris visual dari elemen HTML (wrap, <br>, dsb)
• Highlight baris secara visual di browser
• Akses data baris: lines

🔥 Dukungan Multi-Environment

• ESM (import)
• CommonJS (require)
• UMD Global (<script>)

🛠️ Struktur API

• Class VisualDebugger
• Function visualDebugger(el)

[1.0.0] - 2024-05-27

🎉 Initial Release

• Fitur utama:
  • Deteksi semua baris visual (line-break, wrapping, baris kosong) di DOM
  • Mendukung inline, block, nested elements
  • Highlight per baris visual tanpa mengubah DOM asli
  • API modular, clean, dan siap digunakan untuk analisis layout dan UI debugging
  • Encapsulation: Private methods untuk internal logic (getBreakLine, analyze)
  • Getter lines untuk ambil data hasil analisis
  • Method highlight(), clear(), dan toggle() untuk overlay

Terima kasih telah menggunakan Visual Debugger! 🚀