Mengganti header respons HTTP dan konten web secara lokal

Sofia Emelianova

Dengan penggantian lokal, Anda dapat membuka blokir alur kerja dengan membuat prototipe dan menguji perubahan serta perbaikan tanpa menunggu backend, pihak ketiga, atau API mendukungnya.

Gunakan penggantian lokal untuk meniru resource jarak jauh meskipun Anda tidak memiliki akses ke resource tersebut. Anda dapat membuat respons tiruan untuk permintaan dan berbagai file, misalnya, header respons HTTP dan konten web, termasuk permintaan XHR dan pengambilan data.

Misalnya, penggantian lokal dapat membantu dalam kasus penggunaan berikut:

• Memperbaiki API tiruan dan API pengujian sebelum benar-benar masuk ke produksi.
• Buat prototipe desain UI baru jika Anda sudah mengetahui struktur data yang akan digunakan backend.
• Uji perbaikan performa, misalnya, menghilangkan CLS, untuk memastikan sebelumnya bahwa perbaikan tersebut signifikan.

Catatan: Tonton video di atas untuk mempelajari lebih lanjut kasus penggunaan.

Penggantian lokal juga memungkinkan Anda menyimpan perubahan yang dibuat di DevTools di seluruh pemuatan halaman.

Cara kerjanya

• Saat Anda membuat perubahan di DevTools, DevTools akan menyimpan salinan file yang diubah ke folder yang Anda tentukan.
• Saat Anda memuat ulang halaman, DevTools akan menyajikan file lokal yang telah diubah, bukan resource jaringan.

Catatan: Penggantian lokal otomatis menonaktifkan cache.

Anda juga dapat menyimpan perubahan langsung ke file sumber. Lihat Mengedit dan menyimpan file dengan Ruang Kerja.

Batasan

Penggantian lokal berfungsi untuk header respons jaringan dan untuk sebagian besar jenis file, termasuk permintaan XHR dan pengambilan, dengan beberapa pengecualian:

• Cache dinonaktifkan saat Penggantian lokal diaktifkan.
• DevTools tidak menyimpan perubahan yang dibuat di hierarki DOM pada panel Elements.
• Jika Anda mengedit CSS di panel Styles, dan sumber CSS tersebut adalah file HTML, DevTools tidak akan menyimpan perubahan.

Sebagai gantinya, Anda dapat mengedit file HTML di panel Sumber.

Menyiapkan penggantian lokal

Anda dapat langsung mengganti konten web atau header respons di panel Jaringan:

1. Buka DevTools, buka panel Network, klik kanan permintaan yang ingin Anda ganti, pilih Override headers atau Override content dari menu drop-down.
2. Jika Anda belum menyiapkan penggantian lokal, di panel tindakan di bagian atas, DevTools akan meminta Anda untuk:
   1. Pilih folder untuk menyimpan file pengganti.
   2. Klik Izinkan untuk memberikan hak akses DevTools ke sana.
3. Jika Anda telah menyiapkan penggantian lokal tetapi menonaktifkannya, DevTools akan mengaktifkannya secara otomatis.

4. Setelah penggantian lokal disiapkan dan diaktifkan, bergantung pada apa yang akan Anda ganti, DevTools akan mengarahkan Anda ke:

   • Panel Sumber untuk memungkinkan Anda membuat perubahan pada konten web.
   • Editor di Network > Headers > Response Headers memungkinkan Anda membuat perubahan pada header respons.

Untuk menonaktifkan sementara penggantian lokal atau menghapus semua file penggantian, buka Sumber > Penggantian, lalu hapus centang pada kotak Aktifkan Penggantian Lokal atau klik Hapus.

Untuk menghapus satu file penggantian atau semua penggantian dalam folder, klik kanan file atau folder di Sources > Overrides, pilih Delete, lalu klik OK dalam dialog. Tindakan ini tidak dapat diurungkan dan Anda harus membuat ulang penggantian yang dihapus secara manual.

Untuk melihat semua penggantian dengan cepat, di panel Network, klik kanan permintaan, lalu pilih Show all overrides. DevTools akan mengarahkan Anda ke Sources > Overrides.

Mengganti konten web

Untuk mengganti konten web:

1. Menyiapkan penggantian lokal.
2. Buat perubahan pada file dan simpan di DevTools.

Catatan: Anda tidak dapat mengganti file source-mapped. Jika Anda mengklik kanan permintaan di panel Network dan memilih Override content, DevTools akan menampilkan dialog yang mengarahkan Anda ke file sumber asli.

Misalnya, Anda dapat mengedit file di Sumber atau CSS di Elemen > Gaya, kecuali jika CSS berada di file HTML.

DevTools menyimpan file yang diubah, mencantumkannya di Sources > Overrides, dan menampilkan ikon di samping file yang diganti di panel dan tab yang relevan: Elements > Styles, Network, dan Sources > Overrides.

Selain itu, panel Network menampilkan ikon titik ungu dengan tooltip di samping tab Response dari permintaan dengan konten web yang diganti.

Mengganti permintaan XHR atau pengambilan untuk meniru resource jarak jauh

Dengan penggantian lokal, Anda tidak memerlukan akses ke backend dan tidak perlu menunggu hingga backend mendukung perubahan Anda. Buat tiruan dan lakukan eksperimen dengan cepat:

1. Menyiapkan penggantian lokal.
2. Di Network, filter permintaan XHR/fetch, temukan permintaan yang Anda butuhkan, klik kanan, lalu pilih Override content.
3. Buat perubahan pada data yang diambil dan simpan file.
4. Muat ulang halaman dan amati perubahan yang diterapkan.

Untuk mempelajari alur kerja ini, tonton video berikut:

Melacak perubahan lokal

Anda dapat melacak semua perubahan yang Anda lakukan pada konten web di satu tempat—tab panel Perubahan.

Selain itu, di Sources > Overrides, Anda dapat mengklik kanan file yang disimpan dan memilih Open in containing folder dari menu konteks. Tindakan ini akan membuka folder yang Anda pilih selama penyiapan penggantian. Di sana, Anda dapat mengubah file dengan editor kode favorit Anda.

Mengganti header respons HTTP

Dari panel Network, Anda dapat mengganti header respons HTTP tanpa akses ke server web.

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

• Header Cross-Origin Resource Sharing (CORS)
• Header Permissions-Policy
• Header Isolasi Lintas Origin

Untuk mengganti header respons:

1. Siapkan penggantian lokal dan buka halaman yang ingin Anda debug.
2. Buka Network, temukan permintaan, klik kanan, lalu pilih Override headers. DevTools akan mengarahkan Anda ke editor Headers > Response Headers.

3. Arahkan kursor ke nilai header respons dan tempatkan kursor di sana.

   

   Atau, untuk mengaktifkan editor Header Respons, arahkan kursor ke nilai header respons, lalu klik edit Edit.

4. Ubah atau tambahkan header baru.

   Catatan: Contoh ini menambahkan header Access-Control-Allow-Origin: * untuk menghilangkan error CORS.

   

   • Untuk mengedit nilai header, klik nilai tersebut.
   • Untuk menambahkan header baru, klik Tambahkan header.
   • Untuk menghapus penggantian header, klik di sampingnya. Tindakan ini akan menghapus header yang Anda tambahkan atau mengembalikan nilai yang diubah ke nilai aslinya.

   Panel Jaringan menandai header yang diubah dengan warna hijau dan penggantian yang dihapus dengan warna merah dan dicoret. Selain itu, tab Header menampilkan ikon titik ungu dengan tooltip untuk memberi tahu Anda bahwa header diganti.

5. Muat ulang halaman untuk menerapkan perubahan.

Mengedit semua penggantian header respons

Untuk mengedit semua penggantian header di satu tempat:

1. Klik .headers di samping bagian Response Headers.

   

   DevTools akan mengarahkan Anda ke file .headers yang sesuai di Sources > Overrides.

2. Edit file .headers:

   

   • Untuk menambahkan aturan penggantian baru, klik Tambahkan aturan penggantian. Aturan di sini adalah sekumpulan header dan nilai serta satu atau beberapa permintaan untuk menerapkannya.

     Catatan: Anda dapat menggunakan karakter pengganti untuk menentukan beberapa permintaan sekaligus. Tentukan beberapa karakter dengan * dan satu karakter dengan ?.

   • Untuk menambahkan pasangan header-nilai ke aturan, arahkan kursor ke pasangan lain dan klik .

   • Untuk mengembalikan nilai header, hapus header atau aturan yang ditambahkan, arahkan kursor ke header atau aturan tersebut, lalu klik .

3. Simpan file .headers dengan Command / Control + S.

4. Muat ulang halaman untuk menerapkan perubahan.