Yang Baru di DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Mengganti header respons jaringan

Sekarang Anda dapat mengganti header respons di panel Jaringan. Sebelumnya, Anda memerlukan akses ke server web untuk bereksperimen dengan header respons HTTP.

Dengan penggantian header respons, Anda dapat membuat prototipe perbaikan secara lokal untuk berbagai header, termasuk, tetapi tidak terbatas pada:

Untuk mengganti header, buka Jaringan > Header > Header Respons, arahkan kursor ke nilai header, klik Edit., lalu edit.

Error CORS diperbaiki dengan penggantian header.

Anda juga dapat menambahkan header kustom.

Menambahkan header kustom.

Untuk mengedit semua penggantian di satu tempat, edit file .headers di Sumber > Penggantian. Di sana, Anda juga dapat mengklik Tambahkan aturan penggantian untuk mengganti beberapa permintaan menggunakan karakter pengganti (*).

Mengedit semua penggantian.

Masalah Chromium: 1288023.

Peningkatan proses debug Nuxt, Vite, dan Rollup

Untuk membantu Anda mengidentifikasi masalah dengan lebih cepat selama proses debug, pelacakan tumpukan yang ditingkatkan kini menyembunyikan frame yang berasal dari sumber yang dihasilkan oleh Nuxt 3.3 atau yang lebih baru. DevTools akan melewati frame tersebut:

  • Di rekaman aktivitas Konsol, di bagian link Tampilkan N frame lainnya.
  • Di Sources > Call Stack, di bagian Kotak centang. Show ignore-listed frames.

Stack trace sebelum dan sesudah mengaktifkan daftar abaikan pihak ketiga.

Untuk menghadirkan peningkatan ini, tim DevTools, Nuxt, Vite, dan Rollup berkolaborasi untuk mengadopsi ekstensi peta sumber x_google_ignoreList:

Tim DevTools ingin mengucapkan terima kasih kepada tim Nuxt, Vite, dan Rollup karena telah mewujudkan hal ini. Kami menghargai upaya dan kolaborasi Anda, yang sangat penting untuk keberhasilan penerapan ini. Sekali lagi, terima kasih atas kontribusi Anda.

Peningkatan CSS di Elemen > Gaya

Properti dan nilai CSS tidak valid

Untuk membantu Anda mendiagnosis masalah CSS dengan lebih cepat, panel Gaya kini mencoret:

  • Seluruh deklarasi CSS (dan nilai properti) jika properti CSS tidak valid.
  • Hanya nilai saat properti CSS valid, tetapi nilainya tidak valid.

Nama properti tidak valid dan nilai properti tidak valid.

Tim DevTools ingin mengucapkan terima kasih kepada Yisi(一丝) karena telah melakukan peningkatan ini.

Link ke keyframe di properti singkatan animasi

Properti CSS singkatan animation kini berisi link ke aturan at @keyframes yang sesuai, sehingga Anda dapat menavigasi panel Gaya dengan lebih cepat.

Menautkan ke keyframe di properti singkatan animasi.

Masalah Chromium: 1420656.

Setelan Konsol baru: Pelengkapan otomatis saat menekan tombol Enter

Mulai dari versi sebelumnya (112), Anda dapat mengonfigurasi Konsol DevTools untuk menerapkan saran pelengkapan otomatis saat menekan Enter.

Secara default, untuk menerima saran pelengkapan otomatis, Anda dapat menekan Tab atau Arrow right. Untuk juga menyelesaikan otomatis dengan Enter, aktifkan Setelan. Setelan > Konsol > Kotak centang. Terima saran pelengkapan otomatis saat menekan Enter.

Kotak centang yang sesuai di Setelan.

Selain itu, teks setelan lain kini lebih mudah digunakan: Kotak centang. Perlakukan evaluasi kode sebagai tindakan pengguna.

Masalah Chromium: 1276960.

Menu Perintah menekankan file yang ditulis

Dialog buka cepat di Menu Perintah kini membuat file pihak ketiga yang dimasukkan dalam daftar abaikan berwarna abu-abu untuk lebih menekankan file yang Anda tulis.

Skrip yang dihapus dari daftar yang diabaikan di dialog buka cepat sebelum dan sesudah perubahan.

Masalah Chromium: 1424345.

Penghentian penggunaan Profiler JavaScript: Tahap kedua

Mulai Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JavaScript Profiler dan meminta developer Node.js dan Deno menggunakan panel Performa untuk membuat profil performa CPU JavaScript.

DevTools versi 113 memulai fase kedua dari penghentian Profiler JavaScript empat fase. Selama fase ini, Anda masih dapat membuka panel, tetapi UI-nya tidak lagi tersedia.

Untuk membuat profil performa CPU, klik Buka panel Performa.

Penghentian penggunaan Profiler JavaScript.

Masalah Chromium: 1354548.

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Memperbaiki bug yang menyebabkan pencetakan yang rapi di panel Sumber menangani nama variabel dengan karakter Unicode secara tidak benar (1425055).
  • Tab Masalah menambahkan pesan baru untuk masalah Isi Otomatis terkait nilai HTML non-standar (1399414).

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

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.