Penggunaan profesional alat pengembang Chrome: 13 kiat

Penulis artikel, yang terjemahannya kami terbitkan hari ini, ingin berbagi kiat untuk bekerja secara profesional dengan alat pengembang browser. Yakni, tip ini ditujukan untuk programmer yang, karena alasan tertentu, memutuskan bahwa Google Chrome akan menjadi browser utama mereka.

Informasi Umum

Anda menggunakan alat pengembang Chrome untuk men-debug kode Anda.





Perintah untuk membuka alat pengembang



Terkadang Anda membuka panel Konsol untuk menggunakan kemampuan konsol guna memeriksa data yang dihasilkan program Anda. Terkadang Anda melihat panel Elemen untuk melihat CSS yang digunakan untuk mengatur gaya elemen DOM.





Panel Konsol



Tapi tahukah Anda alat pengembang Chrome dengan baik? Faktanya, ada banyak fitur canggih namun tidak terkenal yang dapat meningkatkan produktivitas Anda secara signifikan.



Di sini saya akan berbicara tentang fitur-fitur yang paling berguna yang saya harap akan berguna bagi Anda.

1. Item menu perintah Jalankan

Untuk memulai, saya ingin memberi tahu Anda secara singkat tentang item menu alat pengembang yang disebut perintah Jalankan. Item menu untuk Chrome ini seperti shell untuk Linux. Ini memungkinkan Anda memasukkan perintah untuk mengontrol Chrome.



Untuk masuk ke item menu ini, buka alat pengembang, setelah itu Anda dapat segera menggunakan pintasan keyboard yang sesuai:

• Di Windows - Ctrl + Shift + P.
• Di MacOS - Cmd + Shift + P.

Atau, Anda cukup mengeklik tiga titik di sisi kanan area tajuk alat pengembang dan memilih Jalankan perintah dari menu yang muncul.





Jalankan item menu perintah



Setelah itu, panel perintah akan terbuka, di mana Anda dapat menemukan banyak perintah yang memungkinkan Anda melakukan banyak hal menarik.





Panel Perintah



Mari kita bicara tentang beberapa perintah dari panel ini.

2. Mekanisme lanjutan untuk membuat tangkapan layar

Pengembang web terkadang perlu mengambil tangkapan layar dari sebagian layar. Saya yakin Anda sudah memiliki program yang sangat mudah untuk memecahkan masalah ini. Berikut beberapa tugas umum untuk mengambil tangkapan layar:

• Mengambil tangkapan layar dari seluruh halaman, bahkan bagian yang tidak terlihat di jendela browser.
• Tangkap salinan area layar yang dikhususkan untuk elemen DOM tertentu.

Ini adalah tugas umum, tetapi tidak mudah dilakukan dengan semua jenis perangkat lunak tangkapan layar. Untuk mengatasinya, kita dapat menggunakan kemampuan perintah menu perintah Jalankan yang dijelaskan di atas. Secara khusus, kita berbicara tentang perintah berikut:

• Screenshot Menangkap tangkapan layar ukuran penuh
• Screenshot Tangkap tangkapan layar node

▍ Contoh

Buka halaman, seperti bagian Medium dari konten JavaScript paling populer.



Sekarang buka bilah perintah dan pilih perintah di dalamnya Screenshot Capture full size screenshot.





Perintah untuk mengambil tangkapan layar dari seluruh halaman



Kami akan memiliki tangkapan layar dari seluruh halaman, yang akan masuk ke folder unduhan.





Tangkapan layar dari seluruh halaman



Seperti yang Anda lihat, gambarnya sangat tinggi. Saya telah menguranginya di sini, untuk kenyamanan. Faktanya, ini adalah gambar berkualitas besar.



Demikian pula, jika Anda perlu mengambil tangkapan layar dari elemen DOM, Anda dapat menggunakan program pihak ketiga, yang, bagaimanapun, tidak akan memungkinkan Anda untuk mendapatkan gambar yang persis sama dengan elemen yang diinginkan. Tim akan membantu kami menyelesaikan masalah iniScreenshot Capture node screenshot.



Mereka menggunakannya seperti ini: pertama, mereka memilih elemen yang diinginkan di panel Elemen, lalu menjalankan perintah.





Menangkap tangkapan layar dari area layar yang terkait dengan elemen DOM tertentu



Seperti inilah tampilan tangkapan layar saat diambil dalam gambar animasi sebelumnya.





Tangkapan layar elemen DOM

3. Mengacu pada hasil operasi terakhir di konsol

Konsol sering digunakan untuk men-debug kode. Bayangkan Anda perlu mempelajari cara membalikkan string menggunakan JavaScript. Anda mencari di Internet dan menemukan potongan kode ini:

'abcde'.split('').reverse().join('')

Anda mencoba menjalankan kode ini di konsol dan tampaknya berfungsi dengan benar.





Memeriksa kode di konsol



Jadi, kode ini "mengubah" garis. Namun, Anda bingung tentang cara kerjasplit(),reverse()danmetodejoin(). Anda tidak tahu persis apa yang mereka kerjakan pada tahap perantara "membalik" garis. Oleh karena itu, Anda memutuskan untuk menelusuri kode ini. Anda mulai dengan metode pertama, mendapatkan hasilnya, menjalankan metode kedua pada hasil ini, dan seterusnya.





Menjelajahi Kode



Setelah menyelesaikan eksperimen ini, sangat mungkin untuk memahami cara kerja bagian kode asli.



Tetapi bekerja dengan gaya ini melibatkan banyak tindakan yang tidak perlu. Anda bisa membuat kesalahan di sini, dan semuanya terlihat sangat berantakan. Untuk memperbaiki situasi ini, cukup diketahui bahwa di konsol alat pengembang Anda dapat menggunakan variabel "ajaib"$_yang memungkinkan Anda merujuk ke hasil operasi terakhir yang dilakukan.





Menggunakan $ _



Seperti yang Anda lihat,$_ini adalah variabel khusus, yang nilainya selalu sama dengan hasil dari operasi terakhir yang dilakukan di konsol. Variabel ini dapat membantu Anda dengan sangat baik saat men-debug kode Anda.





Contoh penggunaan $ _

4. Ulangi pengiriman permintaan XHR

Saat mengerjakan proyek front-end, sering kali perlu menggunakan XHR API untuk membuat permintaan ke backend untuk data. Bagaimana jika Anda perlu mengirim ulang permintaan XHR yang sudah dikirim?



Jika pengembang pemula memecahkan masalah ini, dia hanya akan menyegarkan halaman. Tetapi terus-menerus menyegarkan halaman untuk mengirim ulang permintaan bisa sangat melelahkan. Nyatanya, Anda dapat bekerja dengan kueri menggunakan alat panel Jaringan.





Perintah percobaan ulang permintaan XHR



Untuk menjalankan kembali permintaan XHR yang telah dikirim, lakukan sebagai berikut:

• Buka panel Jaringan.
• Klik pada tombol XHR.
• Panggil menu konteks permintaan untuk diulang.
• Pilih Replay XHR dari menu.

Berikut adalah contoh animasi dari langkah-langkah di atas.





Permintaan XHR coba lagi

5. Pemantauan pemuatan halaman

Mungkin diperlukan waktu lebih dari sepuluh detik untuk memuat halaman sepenuhnya, dari awal proses ini hingga akhir. Untuk mengetahui apa yang sebenarnya terjadi selama pemuatan halaman, Anda dapat mengatur pemantauan proses ini.



Di alat pengembang Chrome, Anda dapat mengambil tangkapan layar dari laman pada waktu pemuatan yang berbeda dengan menyetel tanda Tangkap tangkapan layar di panel Jaringan.





Tangkap bendera tangkapan layar dan pantau pemuatan halaman



Dengan mengeklik tangkapan layar, Anda dapat melihat permintaan yang dieksekusi pada saat yang sesuai. Representasi visual dari proses pemuatan halaman akan memberi Anda tingkat pemahaman yang lebih tinggi daripada sebelumnya tentang apa yang sebenarnya terjadi pada pemuatan halaman.





Analisis pemuatan halaman

6. Menyalin konten variabel JavaScript

Apakah mungkin untuk menyalin nilai variabel JavaScript untuk digunakan nanti dari nilai itu? Mungkin saja tugas seperti itu tampak mustahil bagi Anda, tetapi di konsol Chrome Anda dapat menggunakan perintah khusus copy()yang memungkinkan Anda menyalin konten variabel ke papan klip.





Menyalin Konten Variabel JS



Fungsi ini tidak tersedia dalam standar ECMAScript. Ini tersedia bagi kami berkat Chrome.

7. Menyalin gambar sebagai URL Data

Ada dua cara untuk bekerja dengan gambar yang ditampilkan di halaman web. Cara pertama adalah memuat gambar dari sumber eksternal. Yang kedua adalah mengkodekan gambar dalam bentuk yang disebut URL Data . Anda dapat membaca di MDN bahwa URL Data adalah URL dengan awalan: data. URL ini memungkinkan file kecil untuk disematkan langsung ke dalam dokumen. Mereka dulu disebut "URI Data" sampai WHATWG menghentikan nama itu.



Mengonversi gambar kecil sebagai URL Data dan menyematkannya secara langsung di kode halaman mengurangi jumlah permintaan HTTP yang perlu dibuat saat pemuatan halaman. Hasilnya, dapat mempercepat pemuatan halaman.



Bagaimana cara mengubah gambar menjadi URL Data menggunakan Chrome?



Di bawah ini adalah demonstrasi animasi dari proses ini.





Menyalin Gambar sebagai URL Data

8. Representasi yang nyaman dari array objek

Bayangkan kita memiliki array objek. Misalnya - seperti ini:

let users = [{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]

Mari kita tampilkan di konsol.





Array objek yang ditampilkan di konsol



Seperti yang Anda lihat, sangat tidak nyaman untuk melihatnya saat ditampilkan dalam formulir ini. Dan jika array seperti itu lebih panjang, dan elemen yang dikandungnya memiliki struktur yang lebih kompleks, maka akan lebih sulit untuk menghadapinya.



Beruntung bagi kami, Chrome memiliki fitur khusustable()yang memungkinkan Anda memformat array objek.





Array Berformat Objek



Fungsi ini seringkali sangat berguna.

9. Menarik objek di panel Elemen

Terkadang, saat menguji antarmuka, Anda perlu mengubah posisi beberapa elemen DOM halaman. Untuk melakukan ini, kita dapat menggunakan kemampuan panel Elemen, yaitu memindahkan elemen HTML apa pun di kode halaman.





Menyeret dan melepas elemen



Animasi di atas menunjukkan bagaimana saya menyeret elemen<div>di panel Elemen untuk mengubah posisi elemen itu di halaman web.

10. Mengacu pada item yang saat ini dipilih dari konsol

Mari kita bicara tentang variabel "ajaib" lain yang dapat digunakan di konsol. Ini adalah variabel $0. Ini memungkinkan akses dari konsol ke elemen yang disorot di panel Elemen.





Mengacu pada elemen dengan $ 0

11. Menjelajahi pseudo-class

Di MDN, Anda dapat mempelajari hal berikut tentang pseudo-class:



Pseudo-class menyediakan kemampuan untuk memberi gaya pada elemen tidak hanya berdasarkan hubungan di pohon DOM, tetapi juga berdasarkan faktor eksternal seperti riwayat kunjungan (misalnya: dikunjungi), status konten (seperti: diperiksa pada beberapa elemen bentuk) atau posisi kursor mouse (misalnya: hover menentukan apakah kursor mouse di atas suatu elemen).



Untuk sebuah elemen, Anda dapat memberikan gaya yang terkait dengan berbagai kelas semu. Untuk menguji gaya ini, pseudo-class dapat dimanipulasi langsung dari panel Elements.





Mengelola kelas semu

▍ Contoh

Ini kode untuk halaman web:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

Kita perlu memeriksa styling dari pseudo-class. Untuk melakukan ini, kita dapat menggunakan panel Elemen.





Menjelajahi gaya kelas semu

12. Elemen sembunyikan cepat

Saat men-debug gaya halaman, Anda sering kali perlu menyembunyikan sebuah elemen. Untuk melakukan ini secepat mungkin, cukup pilih elemen dan tekan salah satu tombol pada keyboard H.





Menyembunyikan elemen



dengan cepat Ini akan menambah gayavisibility: hidden !important;ke elemen yang sesuai.

13. Menyimpan referensi ke elemen DOM dalam variabel global sementara

Jika kita perlu cepat mendapatkan referensi ke elemen DOM di konsol, kita bisa melakukan urutan tindakan berikut:

• Pilih item.
• Klik kanan di atasnya untuk membuka menu konteks.
• Pilih Simpan sebagai perintah variabel global dari menu.

Menyimpan Referensi Elemen DOM sebagai Variabel Global Sementara Fitur



apa yang kurang diketahui dari alat pengembang Chrome yang Anda gunakan?