Halaman ini diterjemahkan oleh Cloud Translation API.

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:

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
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 Log Objek dan singkatan 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. Badge Logpoint oranye di baris 174

Saat berikutnya baris dieksekusi, DevTools 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 umum penting seperti ukuran font, warna font, rasio kontras, dan dimensi model kotak.

Memeriksa node

Gambar 6. Memeriksa node

Untuk memeriksa node:

Klik Inspect .

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 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 kumpulan aturan tengah tidak.

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

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 berapa banyak kode yang digunakan dibandingkan dengan berapa banyak kode yang dikirim.
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.

Menjelajahi Konsol dengan keyboard

Kini 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 sekali 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).

Memperluas stack trace yang diciutkan

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 yang memenuhi rekomendasi rasio kontras AAA. Rangkaian 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 mewakili warna yang memenuhi rekomendasi AA, tetapi tidak memenuhi rekomendasi AAA. Ketika sebuah warna memenuhi rekomendasi AAA, apa pun di sisi yang sama dari warna tersebut juga memenuhi rekomendasi tersebut. 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 mungkin karena 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.

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

Gambar 16. Menu Perintah
Ketik sensors, pilih Tampilkan Sensor, lalu tekan Enter. Tab Sensors 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 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.

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 Pelipatan kode.

Untuk melipat blok kode:

Arahkan mouse ke nomor baris tempat blok dimulai.
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 Jaringan 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 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.