Panduan untuk Alat Web Google

Jan 31, 2026

Bagaimana caranya

Halaman 1 dari 5:

Lihat dan ubah HTML, CSS & AMP; JS.

Lihat dan ubah HTML, CSS & AMP; JS.
Menggunakan debugger.
Bekerja dengan Mode Perangkat
Mulailah dengan desain material
Dapatkan Grips dengan Aplikasi Web Progresif

Big G, alias Google, menyediakan pengembang sejumlah alat yang dimaksudkan untuk membuat desain web mudah. Dalam artikel ini, kami melalui beberapa alat Google terbaik di luar sana, dan menunjukkan kepada Anda cara menggunakannya dalam alur kerja desain dan pengembangan web Anda.

Kami meliputi berbagai yang berbeda Alat Desain Web. Di sini, jadi kami telah membagi konten ke halaman untuk membuatnya lebih mudah dinavigasi. Gunakan menu dropdown di atas untuk melompat ke bagian yang Anda minati. Ingin mendesain situs menggunakan penyedia yang berbeda? Panduan kami untuk hosting web. dan top Pembangun Situs Web sudahkah kamu membahas.

Selama situs web tidak terputus, konten mereka dapat dilihat oleh siapa saja. Chrome's DevTools membuat ini sederhana - pada halaman ini, kami menunjukkan kepada Anda cara melihat dan mengubah HTML, CSS dan Javascript. Di halaman 2 , Kami melihat lebih dekat pada cara menggunakan debugger Google untuk memperbaiki kesalahan pengkodean dengan cepat dan mudah. Halaman 3. Menempatkan sorotan pada mode perangkat Google, yang dapat Anda gunakan untuk menguji versi seluler halaman Anda melalui mesin desktop Anda. Di Halaman 4. Kami memperkenalkan dasar-dasar yang perlu Anda perhatikan untuk mulai menerapkan prinsip-prinsip desain material dalam desain Anda. Akhirnya, Halaman 5. Melihat aplikasi web progresif, hal besar terbaru di industri desain web.

Lihat dan ubah HTML, CSS & AMP; JS.

Selama kode situs web belum diminas, itu dapat dilihat oleh siapa saja yang menggunakan alat pengembang Chrome. Pertama-tama, periksa versi Chrome - langkah-langkah berikut bekerja pada versi 70.0.3538.67 berjalan pada workstation ubuntu 64-bit. Selanjutnya, buka menu Hamburger dan klik More Alat & GT; Alat pengembang.

Launch Google's Developer Tools — Luncurkan alat pengembang dan Anda akan melihat layar yang mirip dengan ini [klik ikon di kanan atas untuk memperbesar]

Browser merespons dengan membuka panel di sisi kiri layar Anda. Itu harus diubah ukurannya pada langkah pertama - secara default, browser tidak menetapkan layar real estat yang cukup. Setelah selesai, layar terlihat mirip dengan yang ditunjukkan pada gambar di atas.

Secara default, alat pengembang dimulai dengan tab konsol dimuat. Ini berisi output yang dipancarkan dengan doa fungsi konsol-logging. Kesalahan rendering juga muncul di sana - jika Anda menemukan garis merah, ada sesuatu yang salah dalam markup atau kode halaman Anda. Klik pada 'URL' kecil di sisi kanan membawa Anda ke garis, yang menyebabkan pesan muncul.

Periksa markup.

Jika minat Anda berfokus pada markup, gunakan tab elemen yang ditunjukkan pada gambar. Ini menunjukkan markup browser saat ini membuat. Anda dapat memperluas dan memadatkannya dengan cara yang mirip dengan tampilan pohon - sembunyikan elemen yang tidak dibutuhkan untuk mencegah kelebihan sensorik.

Itu raison d'etre. dari tab adalah tampilan struktur CSS. Widget 'Kumpulkan' CSS dari berbagai sumber, yang ditampilkan dengan rapi dan di samping satu sama lain. Dalam hal contoh yang ditunjukkan pada gambar, kita melihat bahwa gaya disediakan dari tag 'Div' dan markup 'utama' dari halaman.

Chrome memungkinkan Anda mengedit sebagian besar atribut dengan cepat. Klik dua kali salah satu teks hitam untuk mengubah label menjadi editor, lalu masukkan nilai yang baru diinginkan dan tekan tombol Return. Renderer mengambil perubahan ini dan menerapkannya ke DOM dengan cepat. Ini sangat berguna ketika mencoba mengoptimalkan masalah warna atau penempatan; Harus memuat kembali halaman untuk pratinjau perubahan menjadi melelahkan.

Google's web tools — Latar belakang kuning menunjukkan isi jendela dapat memfilter [klik ikon di kanan atas untuk memperbesar]

Akhirnya, lihat kotak teks di atas panel. Ini memungkinkan Anda untuk memfilter item markup yang ditampilkan: Misalnya, masukkan 'MDC' untuk membatasi tampilan untuk semua gaya yang diwarisi dari pustaka desain bahan yang digunakan nanti dalam artikel ini. Ketika filter aktif, latar belakang kuning muncul dengan cara yang mirip dengan yang ditunjukkan di atas.

Lakukan analisis terperinci

Di browser web modern, DOM tidak terbatas pada masalah presentasi 'statistik'. Ini juga mengatur aliran acara dan penempatan. Beralih ke tab Komputasi untuk mengungkapkan daftar properti 'dimensi'. Ini sangat berguna saat mengatur widget pada layar dengan cara yang tepat.

Pindah ke tab Pendengar Acara memberikan ikhtisar arus acara. Gunakan fitur ini untuk dengan cepat menyingkirkan masalah yang terkait dengan interaksi pengguna: Jika suatu peristiwa tidak memicu, mulai dengan memeriksa koneksi handler acara.

Akhirnya, jendela Properties memungkinkan Anda melihat atribut yang tersimpan di dalam individu DOM node. Jika Anda pernah menghabiskan banyak waktu untuk memburu kode memanipulasi dom, nilainya jelas.

Halaman berikutnya: Cara Menggunakan Debugger Google

Halaman saat ini: Lihat dan ubah HTML, CSS & AMP; JS.

Halaman selanjutnya Menggunakan debugger.

Panduan untuk Alat Web Google

Lihat dan ubah HTML, CSS & AMP; JS.

Periksa markup.

Lakukan analisis terperinci

Bagaimana caranya - Artikel Terpopuler

Cara photoshop seseorang menjadi gambar

Cara mempercepat dan mengoptimalkan situs WordPress

Cara mengambil tangkapan layar pada Mac

Buat bot slack kustom

Cara membuat permukaan transparan realistis

Cara menguasai anatomi makhluk

Strategi Pengalaman Pengguna

Dapatkan Grips dengan Teknik Lukisan Basah Basah

Kategori