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 tampilan Moto G4 dari daftar Perangkat.

Mensimulasikan area tampilan Moto G4

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

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 secara lebih akurat.

Masalah Chromium #924693

Pembaruan terkait cookie

Cookie yang diblokir di panel Cookie

Panel Cookies di panel Aplikasi 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 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 dalam tabel Cookie kini dapat diedit, kecuali sel dalam kolom Ukuran karena kolom tersebut mewakili ukuran jaringan cookie, dalam byte. Lihat Kolom untuk penjelasan setiap kolom.

Mengedit nilai cookie

Salin 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 CSS content untuk melihat nilai yang tidak di-escape

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

Misalnya, pada demo ini, saat Anda memeriksa elemen semu p::after, Anda akan melihat string yang di-escape 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

Konsol kini memberikan detail lebih lanjut tentang alasan peta sumber gagal dimuat atau diuraikan. Sebelumnya, error hanya diberikan tanpa menjelaskan apa yang salah.

Error pemuatan peta sumber di Konsol

Setelan untuk menonaktifkan scrolling melewati akhir file

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

Berikut GIF fitur tersebut.

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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