Konsol adalah salah satu dari banyak Alat Pengembang yang tersedia di browser web. Anda dapat menggunakan Konsol untuk men-debug atau memecahkan masalah kode JavaScript Anda. Lokasi tempat Anda dapat menemukan Konsol akan berbeda dari satu browser ke browser lainnya. Dalam tutorial ini, kami akan menunjukkan kepada Anda di mana dan bagaimana menemukan Console di browser Google Chrome Show
Langkah-langkah untuk Membuka Log Konsol di Google ChromeMari kita lihat cara membuka log konsol untuk browser Chrome
Tombol Pintas untuk Alat Pengembang di Google ChromeAda juga beberapa tombol pintasan yang dapat Anda gunakan untuk membuka Alat Pengembang Chrome. Berikut ini beberapa pintasan yang dapat Anda gunakan, bergantung pada versi Chrome Anda Ada banyak sumber daya pengembangan web yang berharga, baik itu buku, video, kursus online, dan banyak lagi. Mempelajari cara menggunakan alat Elemen Inspeksi browser adalah salah satu kemampuan yang begitu hebat. Ini adalah alat pembelajaran yang tak ternilai — yang tepat di bawah ujung jari Anda dan selalu dapat diakses Dengan fitur Elemen Inspeksi, Anda dapat melihat cara kerja bagian dalam situs web. Meskipun Anda hanya dapat melihat markup frontend seperti HTML, CSS, dan terkadang JavaScript, ini memberi Anda cara untuk melihat dengan tepat bagaimana pengembang membuat situs web Dalam postingan ini, kami akan menunjukkan kepada Anda cara menggunakan alat Elemen Inspeksi dan beberapa teknologi, fitur, dan fungsi terkait yang akan Anda temui. Pertama, mari beri Anda pengantar formal untuk alat Elemen Inspeksi itu sendiri Lihat panduan video kami tentang cara mengedit situs web dengan elemen inspeksiMemperkenalkan Alat Elemen InspeksiDi masa-masa awal web, hanya ada satu cara untuk melihat kode situs web — fitur Lihat Sumber  Situasi ini lazim terjadi pada hari-hari sebelum kami memiliki Cascading Style Sheets (CSS) dan JavaScript yang melimpah. Pengembang web menggunakan HTML untuk semua elemen situs, termasuk konten, desain, dan… yah, semuanya Lihat bagaimana Kinsta menghadapi persaingan. Membandingkan Setelah web mulai berkembang, dan teknologi yang mendasarinya semakin kuat, perlu dikembangkan alat yang lebih baik. Firebug Firefox adalah solusi awal untuk mengetahui bagaimana sebuah situs web bekerja dan bekerja di bawah terpal Setelah beberapa saat, fungsionalitas itu menemukan jalannya ke hampir semua browser. Hari ini, kita mengenal fitur itu sebagai alat Elemen Inspeksi Ini adalah cara yang ampuh untuk melihat teknologi dan kode yang mendasari sebuah situs web. Dengan demikian, Anda dapat menemukannya di beberapa tempat berbeda — seringkali melalui menu toolbar, mengklik kanan halaman dan memilih opsi, atau dengan pintasan keyboard Sementara fokus utama alat Inspeksi Elemen adalah pada HTML dan CSS halaman, masih ada lagi yang dapat Anda lakukan dengannya Dengan alat Inspeksi Elemen browser Anda, Anda dapat melihat bagian dalam situs web apa pun, dari HTML hingga CSS 👀 Pelajari cara menggunakannya di sini ⬇️Klik untuk TweetMenjelajahi Panel Elemen InspeksiAlat Inspeksi Elemen lebih dari sekadar cara untuk menampilkan kode. Seringkali ada beberapa panel untuk diakses
Selain itu, ada lebih banyak panel yang dapat Anda tambahkan Ada panel sederhana, seperti Media, dan panel yang lebih kompleks seperti JavaScript Profiler dan Performance monitor. Singkatnya, nama alat Elemen Inspeksi merugikan semua fungsi di bawah tenda. Ini memiliki kekuatan yang luar biasa dan harus menjadi pusat alur kerja pengembang web mana pun Mengapa Anda Ingin Menggunakan Elemen InspeksiAlat Inspeksi Elemen hampir merupakan satu-satunya solusi "terpaku" yang harus Anda miliki selama pengembangan. Kami akan membahas detail teknis mengapa sepanjang sisa artikel. Namun, pertama-tama, ada baiknya berbicara tentang motivasi Anda untuk menggunakan Elemen Inspeksi Ada beberapa alasan mengapa Anda ingin menggunakan alat ini
Singkatnya, belajar tentang pengembangan web melibatkan melihat contoh situs web yang bagus dan mencari tahu apa yang membuat mereka tergerak Alat Inspeksi Elemen memungkinkan Anda memeriksa HTML dan CSS yang tepat digunakan di situs, memberi Anda peluang besar untuk menerapkan aspek dan teknik tersebut dalam pekerjaan Anda Cara Menemukan Alat Elemen Inspeksi Peramban AndaKabar baiknya adalah menemukan alat Elemen Inspeksi sangatlah mudah. Dalam kebanyakan kasus, Anda akan mengklik kanan halaman dan memilih Inspect atau Inspect Element Secara default, itu akan membuka alat di jendela terpisah. Ini sering default ke sisi kanan. Tetapi Anda dapat menyesuaikan ini sesuai keinginan Anda dan bahkan mengeluarkan alat ke jendelanya Tentu saja, Anda juga dapat mengakses Elemen Inspeksi dari bilah alat browser atau melalui pintasan keyboard. Lokasi tepatnya akan bervariasi tergantung pada browser. Misalnya, di Firefox, Anda akan menemukan Alat Pengembang Web di menu Alat > Alat Peramban. Sebaliknya, Brave (dan peramban berbasis Chromium lainnya) memiliki opsi Alat Pengembang di menu Tampilan > Pengembang Pintasan keyboard seringkali serupa lintas-browser. Command + Shift + C (Kontrol + Shift + C untuk Windows). Pintasan ini mempercepat untuk menampilkan alat yang Anda perlukan untuk bekerja dengan segera Jika Anda belum pernah membuka alat Elemen Inspeksi sebelumnya, sering ditampilkan di sisi kanan menu Anda, seperti yang kami sebutkan sebelumnya. Untuk mengubahnya, klik menu lampu lalu lintas di bilah alat Elemen Inspeksi. Di sini, Anda dapat mengganti sisi tampilan "dock". Perhatikan bahwa Firefox juga menggunakan tampilan "triple pane" secara default, yang membantu Anda mendapatkan sebanyak mungkin informasi di alat Elemen Inspeksi Sekarang setelah alat tersebut terbuka, sebaiknya cari tahu apa yang dapat Anda lakukan dengannya. Kami akan membicarakan ini selanjutnya 3 Situasi untuk Menggunakan Alat Elemen InspeksiKami telah menyentuh beberapa cara Anda akan menggunakan alat Elemen Inspeksi, tetapi kami dapat melangkah lebih jauh dari ini untuk menawarkan beberapa kasus penggunaan. Mari kita bahas ini secara singkat 1. Mencari Elemen Tertentu di Halaman WebTujuan utama alat Inspeksi Elemen sesuai namanya — memeriksa elemen situs web. Untuk melakukan ini, Anda akan menuju ke halaman web yang diinginkan dan kemudian memilih metode Anda untuk membuka alat pengembangan Setelah panel terbuka, Anda akan mengeklik panah yang berfungsi sebagai pemilih untuk elemen yang Anda inginkan Dari sini, Anda dapat mengarahkan kursor ke elemen apa pun di halaman, dan Anda akan melihatnya disorot di jendela Inspektur/Elemen Ini adalah proses yang sederhana — salah satu alasan mengapa alat Elemen Inspeksi sangat berharga dan populer di kalangan pengembang web 2. Meniru Perangkat Target, Layar, dan BrowserElemen Inspeksi juga berfungsi sebagai semacam emulator perangkat. Dengan kata lain, Anda dapat melihat tampilan situs web pada perangkat tertentu. Pilihannya banyak Emulator ini akan sangat bagus untuk menilai apakah strategi yang mengutamakan seluler atau desain responsif Anda akurat dan berfungsi. Ini sangat berharga dan juga lebih hemat biaya daripada memiliki 200 perangkat di sekitar meja Anda Anda akan sering mengakses emulasi perangkat dari ikon kecil di suatu tempat di panel Elemen Inspeksi Mengklik ikon ini akan menampilkan situs Anda seperti yang terlihat di perangkat yang Anda pilih Kami akan menggali ini lebih detail nanti, tetapi ini adalah cara yang sangat kuat untuk membuat desain Anda konsisten di seluruh perangkat 3. Memastikan Performa Halaman WebAlat Elemen Inspeksi juga dapat membantu Anda menilai kecepatan dan performa situs web melalui panel Performa Fitur ini bekerja dengan “merekam” waktu pemuatan elemen dan skrip tertentu. Peramban berbasis Chromium bekerja sangat baik dalam menawarkan informasi ini. Anda akan merekam halaman saat dimuat, lalu melihat hasilnya dalam format garis waktu Ini adalah cara terbaik untuk memastikan apakah suatu halaman berkinerja baik pada tingkat umum. Dari sana, Anda akan ingin menggunakan alat seperti Google PageSpeed Insights atau Lighthouse untuk lebih meningkatkan kinerja situs Anda. Browser berbasis Chromium akan memiliki pembuat laporan Lighthouse bawaan Anda juga dapat melihat ringkasan pengujian kinerja di beberapa tab lainnya. Misalnya, Anda dapat melihat Pohon Panggilan, ringkasan keseluruhan, dan Log Peristiwa Bisa dibayangkan bahwa Anda tidak memerlukan alat lain untuk menilai kinerja atau cara kerja situs web Anda. Mempelajari cara kerjanya dalam praktik adalah sesuatu yang akan kita diskusikan selanjutnya Trik dan Tips Menggunakan Inspect Element ToolKami telah berbicara tentang bagaimana alat Elemen Inspeksi lebih kuat daripada yang terlihat pada pandangan pertama. Mari kita lihat beberapa trik dan tip untuk mendapatkan yang terbaik dari rangkaian fiturnya, dimulai dari dasar-dasarnya Terapkan aplikasi Anda ke Kinsta - Mulai dengan Kredit $20 sekarangJalankan Node Anda. Aplikasi js, Python, Go, PHP, Ruby, Java, dan Scala, (atau hampir apa pun jika Anda menggunakan Dockerfile kustom Anda sendiri), dalam tiga langkah mudah Terapkan sekarang dan dapatkan diskon $20Mengubah Properti Elemen, Nilai, dan StatusSejauh ini, kami hanya menyentuh konsep penggunaan alat Elemen Inspeksi untuk membuat perubahan sementara pada situs. Mari kita bahas bagaimana melakukan ini secara lebih rinci Langkah-langkahnya mudah. Pertama, gunakan ikon panah untuk memilih elemen pilihan Anda. Anda akan melihat overlay yang menyorot berbagai komponen saat Anda mengarahkan kursor ke atasnya Setelah Anda mendapatkan elemen yang Anda inginkan, Anda dapat mengklik dua kali hampir di mana pun Anda melihat tag di dalam panel Elemen dan mengetikkan perubahan. Misalnya, kami ingin mengubah teks pahlawan asli di beranda Kinsta menjadi sesuatu yang berbeda Anda juga dapat bekerja dengan CSS dengan cara yang sama seperti HTML. Misalnya, ambil tombol ajakan bertindak (CTA) di beranda Kinsta Jika Anda memilih tombol menggunakan pointer, Anda dapat melihat CSS terkait di panel Styles sebelah kanan Seperti halnya elemen HTML, Anda juga dapat mengubah nilai dan menambahkan CSS Tentu saja, untuk elemen seperti tombol, Anda mungkin ingin bekerja dengan berbagai statusnya. Dalam hal ini,. kondisi hover juga layak untuk diubah. Untuk melakukan ini, klik. tautan hov di panel Gaya. Memilih ini akan memunculkan daftar status elemen, dan Anda dapat memilih status elemen yang ingin Anda lihat CSS hover-state-nya Halaman web akan menunjukkan bagaimana keadaan terlihat tanpa Anda harus bertindak. Di sini, kami telah mengubah warna hover untuk membedakannya dari status tombol default Anda bahkan dapat mengambil URL gambar dan menukarnya dengan yang lain. Di beranda Kinsta, kami menampilkan tangkapan layar dasbor MyKinsta Dengan menemukan elemen dan mengubah URL sumber gambar, Anda dapat menguji gambar lain sebagai gantinya Seperti yang Anda harapkan, perubahan ini tidak permanen, dan dengan penyegaran halaman yang cepat, Anda dapat mengembalikan semuanya ke normal. Sebagai alternatif, Anda juga dapat menyalin HTML dan CSS ke editor Anda dan memasukkannya ke dalam kode Anda untuk membuat perubahan tersebut permanen Mencari ElemenBisa jadi sebelum Anda dapat mengubah suatu elemen, Anda harus menemukannya. Alat Inspeksi Elemen memiliki fungsi pencarian langsung yang dapat membantu Anda menemukan segala aspek halaman web Yang mengatakan, sulit untuk menemukan jika Anda tidak tahu di mana mencarinya. Cara "resmi" di browser berbasis Chromium adalah menuju ke menu "lampu lalu lintas" di sisi kanan halaman dan pilih opsi Pencarian Perlu hosting yang luar biasa, cepat, dan aman untuk situs web baru Anda? . Lihat rencana kami Menggunakan ini akan membuka panel Konsol, bersama dengan tab Pencarian. Dari sini, ketikkan tag yang Anda inginkan ke dalam kotak teks, dan Anda akan melihat daftar elemen terkait di halaman Perhatikan bahwa di browser lain, Anda dapat menemukan fungsionalitas di tempat lain. Misalnya, Firefox menyertakan kotak pencarian di bagian atas panel Inspekturnya Ini tip cepat lainnya. Anda dapat melakukan perluasan rekursif dari berbagai node dan elemen dengan mengklik kanan di dalam panel Elemen, dan memilih Perluas secara rekursif Jika Anda melihat panel Styles, Anda juga akan menemukan kotak teks Filter. Kolom ini memungkinkan Anda memfilter menurut properti CSS, menjadikannya pendamping yang hebat untuk fungsi penelusuran global Secara keseluruhan, tidak sulit untuk menemukan apa yang Anda butuhkan dengan dua alat filter dan pencarian khusus Primer Cepat pada Model KotakSalah satu cara terbaik alat Inspeksi Elemen dapat membantu Anda mempelajari lebih lanjut tentang bagaimana properti CSS bekerja pada elemen adalah panel "model kotak" visual Ikhtisar ini memberi Anda representasi tentang bagaimana kotak tertentu (seperti "elemen" atau "div") muncul di layar. Dengan kata lain, ini adalah ikhtisar tentang bagaimana margin, padding, border, dan konten digabungkan menjadi bagian yang Anda lihat di layar. Menjelaskan model kotak CSS lengkap dan bagaimana interaksinya dengan HTML halaman web berada di luar cakupan artikel ini, meskipun Mozilla memiliki panduan fantastis untuk seluk beluk konsep tersebut Anda akan sering menemukan panel Model Kotak di dalam bagian Tata Letak atau Perhitungan di panel sebelah kanan alat Elemen Inspeksi Seperti elemen dan properti lainnya, Anda juga dapat mengubah nilai dan pengaturan kotak tertentu. Juga akan ada daftar properti lain untuk membantu Anda memposisikan kotak, mengatur indeks-z, menerapkan pengaturan float dan tampilan, dan banyak lagi. Saat bekerja dengan model kotak, Anda juga bisa mendapatkan keuntungan dari melihat sistem grid yang sedang dimainkan di halaman. Untuk melakukannya, lihat panel Layout — opsi yang Anda perlukan ada di bawah menu Grid Mengeklik setelan tampilan yang Anda inginkan lalu memilih overlay yang relevan akan menampilkannya di layar, memungkinkan Anda membuat keputusan yang lebih akurat menggunakan model kotak untuk memanipulasi elemen situs Perangkat Emulasi Menggunakan Elemen InspeksiMereka telah berubah dari kata kunci menjadi istilah leksikal terintegrasi, tetapi "responsif" dan "ramah seluler" adalah faktor utama pengembangan web. Dengan demikian, alat Elemen Inspeksi menangani faset ini melalui beberapa fitur Di sebagian besar browser, alat Inspeksi Elemen akan memiliki ikon perangkat seluler di sepanjang bilah alat atas Safari, bagaimanapun, berbeda. Sebagai gantinya, ada sakelar Mode Desain Responsif Masuk/Keluar di menu Kembangkan Terlepas dari bagaimana Anda sampai di sana, setelah Anda memilih opsi, halaman web akan ditampilkan seolah-olah Anda sedang melihatnya di perangkat yang lebih kecil Sementara Safari hanya memberi Anda pilihan perangkat Apple yang berbeda, browser lain menggali untuk memberi Anda alat yang Anda perlukan untuk mendesain dengan prinsip yang mengutamakan seluler. Misalnya, Anda dapat memilih orientasi viewport, serta perangkat mana yang ingin Anda tiru Ada dua fitur menarik lainnya di sini. Pertama, Anda dapat memilih kecepatan jaringan yang ditiru. Safari tidak menyertakan opsi apa pun untuk ini, dan browser berbasis Chromium menawarkan pilihan pelambatan jaringan yang kecil dan umum Firefox melakukan yang terbaik di sini, dengan pilihan jaringan yang layak untuk dipilih Untuk menyempurnakannya, Anda juga dapat mensimulasikan umpan balik haptic dan pengenalan sensor. Ini default di browser berbasis Chromium, dan di Firefox, Anda harus mengaktifkannya Firefox tertinggal di sini, karena Chrome, Brave, dan lainnya menampilkan kursor Anda sebagai overlay "seperti ujung jari" kecil. Fungsionalitasnya tidak sempurna untuk browser apa pun, meskipun ini merupakan cara yang andal untuk menentukan bagaimana situs Anda dapat bekerja di perangkat lain Pengujian semacam ini sering kali gagal bagi banyak pengembang web. Yang mengatakan, tidak ada alasan sekarang ketika browser menawarkan solusi komprehensif seperti ini Pintasan Keyboard Saat Menggunakan Alat Elemen InspeksiSebagian besar pintasan keyboard browser seringkali sama di seluruh browser. Itu kabar baik jika Anda beralih di antara berbagai alat untuk menguji situs Anda Berikut daftar singkat beberapa pintasan paling populer (dan berharga). Buka alat Inspect ElementCommand + Shift + C untuk Mac, Control + Shift + C untuk WindowsBerpindah di antara nodePanah atas dan bawahPerluas node yang dipilihPanah kananCiutkan node yang dipilihPanah kiriPerluas dan ciutkan node secara rekursifOption + Klik untuk Mac, Alt + Klik untuk WindowsBergerak di dalam node ke . 1Option + Panah atas untuk Mac, Alt + Panah atas untuk WindowsKetika properti CSS dipilih, kurangi nilainya dengan 0. 1Option + Panah bawah untuk Mac, Alt + Panah bawah untuk WindowsTentu masih banyak lagi shortcut yang tersedia. Mozilla memiliki untuk Firefox, sementara Chrome, Brave, Edge, dan lainnya berbagi pintasan. Apple kurang membantu dengan pintasan pengembang Safari, karena tidak ada daftar yang ditentukan dalam halaman bantuan mereka. Sebagai gantinya, kami menyarankan untuk membaca dokumentasi resmi untuk alat pengembang Safari Pelajari lebih dalam fitur Elemen Inspeksi browser (dan semua alat yang ada di dalamnya) dengan panduan ekstensif ini 🔎Klik untuk TweetRingkasanPengembangan web tidak lagi hanya HTML. Ada banyak teknologi yang terlibat. Bahkan tetap berpegang pada trinitas suci HTML, CSS, dan JavaScript, Anda masih perlu melihat bagaimana sebuah situs web menyatukan semua komponen ini. Alat Inspeksi Elemen browser adalah salah satu cara terbaik untuk melihat ke bawah terpal situs web dan mencari tahu secara detail cara kerjanya. Meskipun luar biasa sebagai bantuan belajar, ini juga dapat membantu Anda menguji perubahan pada situs Anda dan menemukan fungsinya di berbagai perangkat dan jaringan seluler Apakah Anda sering menggunakan Elemen Inspeksi? Dapatkan semua aplikasi, database, dan situs WordPress Anda secara online dan dalam satu atap. Platform cloud kami yang penuh fitur dan berkinerja tinggi mencakup
Uji sendiri dengan diskon $20 untuk bulan pertama Hosting Aplikasi atau Hosting Basis Data. Jelajahi paket kami atau hubungi bagian penjualan untuk menemukan yang paling cocok untuk Anda Di mana JavaScript dalam elemen inspeksi?Klik kanan pada laman web mana pun, klik Periksa , dan Anda akan melihat jeroan situs tersebut. kode sumbernya, gambar dan CSS yang membentuk desainnya, font dan ikon yang digunakannya, kode Javascript yang menggerakkan animasi, dan banyak lagi.
Dapatkah Anda melihat JavaScript di Chrome?Aktifkan JavaScript di Google Chrome
. Click Site settings. Klik JavaScript. Situs Pilih dapat menggunakan Javascript.
Apakah memeriksa elemen menunjukkan kode?Periksa elemen adalah salah satu alat pengembang yang dimasukkan ke dalam browser web Google Chrome, Firefox, Safari, dan Internet Explorer. Dengan mengakses alat ini, Anda benar-benar dapat melihat — dan bahkan mengedit — kode sumber HTML dan CSS di balik konten web . |
Dapatkah Anda melihat javascript dengan inspeksi?
Pos Terkait
Copyright © 2024 ketajaman Inc.
