Yang Baru di DevTools (Chrome 73)

Berikut yang baru di DevTools pada Chrome 73.

Versi video catatan rilis ini

Logpoints

Gunakan Logpoint untuk mencatat pesan ke Konsol tanpa mengacaukan kode Anda dengan console.log() panggilan telepon.

Untuk menambahkan logpoint:

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

   

   Gambar 1. Menambahkan Logpoint

2. Pilih Add logpoint. Breakpoint Editor akan muncul.

   

   Gambar 2. Editor Titik henti

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

   

   Gambar 3. Mengetik ekspresi Logpoint

   Tips Saat logout dari variabel (misalnya, TodoApp), gabungkan variabel tersebut ke dalam objek (misalnya {TodoApp}) untuk logout dari 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 Breakpoint untuk menyimpan. Badge oranye di atas nomor baris mewakili Logpoint.

   

   Gambar 4. Badge Logpoint oranye di baris 174

Saat berikutnya baris dieksekusi, DevTools mencatat hasil ekspresi Logpoint ke Konsol Play.

Gambar 5. Hasil ekspresi Logpoint di Console

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

Tooltip mendetail dalam Mode Pemeriksaan

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

Gambar 6. Memeriksa node

Untuk memeriksa node:

1. Klik Inspect .

   Tips Arahkan kursor ke Inspect untuk melihat pintasan keyboard-nya.

2. Di area pandang, arahkan kursor ke node.

Mengekspor data cakupan kode

Data Cakupan kode kini dapat diekspor sebagai file JSON. JSON 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 dari 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 setara dengan h1 { color: #317EFB; }. Dengan kata lain, kumpulan aturan pertama dan terakhir digunakan dan yang tengah tidak.

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 Command.

   

   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 Reload . DevTools memuat ulang halaman dan mencatat berapa banyak kode yang digunakan dibandingkan dengan berapa banyak kode yang dikirim.

4. Klik Export untuk mengekspor data sebagai file JSON.

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

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

Menjelajahi Konsol dengan keyboard

Kini Anda dapat menggunakan keyboard untuk membuka Konsol. Berikut contohnya.

Menekan Shift+Tab akan memfokuskan pesan terakhir (atau hasil dari evaluasi ekspresi). Jika pesan berisi link, link terakhir akan ditandai terlebih dahulu. Penekanan Tekan Enter untuk membuka link di tab baru. Menekan tombol panah Kiri akan menyoroti pesan secara keseluruhan (lihat Gambar 13).

Gambar 11. Memfokuskan link

Menekan tombol panah Atas akan memfokuskan link berikutnya.

Gambar 12. Memfokuskan link lain

Menekan tombol panah Atas sekali lagi akan memfokuskan seluruh pesan.

Gambar 13. Memfokuskan seluruh pesan

Menekan tombol panah Kanan akan memperluas pelacakan tumpukan yang diciutkan (atau objek, array, dan sebagainya ).

Gambar 14. Memperluas stack trace yang diciutkan

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

Lihat Masalah Chromium #865674 untuk melaporkan bug atau menyarankan peningkatan.

Garis rasio kontras AAA di Pemilih Warna

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

Gambar 15. Baris AA (atas) dan baris AAA (bawah)

Warna di antara 2 garis mewakili warna yang memenuhi rekomendasi AA tetapi tidak memenuhi AAA rekomendasi. Ketika sebuah warna memenuhi rekomendasi AAA, apa pun di sisi yang sama dari warna itu juga memenuhi rekomendasi. Misalnya, pada Gambar 15, apa pun yang berada di bawah garis bawah adalah AAA, dan apa pun yang berada 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 untuk beberapa alasan, cobalah untuk setidaknya memenuhi rekomendasi AA.

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

Lihat Masalah Chromium #879856 untuk melaporkan bug atau menyarankan peningkatan.

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 Command.

   

   Gambar 16. Menu Perintah

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

   

   Gambar 17. Tab Sensor

3. Di bagian Geolocation, klik Manage. Setelan > Geolocations 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 peningkatan.

Pemadatan kode

Panel Sumber dan Jaringan sekarang mendukung pemendekan kode.

Gambar 20. Baris 54 hingga 65 telah dilipat

Untuk mengaktifkan pemendekan kode:

1. Tekan F1 untuk membuka Setelan.
2. Di bagian Setelan > Preferensi > Sources mengaktifkan 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 peningkatan.

Tab Pesan

Tab Frames telah diganti namanya menjadi tab Messages. Tab ini hanya tersedia di Panel Network saat memeriksa koneksi soket web.

Gambar 21. Tab Pesan

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

Mendownload 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

• Kirim saran atau masukan kepada kami melalui crbug.com.
• Laporkan masalah DevTools menggunakan Opsi lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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