Yang Baru di DevTools (Chrome 81)

Kayce Basques
Kayce Basques

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

Menampilkan hardware Moto G4

Fitur terkait:

  • Buka Menu Perintah dan jalankan perintah Capture screenshot untuk mengambil screenshot area tampilan yang menyertakan hardware Moto G4 (setelah mengaktifkan Tampilkan Frame Perangkat).
  • Membatasi jaringan dan CPU untuk menyimulasikan penjelajahan web pengguna seluler secara lebih akurat kondisi tertentu.

Masalah Chromium #924693

Update terkait cookie

Cookie yang diblokir di panel Cookie

Panel Cookies di panel Application kini mewarnai cookie yang diblokir dengan latar belakang kuning.

Cookie yang diblokir di panel Cookies pada panel Application

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

Masalah Chromium #1030258

Prioritas cookie di panel Cookie

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

Masalah Chromium #1026879

Mengedit semua nilai cookie

Semua sel di tabel Cookie dapat diedit sekarang, kecuali sel di kolom Ukuran karena menunjukkan ukuran jaringan cookie, dalam byte. Lihat Kolom untuk mendapatkan penjelasan tentang setiap kolom.

Mengedit nilai cookie

Salin sebagai pengambilan Node.js untuk menyertakan data cookie

Klik kanan permintaan jaringan dan pilih Salin > Salin sebagai pengambilan Node.js untuk mendapatkan fetch yang menyertakan data cookie.

Salin sebagai pengambilan Node.js

Masalah Chromium #1029826

Ikon manifes aplikasi web yang lebih akurat

Sebelumnya, panel {i>Manifest<i} di panel {i>Application<i} 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 Manifest

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 semu p::after, Anda akan melihat elemen escape {i>string<i} di panel Styles:

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

Console sekarang memberikan detail selengkapnya tentang mengapa peta sumber gagal dimuat atau diurai. Sebelumnya hanya memberikan kesalahan tanpa menjelaskan masalahnya.

Terjadi error saat memuat peta sumber di Konsol

Setelan untuk menonaktifkan scrolling melewati akhir file

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

Berikut GIF fitur.

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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri 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.