Cara inspect element di hp lewat google chrome android

Dalam dunia coding mengkoding. Terutama yang berkaitan dengan tampilan web atau front end. Bagi kamu yang hobi otak-atik template blogger lewat hp android. Bisa edit html, css, dan javascript. Mengetahui jalannya kode dom dalam dokumen html sangatlah penting. Guna untuk mengecek berhasil dan tidaknya eksekusi script yang kamu jalankan.

Perbedaan view source dan inspect element pada website

Antara melihat source kode web dan inspect element kode web memiliki perbedaan. Dimana source kode web merupakan kode mentahan web yang dirender dalam browser. Tanpa ada perubahan elemen dom yang kerender. Sedangkan inspect element dalam web adalah proses melihat kode web yang sudah berjalan. Dimana kode javasrcipt sudah dieksekusi.

Sebagai contoh berikut source kode dalam web blog.

<html>

   <head>

   </head>

<body>

   <p id="konten">

   </p>

      <script>

      document.getElementById('konten').innerHTML="Text disini";

      </script>

</body>

</html>

Dan ini kode yang didapat dari inspect element di web.

<html>

   <head>

   </head>

<body>

   <p id="konten">

   Text disini

   </p>

      <script>

      document.getElementById('konten').innerHTML="Text disini";

      </script>

</body>

</html>

Antara source kode biasa dan kode inspect element memiliki perbedaan. Kode yang pertama masih raw atau mentahan. Kode yang kedua menampilkan dom html yang sudah teresekusi. Ditandai dengan adanya tambahan teks dalam tag p, dari kode javascript di bawahnya.

Cara inspect element di chrome android

Biasanya untuk mengetahui source kode pada situs lewat hp tanpa aplikasi tambahan. Hanya bermodal google chrome saja. Kamu bisa mengaksesnya dengan menulis perintah view-source: diiringi alamat situs web pada address bar google chrome.

view-source:alamat situs web

Dan untuk inspect element suatu web, situs, dan blog. Kamu bisa memakai perintah javascript sederhana seperti yang ada dibawah ini pada address bar browser yang support javascript. Dalam contoh ini saya menggunakan aplikasi google chrome android di hp.

javascript:var n=document.firstChild;while(n && n.nodeType!=Node.ELEMENT_NODE) n=n.nextSibling;document.write('<pre>' + n.outerHTML.replace(/&/g, '&amp;').replace(/</g, '<font color=\'#aa6600\'%3E&lt;').replace(/%3E/g,%20'&gt;%3C/font%3E'));

Pastekan kode javascript tersebut setelah mengunjungi situs web. Maka akan tampil kode yang dijalankan dalam situs web tersebut. Kode js yang diatas hanya berjalan, jika fitur javascript pada browser diaktifkan. Agar lebih mudah dalam menginspect element. Jangan lupa bookmark kode javascript di browser. Dengan cara seperti berikut.

Kunjungi situs apapun, misal google.com

Klik titik tiga pada address bar google chrome android di kanan atas.

Tap simbol bintang putih untuk membookmark alamat google.

Klik menu bookmark (bintang hitam) pada titik tiga di address bar.

Klik menu bookmark seluler.

Edit alamat google.

Ubah nama jadi inspect element. Dan pada input url, paste kode javasvript diatas.

Cara inspect elemen di hp lewat google chrome android

Nanti setiap kamu mau menginspect element kode di situs. Cukup ketik text inspect di address bar, maka akan muncul shortcut bookmark inspect element yang bisa kamu jalankan buat melihat dom dokumen web. Seperti itulah cara inspect element di hp android. Semoga bermanfaat..

Share on : Facebook Twitter Whatsapp

....