Yang Baru di DevTools (Chrome 73)

Kayce Basques

Berikut yang baru di DevTools di Chrome 73.

Versi video dari catatan rilis ini

Logpoints

Gunakan Titik Log untuk mencatat pesan ke Konsol tanpa membuat kode Anda berantakan dengan panggilan console.log().

Untuk menambahkan titik log:

1. Klik kanan nomor baris tempat Anda ingin menambahkan Logpoint.

   

   Gambar 1. Menambahkan Logpoint

2. Pilih Tambahkan titik log. Breakpoint Editor akan muncul.

   

   Gambar 2. Editor Titik Henti Sementara

3. Di Breakpoint Editor, masukkan ekspresi yang ingin Anda catat ke Konsol.

   

   Gambar 3. Mengetik ekspresi Logpoint

   Tips! Saat mencatat variabel (mis. TodoApp), gabungkan variabel dalam objek (mis. {TodoApp}) untuk mencatat nama dan nilainya di Konsol. Lihat Selalu Mencatat Objek dan Singkatan Nilai Properti Objek untuk mempelajari sintaksis ini lebih lanjut.

4. Tekan Enter atau klik di luar Editor Titik Break untuk menyimpan. Badge oranye di atas nomor baris menunjukkan Logpoint.

   

   Gambar 4. Badge Logpoint oranye di baris 174

Saat baris tersebut dijalankan lagi, DevTools akan mencatat hasil ekspresi Titik Log ke Konsol.

Gambar 5. Hasil ekspresi Logpoint di Konsol

Lihat masalah Chromium #700519 untuk melaporkan bug atau menyarankan peningkatan.

Tooltip mendetail dalam Mode Inspeksi

Saat memeriksa node, DevTools kini menampilkan tooltip yang diperluas yang berisi informasi penting umum seperti ukuran font, warna font, rasio kontras, dan dimensi model kotak.

Gambar 6. Memeriksa node

Untuk memeriksa node:

1. Klik Periksa .

   Tips! Arahkan kursor ke Periksa untuk melihat pintasan keyboard-nya.

2. Di area tampilan, arahkan kursor ke node.

Mengekspor data cakupan kode

Data cakupan kode kini dapat diekspor sebagai file JSON. JSON-nya akan terlihat seperti ini:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url adalah URL file CSS atau JavaScript yang dianalisis DevTools. ranges menjelaskan bagian kode yang digunakan. start adalah offset awal untuk rentang yang digunakan. end adalah offset akhir. text adalah teks lengkap file.

Pada contoh di atas, rentang 0 hingga 21 sesuai dengan body { margin: 1em; } dan rentang 45 hingga 67 sesuai dengan h1 { color: #317EFB; }. Dengan kata lain, set aturan pertama dan terakhir digunakan dan set aturan di tengah tidak digunakan.

Untuk menganalisis jumlah kode yang digunakan saat pemuatan halaman dan mengekspor data:

1. Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Perintah.

   

   Gambar 7. Menu Perintah

2. Mulai ketik coverage, pilih Tampilkan Cakupan, lalu tekan Enter.

   

   Gambar 8. Tampilkan Cakupan

   Tab Cakupan akan terbuka.

   

   Gambar 9. Tab Cakupan

3. Klik Muat ulang . DevTools memuat ulang halaman dan mencatat seberapa banyak kode yang digunakan dibandingkan dengan seberapa banyak kode yang dikirim.

4. Klik Ekspor untuk mengekspor data sebagai file JSON.

Cakupan kode juga tersedia di Puppeteer, alat otomatisasi browser yang dikelola oleh tim DevTools. Lihat Cakupan.

Lihat masalah Chromium #717195 untuk melaporkan bug atau menyarankan peningkatan.

Menavigasi Konsol dengan keyboard

Anda kini dapat menggunakan keyboard untuk menjelajahi Konsol. Berikut contohnya.

Menekan Shift+Tab akan memfokuskan pesan terakhir (atau hasil evaluasi ekspresi). Jika pesan berisi link, link terakhir akan ditandai terlebih dahulu. Menekan Enter akan membuka link di tab baru. Menekan tombol panah Kiri akan menandai seluruh pesan (lihat Gambar 13).

Gambar 11. Memfokuskan link

Menekan tombol panah Atas akan memfokuskan link berikutnya.

Gambar 12. Memfokuskan link lain

Menekan tombol panah Atas lagi akan memfokuskan seluruh pesan.

Gambar 13. Memfokuskan seluruh pesan

Menekan tombol panah Kanan akan meluaskan stack trace yang diciutkan (atau objek, array, dan sebagainya).

Gambar 14. Memperluas pelacakan tumpukan yang diciutkan

Menekan tombol panah Kiri akan menciutkan pesan atau hasil yang diperluas.

Lihat masalah Chromium #865674 untuk melaporkan bug atau menyarankan perbaikan.

Garis rasio kontras AAA di Pemilih Warna

Pemilih Warna kini menampilkan baris kedua untuk menunjukkan warna mana yang memenuhi rekomendasi rasio kontras AAA. Baris AA sudah ada sejak Chrome 65.

Gambar 15. Garis AA (atas) dan garis AAA (bawah)

Warna di antara 2 garis mewakili warna yang memenuhi rekomendasi AA, tetapi tidak memenuhi rekomendasi AAA. Jika suatu warna memenuhi rekomendasi AAA, semua warna di sisi yang sama dengan warna tersebut juga memenuhi rekomendasi. Misalnya, dalam Gambar 15, apa pun di bawah garis bawah adalah AAA, dan apa pun di atas garis atas bahkan tidak memenuhi rekomendasi AA.

Tips! Secara umum, Anda dapat meningkatkan keterbacaan halaman dengan menambah jumlah teks yang memenuhi rekomendasi AAA. Jika rekomendasi AAA tidak dapat dipenuhi karena alasan tertentu, coba penuhi rekomendasi AA.

Lihat Rasio kontras di Pemilih Warna untuk mempelajari cara mengakses fitur ini.

Lihat masalah Chromium #879856 untuk melaporkan bug atau menyarankan perbaikan.

Menyimpan penggantian geolokasi kustom

Tab Sensor kini memungkinkan Anda menyimpan penggantian geolokasi kustom.

1. Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Perintah.

   

   Gambar 16. Menu Perintah

2. Ketik sensors, pilih Show Sensors, lalu tekan Enter. Tab Sensor akan terbuka.

   

   Gambar 17. Tab Sensor

3. Di bagian Geolokasi, klik Kelola. Setelan > Geolokasi akan terbuka.

   

   Gambar 18. Tab Geolokasi di Setelan

4. Klik Tambahkan lokasi.

5. Masukkan nama lokasi, lintang, dan bujur, lalu klik Tambahkan.

   

   Gambar 19. Menambahkan geolokasi kustom

Lihat masalah Chromium #649657 untuk melaporkan bug atau menyarankan perbaikan.

Pengemasan kode

Panel Sources dan Network kini mendukung pelipatan kode.

Gambar 20. Baris 54 hingga 65 telah dilipat

Untuk mengaktifkan pemendekan kode:

1. Tekan F1 untuk membuka Setelan.
2. Di bagian Settings > Preferences > Sources, aktifkan Code folding.

Untuk melipat blok kode:

1. Arahkan mouse ke nomor baris tempat blok dimulai.
2. Klik Lipat .

Lihat masalah Chromium #328431 untuk melaporkan bug atau menyarankan perbaikan.

Tab Pesan

Tab Frame telah diganti namanya menjadi tab Pesan. Tab ini hanya tersedia di panel Network saat memeriksa koneksi web socket.

Gambar 21. Tab Pesan

Lihat masalah Chromium #802182 untuk melaporkan bug atau menyarankan peningkatan.

Download saluran pratinjau

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.