Yang Baru di DevTools (Chrome 73)

Kayce Basques

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 panggilan console.log().

Untuk menambahkan logpoint:

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

    Menambahkan Logpoint

    Gambar 1. Menambahkan Logpoint

  2. Pilih Add logpoint. Editor Titik Henti Sementara akan muncul.

    Editor Titik Henti Sementara

    Gambar 2. Editor Titik Henti Sementara

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

    Mengetik ekspresi Logpoint

    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 ke Log dan Singkatan Nilai Properti Objek untuk mempelajari sintaksis ini lebih lanjut.

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

    Badge Logpoint oranye di baris 174

    Gambar 4. Badge Logpoint oranye di baris 174

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

Hasil ekspresi Logpoint di 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.

Memeriksa node

Gambar 6. Memeriksa node

Untuk memeriksa node:

  1. Klik Periksa Memeriksa node.

    Tips! Arahkan kursor ke Periksa untuk melihat pintasan keyboardnya.

  2. Di area pandang, arahkan kursor ke node.

Mengekspor data cakupan kode

Data Cakupan kode kini dapat diekspor sebagai file JSON. JSON-nya 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, kumpulan aturan pertama dan terakhir digunakan, dan kumpulan aturan 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 Command.

    Menu Perintah

    Gambar 7. Menu Perintah

  2. Mulai ketik coverage, pilih Show Coverage, lalu tekan Enter.

    Tampilkan Cakupan

    Gambar 8. Tampilkan Cakupan

    Tab Cakupan akan terbuka.

    Tab Cakupan

    Gambar 9. Tab Cakupan

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

  4. Klik Export 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.

Menjelajahi Konsol dengan keyboard

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

Menekan Shift+Tab akan memfokuskan pesan terakhir (atau hasil dari ekspresi yang dievaluasi). 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).

Memfokuskan link

Gambar 11. Memfokuskan link

Menekan tombol panah Atas akan memfokuskan link berikutnya.

Memfokuskan link lain

Gambar 12. Memfokuskan link lain

Menekan tombol panah Atas lagi akan memfokuskan seluruh pesan.

Memfokuskan seluruh pesan

Gambar 13. Memfokuskan seluruh pesan

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

Memperluas pelacakan tumpukan yang diciutkan

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

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 telah ada sejak Chrome 65.

Baris AA (atas) dan baris AAA (bawah)

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

Warna di antara 2 garis mewakili warna yang memenuhi rekomendasi AA, tetapi tidak memenuhi rekomendasi AAA. Jika warna memenuhi rekomendasi AAA, apa pun di sisi yang sama dengan warna tersebut juga memenuhi rekomendasi. Misalnya, pada Gambar 15 semua yang berada di bawah garis bawah adalah AAA, dan nilai 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 memenuhi rekomendasi AAA tidak memungkinkan karena beberapa alasan, coba 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 Perintah.

    Menu Perintah

    Gambar 16. Menu Perintah

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

    Tab Sensor

    Gambar 17. Tab Sensor

  3. Di bagian Geolocation, klik Manage. Setelan > Geolokasi akan terbuka.

    Tab Geolokasi di Setelan

    Gambar 18. Tab Geolokasi di Setelan

  4. Klik Tambahkan lokasi.

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

    Menambahkan geolokasi kustom

    Gambar 19. Menambahkan geolokasi kustom

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

Pengemasan kode

Panel Sumber dan Jaringan kini mendukung lipat kode.

Baris 54 hingga 65 telah diciutkan

Gambar 20. Baris 54 hingga 65 telah dilipat

Untuk mengaktifkan pengemasan kode:

  1. Tekan F1 untuk membuka Setelan.
  2. Di bagian Setelan > Preferensi > Sumber, aktifkan Pengemasan kode.

Untuk melipat blok kode:

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

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 Jaringan saat memeriksa koneksi web socket.

Tab Pesan

Gambar 21. Tab Pesan

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

Mendownload saluran pratinjau

Sebaiknya gunakan 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 yang mutakhir, dan membantu menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau apa pun yang berkaitan dengan DevTools.

Yang baru di DevTools

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