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 Network. 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 kualitas 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 melewati frame tersebut:

  • Dalam 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 setelah mengaktifkan daftar pengecualian 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 yang telah memungkinkan hal ini. Kami menghargai upaya dan kolaborasi Anda, yang sangat penting bagi 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 (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 mengucapkan terima kasih kepada Yisi(一丝) atas peluncuran peningkatan ini.

Menautkan ke frame utama dalam properti singkat animasi

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

Menautkan ke frame utama dalam properti singkat 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 Anda menekan Enter.

Secara default, untuk menerima saran pelengkapan otomatis, Anda dapat menekan Tab atau Arrow right. Untuk melengkapi otomatis dengan Enter, aktifkan Setelan. Settings > Console > Kotak centang. Accept autocomplete suggestion on Enter.

Kotak centang yang sesuai di Setelan.

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

Masalah Chromium: 1276960.

Menu Perintah menekankan file yang dibuat

Dialog buka cepat di Menu Perintah kini mengabui file pihak ketiga yang masuk dalam daftar yang diabaikan untuk lebih menekankan file yang Anda buat.

Skrip yang diabaikan dalam dialog buka cepat sebelum dan setelah 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 Performance untuk membuat profil performa CPU JavaScript.

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

Untuk memprofilkan performa CPU, klik Buka panel Performa.

Penghentian penggunaan JavaScript Profiler.

Masalah Chromium: 1354548.

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • Memperbaiki bug yang menyebabkan pencetakan cantik 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

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.