Mengganti header respons HTTP dan konten web secara lokal

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, hapus CLS, untuk memastikan terlebih dahulu bahwa perbaikan performa sudah signifikan.

Penggantian lokal juga memungkinkan Anda mempertahankan perubahan yang Anda buat di DevTools di seluruh pemuatan halaman.

Cara kerjanya

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

Anda juga dapat menyimpan perubahan secara langsung ke file sumber. Lihat Mengedit dan menyimpan file dengan Workspace.

Batasan

Penggantian lokal berfungsi untuk header respons jaringan dan untuk sebagian besar jenis file, termasuk XHR dan permintaan 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 Sumber.

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 Override headers atau Override content dari menu drop-down.
2. Jika Anda belum menyiapkan penggantian lokal, pada panel tindakan di bagian atas, DevTools akan meminta Anda untuk:
   1. Pilih folder untuk menyimpan file penggantian.
   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 Sources > Overrides dan hapus centang pada kotak check_box_outline_blank Enable Local Overrides atau klik block Hapus.

Untuk menghapus satu file penggantian atau semua penggantian dalam folder, klik kanan file atau folder di Sumber > Penggantian, pilih Hapus, lalu klik Oke di 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 > Penggantian.

Ganti konten web

Untuk mengganti konten web:

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

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 Sources > Overrides, dan menampilkan ikon di samping file yang diganti pada panel dan panel yang relevan: Elements > 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 mengambil untuk meniru resource jarak jauh

Dengan penggantian lokal, Anda tidak memerlukan akses ke backend dan tidak perlu menunggunya mendukung perubahan Anda. Buat tiruan dan bereksperimen dengan cepat:

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

Untuk mempelajari alur kerja ini, tonton video berikut:

Lacak perubahan lokal Anda

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

Selain itu, dalam Sumber > Mengganti, Anda dapat mengklik kanan file yang disimpan dan memilih Buka di folder yang memuatnya 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 Header > Editor Header Respons.

3. Arahkan kursor ke nilai header respons dan arahkan kursor ke nilai tersebut.

   

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

4. Ubah atau tambahkan header baru.

   

   • Klik nilai header untuk mengeditnya.
   • Untuk menambahkan header baru, klik add Tambahkan header.
   • Untuk menghapus penggantian header, klik delete 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. refresh 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 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.

   • Untuk menambahkan pasangan header-nilai ke aturan, arahkan kursor ke pasangan lainnya, lalu klik add.

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

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

4. refresh Muat ulang halaman untuk menerapkan perubahan.