Bagaimana cara membuka konsol pengembang? Konsol Pengembang Google Chrome: sepuluh kegunaan yang tidak jelas

Google Chrome,

HTML,

JavaScript,

Pengembangan situs web

Terjemahan

Cara menggunakan konsol pengembang untuk berbelok Google Chrome dalam rupa editor teks? Apa arti dari ikon tersebut, yang familiar bagi banyak orang dari jQuery? $ ? Bagaimana saya bisa menampilkan sekumpulan nilai di konsol, diformat sebagai tabel yang cukup baik? Jika jawaban atas pertanyaan-pertanyaan ini tidak langsung terlintas dalam pikiran, maka tab Menghibur alat pengembang Chrome belum menampakkan diri kepada Anda dengan segala kemegahannya.

Sekilas, kami memiliki konsol JavaScript biasa, yang hanya cocok untuk menampilkan log respons server atau nilai variabel. Ngomong-ngomong, begitulah cara saya menggunakannya saat pertama kali memulai pemrograman. Namun, seiring berjalannya waktu, saya memperoleh pengalaman, belajar lebih banyak, dan secara tak terduga menemukan bahwa konsol Chrome dapat melakukan banyak hal yang tidak saya ketahui sebelumnya. Saya ingin membicarakan hal ini hari ini. Ya, jika saat ini Anda tidak sedang membaca di ponsel, Anda bisa langsung mencoba semua ini.

1. Memilih elemen DOM

Jika Anda familiar dengan jQuery, bukan hak saya untuk memberi tahu Anda tentang pentingnya konstruksi seperti $('.kelas') Dan $('id'). Bagi mereka yang belum mengetahuinya, mereka mengizinkan Anda memilih elemen DOM dengan menentukan kelas dan pengidentifikasi yang ditetapkan padanya. Konsol pengembang memiliki fungsi serupa. Di sini “$”, bagaimanapun, tidak ada hubungannya dengan jQuery, meskipun pada dasarnya melakukan hal yang sama. Ini adalah alias untuk fungsi tersebut dokumen.querySelector().

Perintah formulir $('Namatag'), $('.kelas'), $('#id') Dan $('.kelas #id') mengembalikan elemen DOM pertama yang cocok dengan pemilih. Selain itu, jika jQuery tersedia di dokumen, “$”-nya akan digantikan oleh fungsi konsol ini.

Ada desain lain di sini: $$ . Penggunaannya sepertinya $$('Namatag') atau $$('.kelas'). Ini memungkinkan Anda memilih semua elemen DOM yang cocok dengan pemilih dan menempatkannya dalam array. Bekerja dengannya tidak berbeda dengan array lainnya. Untuk memilih elemen tertentu, Anda dapat mengaksesnya berdasarkan indeks.

Misalnya perintah $$('.namakelas') akan memberi kita array semua elemen halaman dengan nama kelas yang ditentukan saat memanggilnya. Tim $$('.namakelas') Dan $$('.namakelas') akan memberikan akses, masing-masing, ke elemen pertama dan kedua dari array yang dihasilkan.

Bereksperimen dengan perintah $ Dan $$

2. Ubah browser menjadi editor teks

Pernahkah Anda mendapati diri Anda berpikir bahwa akan lebih baik jika mengedit teks halaman web yang sedang Anda debug langsung di browser? Jika ya, maka Anda akan menyukai perintah yang ditunjukkan di bawah ini.

Dokumen.body.contentEditable=true
Setelah dijalankan di konsol, dokumen yang dibuka di browser dapat diedit tanpa harus mencari fragmen yang diinginkan dalam kode HTML.

3. Menemukan event handler yang terikat pada suatu elemen

Selama debugging, Anda mungkin perlu menemukan event handler yang terikat pada elemen. Ini sangat mudah dilakukan menggunakan konsol. Yang perlu Anda lakukan hanyalah menggunakan perintah ini:

DapatkanEventListeners($('pemilih'))
Sebagai hasil dari eksekusinya, sebuah array objek akan dihasilkan berisi daftar kejadian yang dapat ditanggapi oleh elemen tersebut.

Penangan Acara

Untuk menemukan handler untuk event tertentu, Anda dapat menggunakan konstruksi berikut:

GetEventListeners($('selector')).eventName.listener
Perintah ini akan mencetak kode fungsi event handler. Di Sini Nama acara adalah array yang berisi semua peristiwa dari tipe tertentu. Misalnya, dalam praktiknya mungkin terlihat seperti ini:

DapatkanEventListeners($('#firstName')).klik.listener
Hasilnya, kita akan menerima kode fungsi yang terkait dengan acara tersebut klik elemen dengan id Nama depan.

4. Pemantauan acara

Jika Anda ingin mengamati terjadinya peristiwa yang terkait dengan elemen DOM tertentu, konsol dapat membantu dalam hal ini. Berikut beberapa perintah yang dapat Anda gunakan untuk memantau peristiwa.

Tim monitorEvents($('pemilih')) memungkinkan Anda mengatur pemantauan semua peristiwa yang terkait dengan elemen yang sesuai dengan pemilih. Ketika suatu peristiwa terjadi, sebuah entri dibuat di konsol. Misalnya perintah monitorEvents($('#Nama Depan')) akan memungkinkan Anda untuk mencatat semua peristiwa yang terkait dengan elemen yang pengidentifikasinya Nama depan.
Tim monitorEvents($('pemilih'),'namaacara') mirip dengan yang sebelumnya, tetapi ditujukan untuk acara tertentu. Di sini, selain pemilih elemen, nama acara juga diteruskan ke fungsi. Perintah ini memungkinkan Anda menampilkan data tentang terjadinya suatu peristiwa ke konsol. Misalnya perintah monitorEvents($('#Nama Depan'),'klik') akan menampilkan informasi hanya pada acara tersebut klik elemen dengan id Nama depan.
Tim monitorEvents($('pemilih'),['eventName1','eventName3",….]) memungkinkan Anda memantau beberapa peristiwa yang dipilih. Di sini array string diteruskan ke fungsi, yang berisi nama-nama peristiwa. Misalnya, perintah ini: monitorEvents($('#NamaDepan'),['klik','fokus']) akan menampilkan informasi acara ke konsol klik Dan fokus untuk elemen dengan id Nama depan.
Tim unmonitorEvents($('pemilih')) memungkinkan Anda berhenti memantau dan mencatat peristiwa di konsol.

5. Mengukur waktu eksekusi suatu fragmen kode

Fungsi tampilan tersedia di konsol Chrome konsol.waktu('namalabel'), yang menggunakan label sebagai argumen dan memulai pengatur waktu. Satu lagi fungsi konsol.timeEnd('namalabel'), menghentikan pengatur waktu yang diberi label. Berikut ini contoh penggunaan fungsi-fungsi tersebut:

Console.time("Waktu Saya"); //Memulai pengatur waktu berlabel myTime console.timeEnd("myTime"); //Menghentikan pengatur waktu berlabel myTime //Output: myTime:123.00 ms
Contoh di atas memungkinkan Anda mengetahui waktu antara memulai dan menghentikan pengatur waktu. Anda dapat melakukan hal yang sama di dalam program JavaScript dan menemukan waktu eksekusi suatu kode.

Katakanlah saya perlu mencari tahu durasi sebuah loop. Anda dapat melakukannya seperti ini:

Console.time("Waktu Saya"); // Memulai pengatur waktu berlabel myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Menampilkan nilai variabel dalam bentuk tabel

Katakanlah kita mempunyai array objek seperti ini:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]
Jika Anda menampilkannya di konsol, hasilnya akan seperti itu struktur hierarki dalam bentuk, pada kenyataannya, serangkaian objek. Ini - peluang yang berguna, cabang-cabang struktur dapat diperluas dengan melihat isi objek. Namun, dengan pendekatan ini sulit untuk memahami, misalnya, bagaimana sifat-sifat unsur serupa berhubungan. Untuk membuatnya lebih nyaman untuk bekerja dengan data tersebut, data tersebut dapat dikonversi ke bentuk tabel. Untuk melakukannya, gunakan perintah berikut:

Konsol.tabel(Namavariabel)
Ini memungkinkan Anda untuk menampilkan variabel dan semua propertinya dalam bentuk tabel. Berikut tampilannya.

Menampilkan array objek sebagai tabel

7. Lihat kode elemen

Anda dapat dengan cepat mendapatkan kode elemen dari konsol menggunakan perintah berikut:

Tim memeriksa($('pemilih')) memungkinkan Anda membuka kode elemen yang sesuai dengan pemilih di panel Elemen peralatan Pengembang Google krom. Misalnya perintah memeriksa($('#Nama Depan')) akan memungkinkan Anda melihat kode elemen dengan pengidentifikasi Nama depan. Tim memeriksa($$('a')) akan membuka kode untuk link keempat yang ada di DOM.
Perintah formulir $0 , $1 , $2 Memungkinkan Anda dengan cepat menavigasi ke item yang baru-baru ini dilihat. Misalnya, $0 akan membuka kode elemen yang terakhir dilihat, dan seterusnya.

8. Menampilkan daftar properti elemen

Jika Anda perlu melihat daftar properti suatu elemen, konsol juga akan membantu dalam hal ini. Perintah berikut digunakan di sini:

Dir($('pemilih'))
Ia mengembalikan objek yang berisi properti yang terkait dengan elemen yang diberikan DOM. Seperti kasus serupa lainnya, isi objek ini dapat diperiksa dengan melihat struktur pohonnya.

9. Memanggil hasil terakhir yang diterima

Konsol dapat digunakan sebagai kalkulator, seperti yang mungkin diketahui semua orang. Tetapi hanya sedikit orang yang tahu bahwa ia memiliki alat bawaan yang memungkinkan Anda menggunakan hasil perhitungan sebelumnya dalam perintah. Secara desain $_ Anda dapat mengambil hasil ekspresi sebelumnya dari memori. Ini adalah tampilannya:

2+3+4 9 //- Hasil penjumlahannya adalah 9 $_ 9 // Hasil terakhir yang didapat ditampilkan $_ * $_ 81 // Karena hasil terakhir adalah 9, maka didapat 81 Math.sqrt($ _) 9 // Akar kuadrat dari hasil terakhir yaitu 81 $_ 9 // Kita mendapat 9 lagi - hasil perhitungan sebelumnya

10. Membersihkan konsol dan memori

Jika Anda perlu mengosongkan konsol dan memori, gunakan perintah sederhana ini:

Jernih()
Setelah menekan Enter, konsol bersih akan siap untuk eksperimen baru.
Itu saja.

11, 12, 13, 14…

Sejujurnya, ini belum semuanya. Saya hanya menunjukkan beberapa di antaranya peluang yang tidak jelas Konsol Google Chrome. Faktanya, mereka

Konsol pengembang memungkinkan Anda menambahkan aplikasi Android ke Google.Play, melacak statistiknya, mengubah deskripsi, dan menerimanya laporan keuangan tentang penjualan aplikasi berbayar. Konsolnya sendiri tersedia di https://play.google.com/apps/publish

Jika Anda masuk ke konsol untuk pertama kalinya, Anda dapat memulai dengan pengaturan, di mana Anda mengatur nama pengembang dan hak akses orang lain.

Nama pengembang adalah nama publik yang muncul dalam deskripsi setiap aplikasi Anda di Google.Play. Meskipun dapat dengan mudah diubah, lebih baik memilih nama secara bertanggung jawab; banyak pengguna mengasosiasikan aplikasi dengan nama pengembang.

Alamatnya juga harus dicantumkan di sana. e-mail dan telepon. Dokumen tersebut tidak dipublikasikan dan diperlukan untuk keperluan internal.

Di bagian “Akun dan Hak Akses”, Anda dapat mengundang sejumlah pengembang lain dan menentukan hak mereka. Agar pengguna dapat masuk ke konsol, mereka harus memilikinya akun Google. Log Aktivitas memungkinkan Anda melacak aktivitas semua pengguna.

Laporan keuangan hanya tersedia untuk aplikasi berbayar. Anda harus terlebih dahulu mengklik tautan “Siapkan akun penjual”, tunjukkan nama lengkap Anda dan parameter rekening bank atau kartu tempat uang yang diperoleh akan dikirim. Akrual terjadi dalam dolar dan ditransfer ketika ambang batas $100 tercapai. Oleh karena itu, lebih baik memiliki satu dolar kartu bank, ini dilakukan di bank mana pun, dapatkan detail kartu dari bank yang sama dan tunjukkan di profil penjual Anda. Dengan cara ini Anda tidak akan bergantung pada nilai tukar dan akan menerima jumlah persis seperti yang telah dikreditkan Google kepada Anda.

Untuk Rusia, harga minimum aplikasi adalah 30 rubel, maksimum 6 ribu rubel. Untuk Ukraina, harga berkisar antara 8 hingga 1650 hryvnia. Ingat juga bahwa Google mengambil komisi 30% dari setiap penjualan, jadi dari harga minimum yang ditetapkan sebesar 30 rubel, Anda sebenarnya hanya akan menerima 21 rubel. Ini harus diperhitungkan saat menghitung keuntungan.

Setiap browser memilikinya sendiri alat pengembang adalah apa yang oleh banyak orang disebut sebagai “konsol”, pertimbangkan Konsol di dalamnya peramban Chrome. Ini terlihat seperti ini:

Faktanya, Konsol di browser Chrome adalah alat yang dengannya Anda tidak hanya dapat melihat konten halaman yang ditampilkan oleh browser, tetapi juga kesalahan yang ada(yang paling sering dilakukan penguji), namun memperbaiki kesalahan ini juga jauh lebih mudah dan cepat (yang paling sering dilakukan pengembang), mengukur berbagai indikator, dan memanipulasi halaman.

Cara membuka konsol di browser Chrome:

- Kunci F12;

- menekan secara bersamaan Tombol Ctrl+ Shift + Saya;

— RMB pada elemen halaman -> Lihat kode;

- menu peramban -> Alat Tambahan-> Alat Pengembang.

Itu dapat ditempatkan di bagian bawah halaman atau di samping, atau dapat dilepas pinnya ke jendela terpisah. Jadi, mari kita lihat setiap tab di konsol terbuka secara terpisah.

Totalnya ada 8 tab, yang masing-masing menampilkan data tertentu:

1 – Elemen(berisi semua kode html/css halaman dan memungkinkan Anda memilih elemen untuk diteliti, serta mengeditnya)

2 – Menghibur(menampilkan ada/tidaknya kesalahan/peringatan dalam kode)

3 – Sumber(memungkinkan Anda melakukan operasi pada kode halaman)

4 – Jaringan(melacak waktu eksekusi permintaan tertentu dan permintaan itu sendiri)

5 – Garis waktu(mengukur waktu buka halaman)

6 – Profil(memungkinkan Anda membuat JavaScript, profil CPU)

7 – Sumber daya ( memungkinkan Anda melihat data tersimpan tertentu)

8 – Audit(memeriksa parameter tertentu)

Sekarang mari kita bahas masing-masing secara terpisah dan lebih terinci:

Panel Elemen

Panel Elemen menampilkan tata letak halaman persis seperti yang akan dirender di browser. Anda dapat mengubah konten situs secara visual dengan mengubah kode html/css di panel elemen. Seperti yang mungkin Anda sadari (atau mungkin tidak), jendela kiri menampilkan dokumen html, dan jendela kanan menampilkan css. Dengan melakukan manipulasi sederhana pada data, Anda dapat mengubah konten dan desain halaman yang terbuka. Misalnya, Anda dapat mengubah teks di jendela jika Anda mengeditnya di badan html, dan juga mengubah font halaman dengan mengubah nilainya di kolom css. Tapi ini tidak akan menyimpan data yang dimasukkan, tetapi hanya membantu mengevaluasi perubahan yang diterapkan secara visual. Selain itu, Anda dapat melihat kode elemen halaman tertentu. Untuk melakukan ini, klik kanan padanya dan pilih perintah “Lihat kode”.

Panel Elemen memiliki satu fitur yang sangat keren. Anda dapat melihat seperti apa tampilannya halaman terbuka di beberapa perangkat dengan ekstensi layar berbeda. Dengan mengklik ikon telepon di sebelah kiri tab Elemen, sebuah jendela akan dipanggil di mana Anda dapat mengubah ukuran layar yang diinginkan, sehingga meniru perangkat tertentu dan mengontrol tampilan halaman di dalamnya. Ini terlihat seperti ini:

Saat Anda mengklik tombol Pilih Model, dropdown dengan banyak pilihan perangkat akan muncul. Pilih yang Anda perlukan - dan voila! Halaman tersebut ditampilkan seolah-olah itu adalah sebuah perangkat. Dengan cara ini, panel Elemen dapat digunakan tidak hanya untuk melihat atau mengedit halaman, tetapi juga untuk meniru perangkat tampilan. Semuanya terpadu dan tersedia di Chrome!

Panel Menghibur

Tab paling populer untuk penguji, karena di sinilah kita melihat kesalahan ditemukan dalam kode saat menjalankan skrip. Panel ini juga ditampilkan berbagai jenis peringatan dan rekomendasi (seperti pada gambar di atas). Semua pesan yang ditampilkan di tab dapat difilter. Kesalahan juga menampilkan lokasinya dan dengan mengkliknya Anda akan dibawa ke tab Sumber, di mana kesalahan akan ditampilkan dalam desain umum halaman.

Kosongkan bidang tab Konsol (jika Anda perlu menghapus pesan tentang kesalahan sebelumnya) dapat dilakukan dengan mengklik ikon lingkaran yang dicoret. Anda dapat memfilter pesan di konsol berdasarkan jenis - kesalahan, peringatan, info, keluaran standar, pesan debugger, diperbaiki - dengan memilih salah satu pilihan yang tersedia konsol.

Panel Sumber

Biasanya, tab ini adalah tempat pemrogram men-debug kode. Ini memiliki 3 jendela (dari kiri ke kanan):

Daerah file sumber. Ini berisi semua file yang terhubung ke halaman, termasuk JS/CSS.
Area teks. Ini berisi teks file.
Zona informasi dan kendali.

Di zona file sumber, elemen yang diperlukan dipilih, di zona teks, elemen tersebut langsung di-debug, dan di zona informasi dan kontrol, Anda dapat memulai/menghentikan kode yang di-debug.

Panel Jaringan

Fungsi utama tab ini adalah merekam blog web. Ini memberikan visibilitas real-time ke dalam sumber daya yang diminta dan dimuat. Anda dapat mengidentifikasi sumber daya mana yang sedang dimuat dan diproses lagi waktu untuk selanjutnya mengetahui di mana dan dengan cara apa halaman tersebut dapat dioptimalkan.

Perlu juga dicatat bahwa di tab ini dalam mode Baris permintaan besar Anda dapat melihat permintaan yang dikirim ke server, serta tanggapan yang datang darinya, konten dan karakteristiknya.

Panel kinerja

Tab ini digunakan jika diperlukan ulasan lengkap waktu yang dihabiskan. Untuk apa dibelanjakan, berapa banyak yang dibutuhkan untuk proses ini atau itu. Benar-benar semua aktivitas ditampilkan di sini, termasuk memuat sumber daya dan menjalankan Javascript.

panel ini memungkinkan untuk membuat profil waktu eksekusi dan penggunaan memori aplikasi atau halaman web, sehingga membantu memahami dengan tepat di mana banyak sumber daya dihabiskan dan bagaimana kode dapat dioptimalkan.

CPUprofiler memberikan informasi tentang waktu yang dihabiskan untuk mengeksekusi Javascript.

Profiler tumpukan menampilkan alokasi memori.

profil JavaScript detail di mana tepatnya waktu yang dihabiskan saat menjalankan skrip.

Dirancang untuk memeriksa elemen yang dimuat. Memungkinkan interaksi dengan Database HTML5, Penyimpanan Lokal, Cookie, AppCache, dll. Di tab ini Anda dapat menghapus cookie dengan membukanya tab ini dan mengklik ikon lingkaran yang dicoret

Panel Audit

Panel ini berfungsi sebagai penganalisis halaman saat sedang memuat. Dari hasil audit, muncul rekomendasi untuk mengoptimalkan pemuatan halaman dan meningkatkan kecepatan respons. Contoh metode optimasi dapat dilihat pada jendela di bawah ini.

Panel keamanan

Panel Keamanan menampilkan informasi tentang setiap permintaan dan menyoroti permintaan yang menyebabkan situs tidak menerima ikon hijau yang didambakan dalam statusnya.

Selain itu, Anda juga dapat memperoleh informasi berikut:

tentang pengecekan sertifikat, apakah situs tersebut telah mengkonfirmasi keasliannya dengan sertifikat TLS;
Koneksi TLS, yang menunjukkan apakah situs Anda menggunakan protokol aman modern;
keamanan sumber sekunder yang dimuat.

Faktanya, alat pengembang (Konsol di browser Chrome) adalah hal yang sangat berguna yang sering kali berguna bagi kami, para penguji. Terlebih lagi informasi yang berguna di situs web https://developers.google.com/web/tools/chrome-devtools/

Bagaimana cara menggunakan konsol pengembang untuk mengubah Google Chrome menjadi semacam editor teks? Apa arti dari ikon tersebut, yang familiar bagi banyak orang dari jQuery? $ ? Bagaimana saya bisa menampilkan sekumpulan nilai di konsol, diformat sebagai tabel yang cukup baik? Jika jawaban atas pertanyaan-pertanyaan ini tidak langsung terlintas dalam pikiran, maka tab Menghibur alat pengembang Chrome belum menampakkan diri kepada Anda dengan segala kemegahannya.

1. Memilih elemen DOM

Bereksperimen dengan perintah $ Dan $$

2. Ubah browser menjadi editor teks

Dokumen.body.contentEditable=true

Setelah dijalankan di konsol, dokumen yang dibuka di browser dapat diedit tanpa harus mencari fragmen yang diinginkan dalam kode HTML.

3. Menemukan event handler yang terikat pada suatu elemen

Selama debugging, Anda mungkin perlu menemukan event handler yang terikat pada elemen. Ini sangat mudah dilakukan menggunakan konsol. Yang perlu Anda lakukan hanyalah menggunakan perintah ini:

DapatkanEventListeners($('pemilih'))

Sebagai hasil dari eksekusinya, sebuah array objek akan dihasilkan berisi daftar kejadian yang dapat ditanggapi oleh elemen tersebut.

Penangan Acara

Untuk menemukan handler untuk event tertentu, Anda dapat menggunakan konstruksi berikut:

GetEventListeners($('selector')).eventName.listener

Perintah ini akan mencetak kode fungsi event handler. Di Sini Nama acara adalah array yang berisi semua peristiwa dari tipe tertentu. Misalnya, dalam praktiknya mungkin terlihat seperti ini:

DapatkanEventListeners($('#firstName')).klik.listener

Hasilnya, kita akan menerima kode fungsi yang terkait dengan acara tersebut klik elemen dengan id Nama depan.

4. Pemantauan acara

Tim monitorEvents($('pemilih')) memungkinkan Anda mengatur pemantauan semua peristiwa yang terkait dengan elemen yang sesuai dengan pemilih. Ketika suatu peristiwa terjadi, sebuah entri dibuat di konsol. Misalnya perintah monitorEvents($('#Nama Depan')) akan memungkinkan Anda untuk mencatat semua peristiwa yang terkait dengan elemen yang pengidentifikasinya Nama depan.
Tim monitorEvents($('pemilih'),'namaacara') mirip dengan yang sebelumnya, tetapi ditujukan untuk acara tertentu. Di sini, selain pemilih elemen, nama acara juga diteruskan ke fungsi. Perintah ini memungkinkan Anda menampilkan data tentang terjadinya suatu peristiwa ke konsol. Misalnya perintah monitorEvents($('#Nama Depan'),'klik') akan menampilkan informasi hanya pada acara tersebut klik elemen dengan id Nama depan.
Tim monitorEvents($('pemilih'),['eventName1','eventName3",….]) memungkinkan Anda memantau beberapa peristiwa yang dipilih. Di sini array string diteruskan ke fungsi, yang berisi nama-nama peristiwa. Misalnya, perintah ini: monitorEvents($('#NamaDepan'),['klik','fokus']) akan menampilkan informasi acara ke konsol klik Dan fokus untuk elemen dengan id Nama depan.
Tim unmonitorEvents($('pemilih')) memungkinkan Anda berhenti memantau dan mencatat peristiwa di konsol.

5. Mengukur waktu eksekusi suatu fragmen kode

Console.time("Waktu Saya"); //Memulai pengatur waktu berlabel myTime console.timeEnd("myTime"); //Menghentikan pengatur waktu berlabel myTime //Output: myTime:123.00 ms

Contoh di atas memungkinkan Anda mengetahui waktu antara memulai dan menghentikan pengatur waktu. Anda dapat melakukan hal yang sama di dalam program JavaScript dan menemukan waktu eksekusi suatu kode.

Katakanlah saya perlu mencari tahu durasi sebuah loop. Anda dapat melakukannya seperti ini:

6. Menampilkan nilai variabel dalam bentuk tabel

Katakanlah kita mempunyai array objek seperti ini:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]

Jika Anda menampilkannya di konsol, Anda mendapatkan struktur hierarki dalam bentuk array objek. Ini adalah fitur yang berguna; cabang-cabang struktur dapat diperluas dengan melihat isi objek. Namun, dengan pendekatan ini sulit untuk memahami, misalnya, bagaimana sifat-sifat unsur serupa berhubungan. Untuk membuatnya lebih nyaman untuk bekerja dengan data tersebut, data tersebut dapat dikonversi ke bentuk tabel. Untuk melakukannya, gunakan perintah berikut:

Konsol.tabel(Namavariabel)

Ini memungkinkan Anda untuk menampilkan variabel dan semua propertinya dalam bentuk tabel. Berikut tampilannya.

Menampilkan array objek sebagai tabel

7. Lihat kode elemen

Anda dapat dengan cepat mendapatkan kode elemen dari konsol menggunakan perintah berikut:

Tim memeriksa($('pemilih')) memungkinkan Anda membuka kode elemen yang sesuai dengan pemilih di panel Elemen Alat Pengembang Google Chrome. Misalnya perintah memeriksa($('#Nama Depan')) akan memungkinkan Anda melihat kode elemen dengan pengidentifikasi Nama depan. Tim memeriksa($$('a')) akan membuka kode untuk link keempat yang ada di DOM.
Perintah formulir $0 , $1 , $2 Memungkinkan Anda dengan cepat menavigasi ke item yang baru-baru ini dilihat. Misalnya, $0 akan membuka kode elemen yang terakhir dilihat, dan seterusnya.

8. Menampilkan daftar properti elemen

Jika Anda perlu melihat daftar properti suatu elemen, konsol juga akan membantu dalam hal ini. Perintah berikut digunakan di sini:

Dir($('pemilih'))

Ia mengembalikan objek yang berisi properti yang terkait dengan elemen DOM tertentu. Seperti kasus serupa lainnya, isi objek ini dapat diperiksa dengan melihat struktur pohonnya.

9. Memanggil hasil terakhir yang diterima

2+3+4 9 //- Hasil penjumlahannya adalah 9 $_ 9 // Hasil terakhir yang didapat ditampilkan $_ * $_ 81 // Karena hasil terakhir adalah 9, maka didapat 81 Math.sqrt($ _) 9 // Akar kuadrat dari hasil terakhir, yaitu 81 $_ 9 // Kita mendapat 9 lagi - hasil perhitungan sebelumnya

10. Membersihkan konsol dan memori

Jika Anda perlu mengosongkan konsol dan memori, gunakan perintah sederhana ini:

Setelah menekan Enter, konsol bersih akan siap untuk eksperimen baru.
Itu saja.

11, 12, 13, 14…

Sejujurnya, ini belum semuanya. Saya hanya menunjukkan beberapa kemampuan konsol Google Chrome yang tidak jelas. Faktanya, masih banyak lagi. Saya yakin Anda dapat memperluas daftar saya dengan temuan Anda sendiri.

Saya harap cerita saya membantu Anda mempelajari sesuatu yang berguna dan menghemat waktu tentang konsol Chrome yang layak menjadi bagian dari persenjataan sehari-hari programmer web.

API Perintah string krom DevTools berisi jumlah besar fungsi yang nyaman untuk mengeksekusi tugas-tugas sederhana: memilih dan memeriksa elemen DOM, menampilkan data di format yang dapat dibaca, menjalankan dan memeriksa profiler dan memantau peristiwa DOM.

Catatan: API ini hanya tersedia di dalam konsol. Dapatkan akses ke baris perintah API dari skrip di halaman tidak dimungkinkan.

$_

$_ mengembalikan nilai ekspresi terakhir yang dieksekusi.

Contoh di bawah mengevaluasi ekspresi sederhana (2 + 2). Kemudian $_ dieksekusi dan diberi nilai yang sama:

Dalam contoh ini, ekspresi yang dieksekusi berisi serangkaian nama. Mengeksekusi $_.length akan memberikan panjang array, dan ekspresi $_ itu sendiri akan mengambil nilai dari ekspresi terakhir yang dieksekusi, yaitu 4:

$0 – $4

Perintah $0 , $1 , $2 , $3 dan $4 berfungsi sebagai referensi ke 5 elemen DOM terakhir yang dilihat di panel Elemen, atau ke 5 objek JS terakhir dari heap yang dipilih di panel Profil. $0 mengembalikan elemen atau objek yang dipilih terakhir, $1 mengembalikan elemen atau objek sebelumnya, dan seterusnya.

Pada contoh di bawah, elemen media kelas dipilih di panel Elemen. Di konsol, $0 mengambil nilai yang sama:

Pada gambar di bawah, elemen lain pada halaman yang sama dipilih. $0 sekarang mengacu pada elemen ini, dan $1 ke elemen sebelumnya:

$(pemilih)

$(selector) mengembalikan referensi ke elemen DOM pertama dengan pemilih CSS yang ditentukan. Fungsi ini merupakan singkatan dari fungsi document.querySelector().

Klik klik kanan arahkan mouse ke hasilnya dan pilih "Reveal in Elements Panel" untuk mencari elemen di DOM atau "Scroll in to View" untuk melihatnya di halaman.

Catatan: Jika Anda menggunakan perpustakaan seperti jQuery yang menggunakan simbol $, maka fungsionalitas perpustakaan itu akan digunakan.

$$(pemilih)

$$(selector) mengembalikan array elemen yang berisi pemilih yang ditentukan. Perintah ini setara dengan memanggil document.querySelectorAll() .

Contoh berikut menggunakan $$() untuk membuat array dari semua elemen dalam dokumen dan mengembalikan properti src dari setiap elemen:

Var gambar = $$("img"); untuk (masing-masing dalam gambar) ( console.log(images.src); )

Catatan: Tekan Shift + Enter di konsol untuk membukanya baris baru tanpa menjalankan skrip.

$x(jalur)

$x(path) mengembalikan array elemen yang cocok dengan ekspresi XPath yang diberikan.

Contoh ini akan mengembalikan semua elemen

$x("//p")

Dan yang ini adalah semua elemennya

Mengandung elemen :

$x("//p[a]")

monitor (fungsi)

Saat menelepon fungsi yang ditentukan Sebuah pesan ditampilkan di konsol yang menyatakan bahwa fungsi ini dipanggil dengan argumen yang sesuai.

Fungsi jumlah(x, y) ( kembalikan x + y; ) monitor(jumlah);

Untuk membatalkan, gunakan unmonitor(function) .

monitorEvents(objek, )

Ketika salah satu peristiwa tertentu terjadi pada objek tertentu, objek Peristiwa ditulis ke konsol. Anda dapat menentukan peristiwa tertentu, serangkaian peristiwa, atau salah satu "jenis" peristiwa. Contoh di bawah ini.

Kueri berikut memantau semua perubahan ukuran objek jendela.

MonitorEvents(jendela, "ubah ukuran");

Kueri ini memonitor semua peristiwa "resize" dan "scroll" pada objek window:

MonitorEvents(jendela, ["ubah ukuran", "gulir"])

Anda juga dapat menentukan salah satu "jenis" peristiwa yang tersedia dari tabel di bawah:

Misalnya, kueri ini memantau semua peristiwa bertipe "kunci" pada elemen yang dipilih di panel Elemen:

MonitorEvents($0, "kunci");

Berikut adalah contoh output setelah mengetikkan karakter di kolom teks:

profil() dan profilEnd()

Untuk menjalankan pembuatan profil:

Profil("Profil saya")

Untuk menyelesaikan:

ProfileEnd("Profil saya")

Profil juga dapat disarangkan:

Profil("A"); profil("B"); profileEnd("A"); profileEnd("B");

Hasil:

Catatan: Profiler dapat berjalan secara bersamaan dan tidak harus ditutup sesuai urutan pembuatannya.

tabel(data, )

Keluaran data objek dalam format tabel. Misalnya, untuk menampilkan daftar nama, Anda perlu melakukan hal berikut:

Var nama = ( 0: ( Nama Depan: "John", Nama Belakang: "Smith" ), 1: ( Nama Depan: "Jane", Nama Belakang: "Doe" ) ); tabel(nama);

batalkan debug (fungsi)

undebug(function) berhenti men-debug fungsi yang ditentukan.

Batalkan debug (getData);

hapus monitor (fungsi)

unmonitor(function) berhenti memantau fungsi yang ditentukan.

Hapus pemantauan(getData);

unmonitorEvents(objek, )

unmonitorEvents(object, ) berhenti memantau objek dan kejadian tertentu:

UnmonitorEvents(jendela);

Anda juga dapat berhenti memantau peristiwa tertentu:

MonitorEvents($0, "mouse"); unmonitorEvents($0, "gerakan mouse");

nilai (objek)

nilai(objek) mengembalikan array yang berisi nilai semua properti objek yang ditentukan.