Menggunakan Inspect Tool (Development

Mode)

Dalam artikel ini, kita akan menjalaskan cara menggunakan Inspect tool
(developer mode) pada Google Chrome.

Inspect tool adalah alat yang berguna bagi para web developer. Anda bisa
melihat dan melakukan edit pada HTML & CSS dari halaman yang
ditampilkan dalam browser. Dengan menguasainya, efisiensi kerja akan
meningkat secara signifikan, menjadikannya sebuah alat yang sangat
diperlukan bagi para web developer.

Selain Google Chrome, alat serupa juga tersedia pada browser lain seperti
Safari dan Firefox, namun kita akan menggunakan Google Chrome dalam
artikel ini. DevTool juga disebut dengan nama lain, seperti "developer tools",
"inspect element tool", atau dalam beberapa kasus lain disebut juga "web
inspector".

Alat & Pengetahuan yang Diperlukan

● Google Chrome
Baca petunjuk cara memasang Google Chrome pada artikel ini
● Pengetahuan dasar HTML & CSS
Jika Anda telah menyelesaikan pelajaran HTML & CSS Study I,
seharusnya Anda telah siap.
Catatan: Semua gambar dalam artikel ini menampilkan tampilan MacOS, tapi
petunjuk ini juga berlaku bagi Sistem Operasi lainnya.

1. Gambaran Umum
Inspect tool memilki banyak fungsi canggih yang sangat berguna bagi para
developer. Dalam artikel ini, Anda akan belajar cara melihat dan melakukan
edit HTML & CSS, bahasa-bahasa terpenting dalam membuat website.
Mari mulai dengan meperhatikan cara memeriksa halaman web HTML yang
ditampilkan pada browser. Buka halaman web berikut ini dalam Google
Chrome:
https://progate.github.io/html-dev-en/
Kita akan belajar cara menggunakan Inspect tool pada halaman ini.
Klik-kanan di halaman yang terbuka (di mana saja pada layar tidak
mengapa). Ketika menu ditampilkan sesuai gambar di bawah ini, pilih
"Inspect" pada bagian bawah.

Apakah ada panel putih yang muncul pada sisi kanan (atau bawah) dari
window tersebut? Ini disebut dengan panel DevTools.
Perhatikan bagian atas dari panel DevTools, inilah tempat Anda dapat
melihat code HTML dari halaman yang sedang ditampilkan.

Mari perhatikan HTML-nya lebih dekat. Klik ikon kursor (lihat gif di bawah
ini) di sebelah kiri atas dari panel DevTools. Setelah Anda klik, warna ikon
akan berubah dari abu-abu menjadi biru. Lalu pindahkan kursor ke tulisan
"LEARN TO BE CREATIVE." yang berada di tengah halaman dan klik
tulisannya.

Setelah mengeklik sebuah element pada halaman, warna latar belakang

HTML di panel DevTools akan berubah menjadi biru.
<h1>...</h1>
Ini adalah code HTML untuk tulisan "LEARN TO BE CREATIVE." yang Anda
klik tadi. Namun dalam keadaan ini, isi tag akan disembunyikan. Klik ikon
segitiga di sebelah kiri tag HTML.
Kemudian bagian tersembunyi dari tulisan "LEARN TO BE CREATIVE." akan
ditampilkan sebagai berikut.

Mari periksa HTML pada bagian lainnya.

Klik lagi ikon kursor pada pojok kiri atas panel DevTools, lalu klik tombol
hijau bertuliskan "Sign up with Email".
Apakah HTML berikut muncul?
<a href="#" class="btn signup">Sign up with Email</a>

Dengan ini terpastikanlah bahwa tombol tersebut terbuat dengan tag <a>,
dan memiliki dua class bernama btn dan signup.

Periksa

Apakah Anda bisa melihat code HTML dari halaman tersebut?

Selesai

2. Melakukan Edit HTML

Selanjutnya, mari kita edit HTML yang baru Anda lihat sebelumnya dengan
mengubah beberapa tulisan pada halaman ini. Klik ikon kursor pada pojok
kiri atas panel DevTools lalu klik kalimat "Progate is a web service where you
can learn programming online.
Dalam panel DevTools, tag <p> berikut ini seharusnya berubah menjadi
biru.
<p>...</p>

Kemudian klik-kanan baris tersebut dan pilih "Edit as HTML".

Seperti yang ditampilkan gambar di atas, sebuah formulir untuk melakukan
edit HTML akan muncul. Lakukan edit pada teks yang ada dalam tag <p>.
Pertama, hapus kalimat "Progate is a web service where you can learn
programming online." lalu tempelkan kalimat berikut.
Progate is an online programming learning service.

Setelah menempelkan kalimat tersebut, tahanlah tombol command (⌘) (atau

Ctrl di Windows) dan tekan Enter. Setelahnya, kalimat tersebut pada
halaman web akan ikut berubah .
Anda juga bisa menggunakan Inspect tool untuk mengubah tag HTML. Klik-
kanan tag <p> dan pilih "Edit as HTML" maka sekali lagi layar edit akan
terbuka. Sekarang gantilah tag pembuka <p> dengan <h2> dan tag penutup
</p> dengan </h2>. Setelahnya, tekanlah tombol command (⌘) (atau ctrl)
lalu Enter.
Karena sekarang tag pada teks telah berubah menjadi <h2>, hal tersebut
membuatnya menjadi terlihat sedikit lebih besar.
Semua perubahan pada console DevTools hanya bersifat sementara. Maka
sangatlah mungkin untuk kembali ke keadaan awal dengan menekan tombol
Refresh (di sebelah kiri atas di browser) untuk memuat ulang halaman
tersebut. Dengan cara ini, yaitu menggunakan Inspect tool untuk mengubah
HTML, Anda dapat melakukan beberapa perubahan pada penampakan
dengan mudah tanpa melakukan perubahan pada source code asil ketika
membuat halaman-halaman web.

Periksa

Apakah Anda melakukan edit HTML pada halaman tersebut menggunakan

Inspect tool?

Selesai

3. Melakukan Inspeksi Code CSS

Setelah menjelajahi HTML, mari belajar cara melakukan inspeksi code CSS
di halaman web. Klik ikon kursor di pojok kiri atas panel DevTools lalu klik
tombol biru "Sign up with Facebook". Pada bagian bawah atau kanan dari
panel DevTools, terdapat bagian "Styles", di sinilah Anda dapat melihat code
CSS.

Code CSS untuk element tombol yang Anda klik seharusnya akan nampak
sebagai berikut. Element ini memiliki dua kelas bernama btn dan facebook,
yang masing-masing memiliki code CSS yang terpisah.
.btn {
padding: 12px 24px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 4px;
text-align: center;
}

.facebook {
background-color: #3b5998;
margin-right: 10px;
}

Anda bisa menginspeksi CSS di setiap element dalam situs dengan cara ini.
Selanjutnya, lihat kotak oranye, kuning, hijau dan biru di bagian bawah atau
kanan panel tempat CSS ditampilkan (seperti gambar di bawah ini).

Gambar ini merangkum ukuran dan margin dari element yang sedang
dipilih.
Bagian biru di bagian dalam menunjukkan lebar dan tinggi element
tersebut. Dalam gambar di atas, artinya lebarnya adalah 644px dan
tingginya 353.250px.
Seperti label yang ditampilkan, bagian hijau di sekelilingnya menunjukkan
nilai padding, bagian kuning menunjukkan border, bagian kuning
menunjukkan margin. Dalam gambar di atas, padding kiri dan kanan di
element ini adalah 15px, dan padding atas dan bawah adalah 0px; nilai
border atas, bawah, kiri, dan kanan adalah 0px di atas, dan semua nilai
margin adalah 0px.
Saat mengarahkan mouse ke tombol ini, warna latarnya akan menggelap.
Sekarang, mari belajar cara memeriksa CSS saat mengarahkan mouse ke
element. Di bagian kanan atas panel tempat CSS tadi dikonfirmasi, ada
karakter berwarna abu-abu :hov, klik di situ.
Kemudian seperti yang ditunjukkan di bawah, kolom pilihan "Force element
state" akan muncul. Dari kolom tersebut, kamu bisa memeriksa CSS untuk
berbagai macam selector dari element HTML tersebut.

Contohnya, dengan memilih :active, kamu bisa melihat CSS apa yang
diterapkan saat mengeklik element; dengan memilih :hover, kamu bisa
melihat CSS yang diterapkan saat mengarahkan mouse ke atas element
tersebut.
Untuk saat ini, pilih :hover.
Kemudian CSS berikut akan ditambahkan ke dalam panel tempat CSS
ditampilkan.
.btn:hover {
opacity: 1;
}

Dengan begini, kamu akan bisa melihat nilai opacity (transparansi) dari class
‘btn’ adalah “1”.

Periksa

Apakah Anda telah selesai melakukan inspeksi CSS pada halaman itu?

Selesai

4. Melakukan Edit CSS

Berikutnya, mari edit code CSS yang tadi kita inspeksi. Pertama, muat ulang
halaman untuk kembali ke keadaan awal, lalu pilih “Sign up with Facebook”
menggunakan Inspect tool.
Kemudian mulai ubah nilai "border-radius" (kebulatan sudut) di class btn.
Bisa dilihat nilainya adalah "4px" di DevTool.
Kemudian klik tempat menyebutkan "4px". Apakah ini berubah menjadi
formulir edit seperti pada gambar di bawah?

Gunakan formulir untuk mengubah "4px" menjadi "20px" lalu tekan Enter.

Tepian tombol akan menjadi bulat seperti pada gambar di bawah ini.
Kamu juga bisa mengedit margin dan padding menggunakan gambar
oranye dan hijau yang tadi ditampilkan.
Klik 2x di sisi kanan, di bagian margin oranye, lalu isi dengan “50” dan tekan
Enter.

Jika bekerja dengan benar, margin antara tombol Facebook dan Twitter
akan melebar.
Orang-orang yang berpengalaman membuat website melakukan banyak
trial & error untuk menemukan nilai piksel (px) yang sempurna. Dengan
menggunakan Inspect tool, kamu bisa mengubah-ubah CSS dengan mudah
untuk mencapai hasil yang sesuai.

Periksa
 Bisakah kamu menggunakan Inspect tool untuk mengedit code CSS?

Selesai

5. Menambah Code CSS

Terakhir, mari pelajari cara menambahkan code CSS. Kali ini kamu akan
menambahkan warna latar ke element dengan kata-kata "LEARN TO CODE".
Pertama, klik ikon di kiri atas panel DevTools lalu pilih bagian "LEARN TO
CODE" seperti biasa.
Klik ikon plus "+" di sebelah tombol ": hov".
Kolom untuk menulis CSS untuk h1 akan ditampilkan sebagai berikut.

Berikutnya, klik area di sebelah kanan h1 {.

Kemudian, sebuah baris dengan titik dua dan titik koma akan ditambahkan
seperti pada gambar berikut.
Tulis background-color ke dalam formulir input lalu tekan Enter.
Setelah itu, tulis #02ccba dan tekan Enter sekali lagi.

Apakah tampilan panel sudah seperti gambar di bawah ini?

Sekarang warna latar akan ditambahkan ke tulisan "LEARN TO CODE.".

Terkadang kesalahan dapat terjadi jika kamu mengeklik element lain di
halaman ini, atau tak sengaja menekan tombol yang lain. Jika dilakukan,
jangan khawatir, mulai ulang dengan menekan tombol "+" lagi.