About Me

gambar koala

Menggunakan Inspect Tool (Development Mode)

Menggunakan Inspect Tool (Development Mode)

Dalam artikel ini, kita akan mengajarkan cara menggunakan Inspect tool (developer mode) di Google Chrome.
Inspect tool adalah alat yang berguna bagi web developer. Kamu bisa melihat dan mengedit HTML & CSS di halaman yang ditampilkan di browser. Kerjaan akan jauh lebih efisian apabila kamu menguasainya, membuat alat ini menjadi sangat berguna untuk web developer.
Selain Google Chrome, alat serupa juga tersedia di browser lain seperti Safari dan Firefox, tapi di artikel ini kita akan menggunakan Google Chrome. DevTool seperti ini bisa memiliki nama lain juga, seperti "developer tools", "inspect element tool", atau "web inspector".
Alat & Pengetahuan yang Diperlukan
  • Google Chrome
    Baca artikel ini untuk petunjuk cara menginstal Google Chrome.
  • Pengetahuan dasar HTML & CSS
    Jika kamu sudah menyelesaikan pelajaran HTML & CSS Study I, itu sudah cukup.
Catatan: Semua gambar di artikel ini menunjukkan tampilan untuk MacOS, tapi petunjuk ini juga berlaku bagi Sistem Operasi lainnya.

1. Gambaran Umum

Inspect tool punya banyak fungsi canggih yang pastinya berguna bagi developer. Dalam artikel ini, kamu akan belajar cara melihat dan mengedit HTML & CSS, bahasa yang paling penting dalam membuat website.
Mari mulai dengan melihat cara memeriksa halaman web HTML yang ditampilkan di browser. Buka halaman web berikut ini di Google Chrome:
https://progate.github.io/html-dev-en/
Kita akan belajar cara menggunakan Inspect tool di halaman ini.
Klik-kanan di halaman yang terbuka (di mana saja pada layar). Saat menu ditampilkan sesuai gambar di bawah ini, pilih "Inspect" di bagian bawah.
Apakah ada panel putih yang muncul di sisi kanan (atau bawah) jendela? Ini disebut dengan panel DevTools.
Perhatikan area atas DevTools, di sini ada code HTML untuk halaman yang sedang ditampilkan.
Mari kita lihat HTML-nya secara lebih rinci. Klik ikon kursor (lihat gif di bawah ini) di sisi kiri atas panel DevTools. Setelah diklik, warna ikon akan berubah dari abu-abu menjadi biru. Lalu pindahkan kursor ke tulisan "BELAJAR UNTUK MENJADI KREATIF" di tengah halaman, lalu klik tulisannya.
Setelah mengeklik elemen di halaman, warna latar belakang HTML di panel DevTools akan berubah menjadi biru.

...


Ini adalah code HTML untuk tulisan "BELAJAR UNTUK MENJADI KREATIF." yang kamu klik tadi. Namun dalam keadaan ini, isi tag akan disembunyikan. Klik ikon segitiga di sebelah kiri tag HTML.
Kemudian bagian tersembunyi dari tulisan "BELAJAR UNTUK MENJADI KREATIF." akan ditampilkan sebagai berikut.
Ayo lihat HTML bagian lainnya juga.
Klik ikon kursor di pojok kiri atas panel DevTools lagi, lalu klik tombol hijau "Daftar".
Apakah HTML berikut muncul?
Sistem akan memastikan bahwa tombol ini dibuat dengan tag , dan ada dua class bernama btn dan signup.
Periksa
Apakah kamu bisa melihat code HTML halaman webnya?
Selesai

2. Mengedit HTML

Berikutnya, mari kita edit HTML yang baru kamu lihat dengan mengubah tulisan di halaman ini. Klik ikon kursor di pojok kiri atas panel DevTools lalu klik kalimat "Progate is a web service where you can learn programming online.
Dalam panel DevTools, tag  berikut seharusnya menjadi biru.
...
Kemudian klik-kanan baris tersebut dan pilih "Edit as HTML".
Seperti yang ditampilkan di atas, formulir mengedit HTML akan muncul. Edit teks yang ada didalam tag .
Pertam, hapus kalimat "Progate is a web service where you can learn programming online." lalu tempelkan kalimat berikut.
Progate is a web service where you can learn programming online.
Setelah menempelkan kalimat diatas, tahan tombol command (⌘) (atau Ctrl di Windows) dan tekan Enter. Setelah itu, kalimatnya akan berubah di halaman web.
Kamu juga bisa menggunakan Inspect tool untuk mengubah tag HTML. Klik-kanan tag  dan pilih "Edit as HTML" untuk membuka layar edit sekali lagi. Sekarang ganti tag pembuka  dan tag penutup 
 dengan 

 dan  secara berurutan. Setelah ini, tekan tombol command (⌘) (atau ctrl) lalu Enter.
Sekarang tag pada teks sudah diubah menjadi 

, sehingga menjadi sedikit lebih besar.
Semua perubahan di konsol DevTools hanya sementara, HTML di halaman web ini belum benar-benar ditulis ulang secara permanen. Maka dari itu, kamu bisa kembali ke keadaan asli dengan mengeklik tombol Refresh (di sebelah kiri atas di browser) untuk memuat ulang halaman.
Dengan menggunakan Inspect tool untuk mengubah HTML, kamu bisa mengubah tampilan dengan mudah tanpa harus mengubah source code yang asli saat sedang membuat halaman web.
Periksa
Apakah kamu sudah bisa mengedit HTML di halaman ini dengan Inspect tool?
Selesai

3. Menginspeksi code CSS

Setelah menjelajahi HTML, mari belajar cara menginspeksi code CSS di halaman web. Klik ikon kursor di pojok kiri atas panel DevTools lalu klik tombol biru "Daftar dengan Facebook". Di bagian kanan bawah panel DevTools, ada bagian "Styles", di sini kamu bisa melihat code CSS.
code CSS untuk element tombol yang kamu klik akan nampak sebagai berikut. Element ini memiliki dua kelas bernama btn dan facebook, yang masing-masing memiliki code CSS yang terpisah.
.btn {
    padding: 8px 24px;
    color: white;
    display: inline-block;
    opacity: 0.8;
    border-radius: 4px;
    text-align: center;
}

.facebook {
    background-color: #3b5998;
    margin-right: 10px;
}
Kamu 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 kamu selesai menginspeksi CSS halaman itu?
Selesai

4. Mengedit CSS

Berikutnya, mari edit code CSS yang tadi kita inspeksi. Pertama, muat ulang halaman untuk kembali ke keadaan awal, lalu pilih “Daftar dengan 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 "BELAJAR CODING".
Pertama, klik ikon di kiri atas panel DevTools lalu pilih bagian "BELAJAR CODING" 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 "BELAJAR CODING.".
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.
Periksa
Apakah kamu berhasil mengubah latar belakang teks "BELAJAR CODING"?
Selesai
Cukup itu saja untuk artikel ini. Sekarang setelah kamu memahami cara menggunakan Inspect tool di Chrome, saatnya mencoba sendiri Inspect tool untuk menjelajahi code situs lain dan mengutak-atik halaman webmu sendiri!

Posting Komentar

0 Komentar