Mengganti header respons HTTP dan konten web secara lokal

Sofia Emelianova

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

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

Misalnya, penggantian lokal dapat membantu dalam kasus penggunaan berikut:

• Buat tiruan API dan uji perbaikan API sebelum benar-benar diproduksi.
• Buat prototipe desain UI baru jika Anda sudah mengetahui struktur data yang akan digunakan backend.
• Uji perbaikan performa, misalnya, menghilangkan CLS, untuk memastikan terlebih dahulu bahwa perbaikan tersebut signifikan.

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

Penggantian lokal juga memungkinkan Anda mempertahankan perubahan yang Anda buat 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 menayangkan file lokal yang diubah, bukan resource jaringan.

Catatan: Penggantian lokal otomatis menonaktifkan cache.

Anda juga dapat menyimpan perubahan secara 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 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 Sources.

Menyiapkan penggantian lokal

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

1. Buka DevTools, buka panel Jaringan, klik kanan permintaan yang ingin diganti, pilih Ganti header atau Ganti konten 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 aplikasi tersebut.
3. Jika Anda telah menyiapkan penggantian lokal, tetapi dinonaktifkan, DevTools akan otomatis mengaktifkannya.

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 Jaringan > Header > Header Respons untuk memungkinkan Anda membuat perubahan pada header respons.

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

Untuk menghapus satu file pengganti 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 Jaringan, klik kanan permintaan, lalu pilih Tampilkan semua penggantian. DevTools akan mengarahkan Anda ke Sumber > Ganti.

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 yang dipetakan sumber. 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 Sources atau CSS di Elements > Styles, kecuali jika CSS berada di file HTML.

DevTools menyimpan file yang diubah, mencantumkannya di Sumber > Penggantian, dan menampilkan ikon di samping file yang diganti di panel dan panel yang relevan: Elemen > Gaya, Jaringan, dan Sumber > Penggantian.

Selain itu, panel Jaringan menampilkan ikon titik ungu dengan tooltip di samping tab Response dalam 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 backend mendukung perubahan Anda. Buat tiruan dan bereksperimen dengan cepat:

1. Menyiapkan penggantian lokal.
2. Di Jaringan, filter permintaan XHR/pengambilan, temukan permintaan yang Anda perlukan, klik kanan, lalu pilih Ganti konten.
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 buat pada konten web di satu tempat—tab panel samping Perubahan.

Selain itu, di Sumber > Ganti, Anda dapat mengklik kanan file yang disimpan dan memilih Buka di folder yang memuat 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 Jaringan, 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 Kebijakan Izin
• Header Isolasi Lintas-Asal

Untuk mengganti header respons:

1. Siapkan penggantian lokal dan periksa, misalnya, halaman demo ini.
2. Buka Jaringan, temukan permintaan, klik kanan, lalu pilih Ganti header. DevTools akan mengarahkan Anda ke editor Header > 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 penghapusan penggantian 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.

Edit semua penggantian header respons

Untuk mengedit semua penggantian header di satu tempat:

1. Klik .headers di samping bagian Header Respons.

   

   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 kumpulan header dan nilai serta satu atau beberapa permintaan untuk menerapkannya.

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

   • Untuk menambahkan pasangan nilai header ke aturan, arahkan kursor ke pasangan lain, lalu 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.