🏂 🌘 👩🏿‍🍳 Fitur konsol Chrome yang mungkin belum pernah Anda gunakan 👛 👨🏻‍🏫 👸🏽

Konsol Alat Pengembang Chrome mungkin salah satu alat peramban khusus yang paling banyak digunakan dan paling berguna. Konsol memberi programmer banyak fitur menarik. Ini membantu dalam debugging, profil, dan pemantauan kode halaman. Materi yang kami terjemahkan hari ini didedikasikan untuk memberi tahu Anda tentang beberapa fitur dari konsol Chrome yang tidak dikenal secara luas seperti yang seharusnya.

Fungsi monitor

Fungsi ini monitordigunakan untuk mengatur pemantauan fungsi lainnya. Secara khusus, ini memungkinkan Anda untuk mengetahui kapan fungsi tertentu dipanggil, dan dengan parameter apa itu dipanggil. Pertimbangkan sebuah contoh (kodenya dimasukkan di konsol Chrome):

function traceFunc (arg) { }
monitor(traceFunc)

Fungsi traceFuncdilewatkan ke fungsi monitorsebagai argumen. Sekarang, ketika fungsi traceFuncdipanggil, kami akan menerima pemberitahuan tentang ini (sekali lagi, di konsol):

traceFunc(90)
function traceFunc was called with arguments: 90

Menggunakan fungsi monitor

Fungsi unmonitor

Fungsi ini unmonitormemungkinkan Anda untuk menonaktifkan pemantauan fungsi yang sebelumnya dipantau menggunakan fungsi monitor. Untuk menghentikan pemantauan fungsi traceFunc, kami menggunakan konstruksi berikut:

unmonitor(traceFunc)

Jika Anda menelepon setelah ini traceFunc, maka tidak ada pemberitahuan akan ditampilkan di konsol.

traceFunc(90)

Memanggil fungsi yang pemantauannya dinonaktifkan tidak menghasilkan informasi tentang panggilan ini ke konsol

Fungsi MonitorEvents

Skema untuk menggunakan fungsi monitorEventsterlihat seperti ini:

monitorEvents(object,[,events])

Fungsi ini memungkinkan Anda untuk melacak kejadian peristiwa objek dan menampilkan informasi tentang peristiwa ini di konsol.

Misalkan ada tombol pada halaman yang dijelaskan oleh kode berikut:

<button id="button">Button</button>

Mari kita mulai melacak peristiwa clicktombol ini:

monitorEvents(button, "click")

Jika setelah memulai pengamatan suatu peristiwa, clickklik tombol - informasi tentang acara tersebut akan ditampilkan di konsol.

Tombol dan mulai memantau kejadiannya klik Anda

dapat memantau beberapa acara dengan melewatkanmonitorEventsarray sebagaifungsiargumen kedua:

monitorEvents(button, ["click", "mouseover"])

Sekarang di bawah pengamatan adalah peristiwa clickdan mouseover. Akibatnya, konsol menerima pesan tentang mengklik tombol, dan itu ditahan di atas mouse.

Memantau peristiwa tombol klik dan mouseover

Anda dapat mengatur pemantauan kelompok acara:

monitorEvents(button, ["click", "mouse"])

String mouseadalah pengidentifikasi universal untuk sekelompok acara yang terkait dengan mouse. Misalnya - mouseover, mousemove, mouseout. Seperti dalam hal berlangganan acara tertentu, berlangganan ke pengenal acara universal akan menyebabkan penerbitan pemberitahuan ketika peristiwa tersebut terjadi.

Tombol peristiwa pemantauan terkait dengan mengkliknya dan dengan mouse

Tentu saja, fungsi inimonitorEventsberlaku untuk objek lain, dan bukan hanya tombol. Hal yang sama berlaku untuk acara yang dapat ditonton dengannya. Ini bukan hanyaclickacara mouse.

Fungsi UnmonitorEvents

Fungsi ini unmonitorEventsmemungkinkan Anda untuk membatalkan pemantauan peristiwa objek yang dimulai oleh fungsi monitorEvents.

Misalkan kita memutuskan untuk melacak klik tombol:

monitorEvents(button, "click")

Akibatnya, ketika tombol diklik, informasi tentang peristiwa ini sampai ke konsol. Untuk menghentikan pemantauan, kami membutuhkan desain ini:

unmonitorEvents(button, "click")

Sekarang sistem berhenti memonitor acara clicktombol.

Setelah menolak untuk memantau acara klik, laporan tentang klik pada tombol berhenti untuk sampai ke konsol

$ _ Konstruksi

Desainnya $_memungkinkan Anda untuk mengakses hasil dari ekspresi terakhir yang dieksekusi di konsol.

Misalkan kita memasukkan ekspresi di konsol 2 + 2dan menjalankannya. Itu memberi kami 4.

Kemudian kami memasuki dan mengeksekusi ekspresi 3*2. Itu memberi kami 6.

Ternyata kami melakukan dua ekspresi, yang terbaru adalah 3*2. Jika sekarang masuk ke konsol $_dan klik Enter- hasil dari ekspresi ditampilkan 3*2, yaitu - 6.

Menggunakan konstruk $ _

Fungsi salin

Fungsi ini copymemungkinkan Anda untuk menyalin data yang ditransfer ke clipboard.

Mari kita jalankan, misalnya, perintah berikut:

copy("nnamdi")

Ini akan menyalin garis ke clipboard nnamdi. Untuk memeriksa ini, jalankan perintah di atas di konsol, dan kemudian coba tempelkan apa yang ada di clipboard ke bilah alamat browser. Anda harus mendapatkan sesuatu yang menyerupai gambar berikut.

Perangkat lunak menyalin data ke clipboard

Fungsi yang jelas

Fungsi ini clearmemungkinkan Anda untuk menghapus riwayat eksekusi perintah di konsol. Fungsi ini berguna jika konsol penuh dengan berbagai bahan yang ditampilkan di dalamnya, dan Anda ingin menghapus semua yang ditampilkan di dalamnya.

Fungsi tombol

Fungsi keys(object), seperti metode Object.keys, mengembalikan array kunci properti objek:

const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)

Menggunakan fungsi tombol

Fungsi nilai

Fungsi valuesini mirip dengan suatu metode Object.values. Ini mengembalikan array nilai properti objek.

const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)

Menggunakan fungsi nilai

Fungsi GetEventListeners

Fungsi getEventListenersmengembalikan informasi tentang peristiwa yang terdaftar untuk objek. Misalnya, jika Anda mendaftarkan acara tertentu untuk suatu tombol, fungsi yang getEventListenersditeruskan ke tombol ini akan mengembalikan objek yang berisi, dalam bentuk array, deskripsi peristiwa tombol.

Misalkan halaman memiliki kode ini:

<button id="button" 
    onclick="clickHandler()" 
    onmousedown="mousedownHandler()" 
    onmouseover="mouseoverHandler()">
        Button
</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

Kode ini menjelaskan tombol dan tiga peristiwa: click, onmousedown, dan onmouseover. Acara ditugaskan penangan clickHandler, mousedownHandlerdan mouseoverHandler.

Panggil perintah berikut di konsol:

getEventListeners(button)

Informasi tentang penangan peristiwa tombol

Suatu objek yang dikeluarkan setelah perintah dijalankangetEventListeners(button)memiliki properticlick,mousedowndanmouseover, yang namanya sesuai dengan nama peristiwa yang penangannya ditugaskan ke tombol. Properti berisi array objek yang berisi informasi terperinci tentang peristiwa.

Fungsi $

Fungsi $mengembalikan elemen DOM pertama yang cocok dengan pemilih yang diteruskan ke elemen tersebut. Diagram panggilan fungsi terlihat seperti ini:

$(elementName, [,node])

Misalkan halaman memiliki kode berikut:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

Kode ini menjelaskan empat tombol.

Mari kita jalankan perintah berikut:

$("button")

Berikut ini menunjukkan apa yang masuk ke konsol setelah eksekusi.

Hasil dari perintah $ ("tombol") .

Seperti yang Anda lihat, perintah mengembalikan tombolButton1. Tombol ini adalah elemen pertamabuttondalam dokumen. Setelah kita memiliki simpul DOM elemen, kita dapat merujuk ke properti dan metodenya.

Misalnya, untuk mengetahui pengidentifikasi tombol, Anda dapat menggunakan konstruksi ini:

$("button").id

Klarifikasi pengidentifikasi tombol

Dengan menggunakan fungsi ini$, Anda dapat menentukan simpul DOM, elemen pertama yang kami minati.

Misalkan tombolButton2,Button3danButton4dari contoh sebelumnya ditempatkan di elemen<div>:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

Untuk memilih tombol pertama dari yang bersarang <div>, Anda dapat menggunakan perintah berikut:

$("button", document.querySelector("div"))

Mengakses elemen yang bersarang di elemen lain

Seperti yang Anda lihat, itu sekarang$mengembalikan tombolButton2, karena ini adalah elemen pertama yangbuttonbersarang di elemen<div>

Fungsi $$

Fungsi $$kerjanya sama dengan fungsi di atas $. Tetapi mengembalikan semua elemen yang cocok. Disebut seperti ini:

$$(element, [,node])

Misalkan ada empat tombol pada halaman, seperti pada contoh sebelumnya.

Panggil perintah berikut:

$$("button")

Menggunakan fungsi $$

Setelah panggilan$$, seperti yang terlihat pada gambar sebelumnya, kami memiliki berbagai elemenbutton.

Elemen juga dapat dipilih dari yang ditentukan saat$$simpul DOMdipanggil. Misalnya, jika sebuah halaman memiliki beberapa tombol yang disertakan<div>, kami dapat, untuk memilih semua tombol ini, gunakan desain ini:

$$("button", document.querySelector("div"))

Menggunakan fungsi $$ untuk memilih item yang bersarang di item lain

Ringkasan

Konsol Chrome adalah alat yang berguna. Ketika versi baru Chrome tersedia, kemampuan konsolnya berkembang. Karena itu, berguna untuk mencari di sini secara berkala untuk mencari sesuatu yang baru dan menarik.

Pembaca yang budiman! Alat konsol Chrome apa yang paling sering Anda gunakan?

Fitur konsol Chrome yang mungkin belum pernah Anda gunakan