Cara menampilkan Garis merah pada WebPage

Sebagai FrontEnd Developer, saya sering memerlukan informasi “block-block” pada suatu WebPage. Simple garis merah di semua Kotak, akan sangat membantu:

  • memberikan Big Picture WebPage
  • melakukan Debugging

Ada beberapa cara:

  • menggunakan simple - JavaScript
  • menggunakan CSS

Menggunakan simple - JavaScript

Gunakan script berikut pada console:

document.querySelectorAll('*').forEach(el => {
    el.style.outline = '1px solid red';
});

Menggunakan CSS

* {
  outline: 1px solid red !important;
}

atau:


* {
  border: 1px solid red !important;
}

hasil seperti berikut:

Garis pada WebPage