Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 73)

Kayce Basques

Inilah yang baru pada DevTools di 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:

Klik kanan nomor baris tempat Anda ingin menambahkan Logpoint.

Gambar 1. Menambahkan Logpoint
Pilih Add logpoint. Breakpoint Editor akan muncul.

Gambar 2. Editor Titik Henti Sementara
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 dalam objek (misalnya, {TodoApp}) untuk logout dari nama dan nilainya di Konsol. Lihat Selalu Mencatat Objek dan Singkat Nilai Properti Objek untuk mempelajari sintaksis ini lebih lanjut.
Tekan Enter atau klik di luar Editor Breakpoint untuk menyimpan. Badge oranye di bagian atas nomor baris mewakili Logpoint.

Gambar 4. Lencana Logpoint oranye di baris 174

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

Hasil ekspresi Logpoint di Console

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 yang umumnya penting seperti ukuran font, warna font, rasio kontras, dan dimensi model kotak.

Memeriksa node

Gambar 6. Memeriksa node

Untuk memeriksa node:

Klik Periksa .

Tips! Arahkan kursor ke Inspect untuk melihat pintasan keyboard-nya.
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 kode yang digunakan. start adalah offset awal untuk rentang yang digunakan. end adalah offset akhir. text adalah teks lengkap dari 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 sedangkan yang di tengah tidak.

Untuk menganalisis berapa banyak kode yang digunakan saat pemuatan halaman dan mengekspor datanya:

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

Gambar 7. Menu Perintah
Mulai ketik coverage, pilih Tampilkan Cakupan, lalu tekan Enter.

Gambar 8. Tampilkan Cakupan

Tab Cakupan akan terbuka.

Gambar 9. Tab Cakupan
Klik Reload . DevTools memuat ulang halaman dan mencatat jumlah kode yang digunakan dibandingkan dengan jumlah kode yang dikirimkan.
Klik Export 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

Sekarang Anda dapat menggunakan keyboard untuk membuka 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

Gamabar 13. Memfokuskan seluruh pesan

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

Meluaskan stack trace yang diciutkan

Gambar 14. Meluaskan stack trace yang diciutkan

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

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. Saluran AA sudah 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 merepresentasikan warna yang memenuhi rekomendasi AA, tetapi tidak memenuhi rekomendasi AAA. Jika warna memenuhi rekomendasi AAA, apa pun dari sisi yang sama dari warna tersebut juga akan memenuhi rekomendasi. Misalnya, dalam Gambar 15, elemen yang berada di bawah garis bawah adalah AAA, dan semua 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 karena alasan tertentu, 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 Sensors kini memungkinkan Anda menyimpan penggantian geolokasi kustom.

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

Gambar 16. Menu Perintah
Ketik sensors, pilih Show Sensors, lalu tekan Enter. Tab Sensor akan terbuka.

Gambar 17. Tab Sensor
Di bagian Geolocation klik Manage. Setelan > Geolokasi akan terbuka.

Gambar 18. Tab Geolokasi di Setelan
Klik Tambahkan lokasi.
Masukkan nama lokasi, lintang, dan bujur, lalu klik Add.

Gambar 19. Menambahkan geolokasi kustom

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

Penggabungan kode

Panel Sources dan Network sekarang mendukung pemendekan kode.

Baris 54 hingga 65 telah dilipat

Gambar 20. Baris 54 hingga 65 telah dilipat

Untuk mengaktifkan pemendekan kode:

Tekan F1 untuk membuka Setelan.
Di bagian Setelan > Preferensi > Sumber, aktifkan Pemendekan kode.

Untuk melipat blok kode:

Arahkan kursor ke nomor garis tempat blok dimulai.
Klik Lipat .

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

Tab pesan

Nama tab Frames telah diganti menjadi tab Message. Tab ini hanya tersedia di panel Network saat memeriksa koneksi soket web.

Tab Pesan

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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.