Yang Baru di DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
Jecelyn Yeen
Jecelyn Yeen

Mengganti header respons jaringan

Anda kini 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 oleh 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 Add override rule untuk mengganti beberapa permintaan menggunakan karakter pengganti (*).

Mengedit semua penggantian.

Masalah Chromium: 1288023.

Peningkatan proses debug Nuxt, Vite, dan Rollup

Untuk membantu Anda menemukan masalah dengan lebih cepat selama proses debug, stack trace yang ditingkatkan kini menyembunyikan frame yang berasal dari sumber yang dibuat oleh Nuxt 3.3 atau yang lebih baru. DevTools akan melewati frame tersebut:

  • Di rekaman aktivitas Console, di bagian link Show N more frames.
  • Di Sources > Call Stack, di bagian Kotak centang. Tampilkan frame yang diabaikan.

Stack trace sebelum dan sesudah mengaktifkan listingan pengabaian 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. Terima kasih atas upaya dan kerja sama Anda yang sangat penting bagi keberhasilan penerapan ini. Terima kasih sekali lagi atas kontribusi Anda.

Peningkatan CSS di Elemen > Gaya

Properti dan nilai CSS tidak valid

Untuk membantu Anda mendiagnosis masalah CSS lebih cepat, panel Gaya kini akan dicoret:

  • Seluruh deklarasi CSS (properti dan nilai) saat 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 berterima kasih kepada Yisi(一丝) karena telah memberikan peningkatan ini.

Link ke frame utama di properti singkat animasi

Properti CSS singkat animation kini berisi link ke @keyframes at-rules yang sesuai, sehingga Anda dapat membuka panel Gaya dengan lebih cepat.

Link ke frame utama di properti singkat animasi.

Masalah Chromium: 1420656.

Setelan Konsol baru: Autocomplete saat Enter

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

Secara default, untuk menerima saran pelengkapan otomatis, Anda dapat menekan Tab atau Arrow right. Untuk melengkapi otomatis dengan Enter, aktifkan Setelan. Setelan > Konsol > Kotak centang. Terima saran pelengkapan otomatis saat menekan tombol 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 Command menekankan file yang ditulis

Dialog buka cepat di Menu Perintah kini akan menampilkan file pihak ketiga yang dicantumkan dalam warna abu-abu untuk lebih menekankan pada file yang Anda tulis.

Skrip yang tercantum dalam daftar yang diabaikan dalam dialog buka cepat sebelum dan sesudah perubahan.

Masalah Chromium: 1424345.

Penghentian penggunaan JavaScript Profiler: Tahap dua

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

DevTools versi 113 memulai fase dua dari penghentian JavaScript Profiler 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 JavaScript Profiler.

Masalah Chromium: 1354548.

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

  • Memperbaiki bug yang menyebabkan presisi pencetakan di panel Sources menangani nama variabel dengan karakter Unicode secara salah (1425055).
  • Tab Issues menambahkan pesan baru untuk masalah Isi Otomatis terkait nilai HTML non-standar (1399414).

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.