Yang Baru di DevTools (Chrome 81)

Dukungan Moto G4 dalam Mode Perangkat

Setelah mengaktifkan Toolbar Perangkat, Anda kini dapat menyimulasikan dimensi area pandang Moto G4 dari daftar Perangkat.

Menyimulasikan area pandang Moto G4

Klik Show Device Frame untuk menampilkan hardware Moto G4 di sekitar area pandang.

Menampilkan hardware Moto G4

Fitur terkait:

  • Buka Command Menu dan jalankan perintah Capture screenshot untuk mengambil screenshot viewport yang menyertakan hardware Moto G4 (setelah mengaktifkan Show Device Frame).
  • Batasi jaringan dan CPU untuk menyimulasikan kondisi penjelajahan web pengguna seluler dengan lebih akurat.

Masalah Chromium #924693

Pembaruan terkait cookie

Cookie yang diblokir di panel Cookie

Panel Cookie di panel Aplikasi kini mewarnai cookie yang diblokir dengan latar belakang kuning.

Cookie yang diblokir di panel Cookie pada panel Aplikasi

Lihat juga Men-debug alasan cookie diblokir untuk mempelajari cara mengakses UI serupa dari panel Jaringan.

Masalah Chromium #1030258

Prioritas cookie di panel Cookie

Tabel Cookie di panel Jaringan dan Aplikasi kini menyertakan kolom Prioritas.

Masalah Chromium #1026879

Mengedit semua nilai cookie

Semua sel di tabel Cookie kini dapat diedit, kecuali sel di kolom Ukuran karena kolom tersebut mewakili ukuran jaringan cookie, dalam byte. Lihat Kolom untuk penjelasan setiap kolom.

Mengedit nilai cookie

Menyalin sebagai pengambilan Node.js untuk menyertakan data cookie

Klik kanan permintaan jaringan, lalu pilih Copy > Copy as Node.js fetch untuk mendapatkan ekspresi fetch yang menyertakan data cookie.

Salin sebagai pengambilan Node.js

Masalah Chromium #1029826

Ikon manifes aplikasi web yang lebih akurat

Sebelumnya, panel Manifes di panel Aplikasi akan melakukan permintaannya sendiri untuk menampilkan ikon manifes aplikasi web. DevTools kini menampilkan ikon manifes yang sama persis dengan yang digunakan Chrome.

Ikon di panel Manifes

Masalah Chromium #985402

Arahkan kursor ke properti content CSS untuk melihat nilai yang tidak di-escape

Arahkan kursor ke nilai properti content untuk melihat versi nilai yang tidak di-escape.

Misalnya, pada demo ini, saat memeriksa elemen pseudo p::after, Anda akan melihat string yang di-escape di panel Gaya:

String yang di-escape

Saat mengarahkan kursor ke nilai content, Anda akan melihat nilai yang tidak di-escape:

Nilai yang tidak di-escape

Error peta sumber yang lebih mendetail di Konsol

Konsol kini memberikan detail selengkapnya tentang alasan peta sumber gagal dimuat atau diuraikan. Sebelumnya, error hanya memberikan error tanpa menjelaskan masalahnya.

Error pemuatan peta sumber di Konsol

Setelan untuk menonaktifkan scroll melewati akhir file

Buka Setelan, lalu nonaktifkan Preferensi > Sumber > Izinkan scroll melewati akhir file untuk menonaktifkan perilaku UI default yang memungkinkan Anda men-scroll jauh melewati akhir file di panel Sumber.

Berikut adalah GIF fitur tersebut.

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

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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