Menggunakan Hidangan Inspeksi Google Chrome

By | Oktober 6, 2017
 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Fungsi Menu Inspeksi Pada Google Chrome
Hampir jarang ada orang yang tahu penggunaannya, Namun sangat bermanfaat bagi blogger yang sedang memodifikasi tampilan blognya dengan cara memprogram CSS template blog !

Siapa yang sanggup membantu mereview hasil pekerjaan ketika template tersebut di ubah isinya? Tanpa software anda bisa melihat hasil preview pekerjaan anda dengan mudah. Melalui sebuah sajian yang sudah di sediakan bowser anda!

Dialah Menu Inspeksi pada Browser. Pertanyaan yang nanti muncul yakni ” Bagaimana cara memakai sajian inspeksi pada google Chrome? “. Berikut kami sajikan ulasannya

Berbekal pengalaman kami ketika awal sajian ini muncul di Browser Mozilla Firefox kami sudah mulai mencoba-coba sajian tersebut. kami Mencoba untuk memahami penggunaan dari Inspeksi yang ada di aplikasi Mozilla ketika itu, balasannya cukup banyak orang yang mengunjungi situs kami, namun jarang dari mereka bertanya kepada kami wacana pengalaman mereka ketika memakai dan hambatan mereka. Sehingga ketika itu artikel menjadi kurang lengkap, dan cenderung mengambang pembahasannya. Bagi pembaca yang ingin menikmati artikel tersebut linknya sudah saya sediakan dibawah !

Menampilkan sajian Inspeksi
 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Bilah sajian inspeksi
Mari kita lanjutkan pembahasan kita. Melihat tampilan sajian Inspeksi Sekilas memang tidak akan terlihat akomodasi tersebut. Menu inspeksi memang tidak terlihat ada di antara deretan-deretan sajian pada browser Chrome. Salah satu langkah yang gampang mengaksesnya yakni dengan melaksanakan klik kanan kemudian pilih sajian Inspeksi pada bab paling bawah, ini cara pertama. Cara berikutnya yang cukup gampang yakni dengan menekan tombol [ CTRL + SHIFT + I ] Secara gotong royong sehingga akan menampilkan bilah sajian Inspeksi pada windows sebelah kanan browser anda! (seperti tampilan gambar)
Fungsi sajian Inspeksi
Namanya saja sajian Inspeksi, otomatis kegunaannya yakni untuk melaksanakan pengecekan terhadap Elemen dan Styles CSS sebuah web. Nantinya sajian ini bisa ditambahkan dengan kegunaan kegunaan lain. Tetapi yang akan kita bahas disini hanya yang berkaitan dengan Inspeksi halaman styles CSS 
Bukan sulap bukan sihir sajian inspeksi pada google Chrome berdasarkan saya merupakan yang terbaik daripada sajian browser kompetitiornya. Mungkin pada Chrome ini merupakan salah satu penyempurnaan Inspeksi dari yang dimiliki kompetitornya. Menu inspeksi ini bisa membaca elemen sebuah halaman yang sedang ditampilkan dan juga bisa membaca pola CSS dari tampilan yang nantinya akan dipilih. untuk Javascript, Jquery, dkk sejauh yang saya pakai saya tidak pernah bisa membacanya, Barangkali pembaca ada yang tahu, silahkan bisa memberi masukkan pada kolom komentar

Penjelasan tampilan dan kegunaan
Setelah ditampilkan saya akan mencoba menjelaskan satu-per-satu kegunaan dari sajian tersebut. jika nanti melaksanakan editing pada sajian inspeksi maka itu hanya bersifat temporary saja alias sementara. karena file sumbernya tidak mengalami perubahan!. Serta untuk mengaktifkan den mematikan fungsi tinggal diklik-klik saja (klik untuk menghidupkan klik lagi untuk mematikan).

Perubahan bentuk tampilan web/blog pada ketika anda mengedit memakai sajian inspeksi hanya bersifat sementara, lantaran file orisinil belum diubah

Langkah berikutnya sesudah mengaktifkan file inspeksi yakni menampilkan HTML yang menyusun tamplate sobat! Gunanya bila nilai pada sebuah variabel CSS telah ditentuhkan maka bisa eksklusif dimasukkan (di edit) kedalam template pembaca.

 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Bagian atas sajian inspeksi chrome
Bagian yang saya lingkari yakni pointer untuk menentukan (menyorot) elemen pada tampilan web yang ingin di Inspeksi tampilannya (Sebelah kiri), Sedang yang pada sebelahnya yakni device toolbar (merubah tampilan halaman web mirip ukuran smartphone kelas atas. Nantinya layar akan mengecil mirip ukuran Smartphone (ada pilihan macam-macam smartphone berdasarkan ukuran layar)
Bagian bawah yang bertulis isyarat HTML merupakan urutan struktur elemen HTML dari halaman yang ditampilkan, dengan menentukan memakai select element page inspect (pointer yang sebelah kiri atas) maka anda akan menemukan urutan letak dimana Kode HTML itu berada.
 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Bagian bawah sajian inspeksi
Pada bab bawah kita akan disuguhkan data CSS dari tamplian yang kita pilih tadi, Sebenarnya ini yakni fungsi pokok dari sajian inspeksi yang biasa saya gunakan, yaitu untuk mengatur CSS.

Cara mengatur CSS dengan sajian Inspeksi
Lakukan doble klik pada CSS yang ingin diedit, misalkan anda ingin mengedit warna yang sumula berwarna putih anda jadikan menjadi biru (tentuhnya mengisi dengan isyarat warna HTML) kemudian lihat tampilan yang terjadi! Jika tampilan sudah sesuai yang diinginkan maka anda bisa mengcopykan judul isyarat CSS kemudian untuk bisa di cari di Edit Tamplate blog anda.Jika sudah ketemu maka anda tinggal ubah saja sesuai yang anda masukkan pada sajian Styles di sajian Inspeksi.

Anda juga bisa mengatur margin dan padding CSS blog anda melalui sajian Inspeksi sehingga anda bisa melihat secara eksklusif perubahan-perubahan yang akan terjadi bila anda melaksanakan penambahan, pengurangan, atau perubahan pada CSS blog anda.

Cara menambahkan fungsi CSS pada sajian Inspeksi yakni dengan melaksanakan klik dua kali pada fungsi-fungsi CSS bisa anda lihat gambar diatas. Kita ambil referensi pada CSS yang membuktikan .sidebar h2 { didalamnya ada background; color; dan kawan-kawannya } diantara kode-kode tersebut lakukan klik sehingga akan bisa memunculkan sajian bilah baris gres yang sanggup anda isi dengan perintah fungsi CSS beserta volume (isi)nya. Setelah melaksanakan hal tersebut amati perubahan pada tampilan web anda!

Penting di ingat JIKA TERJADI KERUSAKAN PADA WEB ANDA JANGAN PANIK Kerena itu merupakan hasil Preview saja. bukan yang sebenarnya.

Setelah melaksanakan edit mengedit anda bisa melaksanakan klik drag dan melaksanakan copy pada hasil editan anda. Hasil salinan tadi bisa anda terapkan pada template anda.

Bagaimana cara penerapan pada template ?

Perhatikan tanda bab judul CSS tersebut. Pada referensi judul CSS tersebut yakni .sidebar h2 maka anda tinggal mencari CSS ditemplate anda yang menjabarkan fungsi CSS tersebut, dari situ anda bisa mengganti nilainya mirip yang anda edit di sajian inspeksi tadi.

Selalu diingat perubahan pada tampilan blog anda hanya bersifat sementara (untuk keperluan editing) bila sudah mantap gres anda masukkan kedalam HTML Tamplate blog anda, Tampilan blog anda tidak akan berubah tanpa adanya perubahan pada HTML Tamplate!


Cara Mengambil Warna melalui HTML Color Picker pada Menu Inspeksi Chrome
melaksanakan pengambilan warna atau coning warna dengan sajian inspeksi sanggup anda lakukan dengan sangat mudah. yaitu (1) Anda siapkan Inspeksi pada Chrome kemudian anda sorot (pilih) warna pada situs yang anda ingin copy warnanya. (2) Copy isyarat HEX warna atau  RGBnya masukkan kedalam tamplate yang anda miliki atau pada kawasan yang anda kehendaki.

 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Menu Inspeksi pada google chrome untuk mengambil warna

Jika anda melaksanakan klik pada kotak yang saya beri tanda merah akan memunculkan obrolan pengambilan warna. Gunakan Toggle Color Picker (pipet pengambil warna) yang saya beri isyarat warna merah melingkar. Setelah itu copy isyarat Hexadecimal Colors (selanjutnya disebut dengan HEX) atau isyarat warna dengan RGB. Perhatikan gambar dibawah biar bisa lebih jelas.

Anda juga bisa mengambil warna melalui tanda bundar putih yang terdapat pada area gradasi warna (perhatikan area kotak berwarna pelangi yang di tengah-tengahnya ada bundar putihnya). Lingkaran warna putih tersebut sanggup anda geser-geser sesuai dengan warna yang ingin anda kehendaki. Serta tanda bundar yang ada di tengah kerja sama antara warna hijau dan hitam (ditengah-tengah kotak warna gradasi hijau dan hitam) itu juga bisa anda geser-geser sesuai kehendak anda.

Kurang Mantap? Agar lebih terang anda bisa perhatikan gambar dibawah ini.
 Hampir jarang ada orang yang tahu penggunaannya Menggunakan Menu Inspeksi Google Chrome
Dialog pada Inspeksi di google chrome

Perhatikan isyarat yang saya beri warna latar kuning.
Kode tersebut yakni isyarat perwarnaan HEX yang mendeskripsikan Lingkaran dengan warna Hijau (sebelah gambar pipet) hasil pengambilan dari HTML Color Picker tersebut. Jika anda menghendaki pewarnaan dengan format RGB maka anda bisa mengubah isyarat tersebut dengan cara melaksanakan klik pada tanda segitiga atas bawah (yang saya beri bundar warna biru).

Kiranya cukup itu saja yang bisa saya berikan. Sebenarnya masih banyak fungsi dari sajian inspeksi di Google Chrome, namun belum saya ulik dan saya rasa dua langkah diatas sudah cukup membantu anda dalam mendesain CSS blog anda. Semoga bisa membantu. Jika ada pertanyaan atau masukkan untuk penulis, pembaca bisa menawarkan tanggapan melalui kolom komentar yang telah kami sediakan di simpulan blog ini .

Terimakasih

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *