API baris arahan untuk keseronokan dan keuntungan

API Perintah Alat Pemaju Pelayar: Alat yang berkuasa untuk meningkatkan kecekapan pembangunan dan penyahpepijatan

Artikel ini meneroka API baris perintah yang kuat dalam alat pemaju pelayar, yang menyediakan pelbagai alias, fungsi mudah dan pintasan untuk meningkatkan pengalaman pembangunan dan debug.

mata teras:

• API baris arahan membolehkan pemaju berinteraksi dengan laman web dalam konsol JavaScript.
• API adalah terhad kepada akses konsol JavaScript dan tidak boleh digunakan untuk skrip halaman, tetapi mudah untuk bereksperimen dengan coretan kod secara langsung dalam tetingkap penyemak imbas.
API menyediakan pelbagai fungsi untuk penjelajahan DOM, penjejakan objek, dan debugging konsol, termasuk
• ($ alias), document.querySelector (Senaraikan semua sifat objek), dir dan debug (Tetapkan titik putus dan pemantauan fungsi panggilan). monitor
Walaupun batasan (contohnya, tidak berkenaan dengan kaedah asli atau peristiwa tersuai), API baris arahan adalah alat yang berkuasa untuk pemaju, meningkatkan kecekapan dan memudahkan aliran kerja.
API baris perintah mengandungi satu siri alias, fungsi mudah dan pintasan yang membolehkan anda berinteraksi dengan laman web secara langsung dalam konsol JavaScript. Artikel ini akan memperkenalkan beberapa alat praktikal dan aplikasi mereka dalam meningkatkan pengalaman pembangunan dan debug.

Anda boleh mengakses konsol JavaScript penyemak imbas dalam pelbagai cara. Biasanya tekan kekunci

dan klik tab "Konsol".

Sebelum kita pergi lebih mendalam, mari kita mempunyai kuiz: Adakah anda tahu bagaimana untuk memvisualisasikan garis besar susun atur CSS dalam penyemak imbas anda? F12

Jawapan: Hanya 108 bait kod diperlukan.

sebagai Addy Osmani, pencipta kod ringkas ini, berkata, ini adalah "debugger berukuran twitter". Anda boleh mencubanya sekarang. Cukup salin baris kod itu dan tampalnya ke dalam konsol JavaScript alat pemaju kegemaran anda (seperti Devtools Chrome, Firefox's Firebug, Opera's Dragonfly, Inspektor Web Safari, dan juga alat F12 IE) (walaupun IE SAHAJA SUPPOST siri objek).

3

<code class="language-javascript">[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1</code>

Walaupun penjanaan nilai heksadesimal warna sangat mengagumkan, saya ingin membuat anda memberi perhatian lebih kepada yang istimewa. Ini adalah alias untuk

dan salah satu daripada banyak ciri pintar dalam API baris arahan. Mari kita lihat apa ciri lain API dapat menyediakan. $ console API baris arahan hanya terdapat dalam konsol JavaScript. Anda tidak boleh melayani API ke skrip pada halaman. Tetapi manfaatnya adalah bahawa ini memberi anda peluang untuk mencuba semua coretan kod untuk seluruh artikel ini secara langsung dalam tetingkap penyemak imbas. Cukup buka konsol dan percubaan JavaScript anda.

Eksplorasi Dom

Jika anda sudah biasa dengan perpustakaan jQuery, anda mungkin telah menebak apa yang dilakukan . Sebagai alias untuk

, ia mengembalikan rujukan kepada elemen DOM pertama yang sepadan dengan pemilih CSS yang diberikan. $$

mari kita lihat cara menggunakannya dalam permainan Cookie Clicker yang terkenal. Jika anda tidak pernah menemui permainan yang membosankan tetapi anehnya ketagihan: pada dasarnya anda klik pada kuki besar untuk menghasilkan lebih banyak barangan yang dibakar dan membeli pelbagai peralatan penaik. Kemudian peranti ini akan membuat lebih banyak kuki ... anda mendapatkannya.

Sekarang, tidakkah ia hebat jika kita boleh mempunyai konsol klik pada kuki dan memberi tangan dan tetikus rehat? Dengan hanya sedikit JavaScript dan rakan baru kami $, anda boleh melaksanakannya dengan garis mudah kod:

<code class="language-javascript">[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1</code>

Walaupun ini menarik, dalam beberapa kes fungsi pemilihan DOM API baris arahan juga mempunyai nilai sebenar. Anda telah belajar tentang kuasa $$ dalam pengenalan artikel ini. Sebagai alias untuk document.querySelectorAll, ia mengembalikan array yang mengandungi semua elemen DOM yang sepadan dengan pemilih CSS yang diberikan.

Sebagai contoh, kita boleh menggunakan fungsi ini untuk mengekstrak semua sumber imej laman web:

<code class="language-javascript">setInterval(function() { $("#bigCookie").click(); }, 10);</code>

3

Jika anda mencari elemen tertentu dan ingin menyemaknya, gunakan

. Sebagai contoh, akan membawa anda terus ke elemen dalam tab Elements alat pemaju. (Jika anda lulus fungsi JavaScript kepadanya,

juga berfungsi - ia akan membawa anda ke panel sumber.)

inspect Penjejakan objek inspect(document.body) body inspect Apabila saya cuba memahami warisan prototaip JavaScript, saya mempunyai pembantu kecil dalam konsol:

. Apabila kaedah ini dipanggil pada objek, ia memaparkan senarai semua sifat objek, termasuk contoh

dan

. Ini hanya salah satu daripada banyak adegan yang berguna. Saya dapati ia dengan mudah melihat sifat semua objek.

jika anda hanya berminat dengan sifat langsung objek (iaitu, sifat yang tidak diwarisi dari rantaian prototaip), anda boleh menggunakan

dan dir untuk mendapatkan array yang mengandungi nama dan nilai yang berkaitan , masing -masing. Cuba: prototype __proto__ dir Oleh kerana objek adalah struktur data yang paling asas dan di mana -mana dalam JavaScript, saya sering menggunakan fungsi ini untuk mengesan keadaan objek.

keys debugging konsol values

<code class="language-javascript">var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}</code>

Perkara pertama yang saya lakukan apabila ada masalah dengan laman web atau aplikasi saya adalah untuk memeriksa konsol untuk mesej ralat. Saya telah menghabiskan banyak masa pembangunan di konsol. Jika ya, anda harus teruja dengan fungsi seperti

dan

. Mereka hanya dua contoh alat debugging yang kuat yang disediakan oleh API baris arahan. (Malangnya, Inspektor Web Safari tidak menyokong kedua -dua fungsi.)

Ini menetapkan titik putus pada baris pertama fungsi YourLibrary.someFunction, dan debugger dibuka setiap kali fungsi dipanggil. Oleh kerana saya telah bekerja di konsol hampir sepanjang masa, ini jauh lebih cepat daripada melayari kod sumber dan menetapkan titik putus secara manual, terutama ketika berurusan dengan kod termampat. Untuk mematikan tingkah laku ini, cuma hubungi undebug ke fungsi yang sama.

Jika anda tidak mahu memanggil debugger, tetapi hanya diberitahu setiap kali anda memanggil fungsi tertentu dan parameter apa yang hendak digunakan, monitor adalah rakan anda.

kod berikut dalam konsol:

<code class="language-javascript">[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1</code>

Contohnya, sebaik sahaja anda memanggil

, Chrome akan memberitahu anda seperti ini: square

square(5); function square called with arguments: 5

Cukup panggil

ke fungsi yang sama untuk menghentikan pemantauan. Ambil perhatian bahawa unmonitor di Firebug hanya berfungsi dengan fungsi dalam kod halaman. monitor

API baris arahan juga menyediakan sokongan untuk debugging acara.

Mengembalikan objek yang mengandungi pelbagai jenis acara (seperti "klik" atau "mousedown") yang didaftarkan untuk objek yang ditentukan. getEventListeners

3 getEventListeners(document); Melangkah lebih jauh, anda juga boleh menggunakan

untuk mendapatkan maklum balas dalam konsol mengenai sama ada peristiwa yang ditentukan sebenarnya dicetuskan. Terus masukkan perkara berikut dalam konsol:

Selepas mengubah saiz tetingkap penyemak imbas, anda akan mendapat maklum balas dalam konsol bersama -sama dengan objek acara untuk pemeriksaan lanjut. Firebug menambah ciri tambahan yang bagus yang bahkan memberitahu anda elemen DOM yang keluar dari atau melimpah paparan semasa - yang sangat membantu untuk menyahpepijat susun atur responsif.

anda juga boleh menentukan pelbagai acara, dan juga pilih dari senarai jenis acara:

monitorEvents

monitorEvents(window, "resize");

Lihat rujukan API baris perintah pada pemaju Google untuk senarai penuh. Anda mungkin tidak terkejut pada masa itu bahawa anda boleh menggunakan

untuk melumpuhkan pemantauan acara.

faedah tambahan untuk pengguna Chrome

monitorEvents(window, ["scroll", "mousedown"]); monitorEvents(document, "key"); lambat laun, fungsi debugging dalam konsol akan mendedahkan beberapa kekurangan, termasuk:

unmonitorEvents

dan

jangan terpakai kepada kaedah asli

tidak berkenaan dengan peristiwa tersuai

Ciri -ciri yang hilang, seperti gangguan apabila sifat objek diakses

• debug bernasib baik, Amjad Masad menyelesaikan isu -isu ini dalam debug extension debug yang sangat baik (anda boleh mencari kod sumber di GitHub). monitor
• Bagaimana menggunakan API baris arahan? monitorEvents

API baris arahan menyediakan satu siri fungsi yang berguna dan mudah untuk penilaian sementara laman web dan aplikasi. Terutama dalam aliran kerja debugging saya, ia dengan cepat menggantikan keseluruhan console.log mimpi ngeri dan menjadi salah satu alat kegemaran saya.

Konsol JavaScript adalah alat yang berkuasa yang kini boleh diakses dalam setiap pelayar utama. Adakah anda menggunakannya? Jika ya, apakah petua dan petua kegemaran anda?

(bahagian Soalan Lazim ditinggalkan kerana ia mempunyai korelasi yang lemah dengan subjek dan terlalu panjang.)

Atas ialah kandungan terperinci API baris arahan untuk keseronokan dan keuntungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!