Mengganti header respons HTTP dan konten web secara lokal

Sofia Emelianova
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 meniru 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 XHR dan pengambilan.

Misalnya, penggantian lokal dapat membantu dalam kasus penggunaan berikut:

  • Mock API dan menguji perbaikan API 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, menghapus CLS, untuk memastikan terlebih dahulu bahwa perbaikan tersebut signifikan.

Penggantian lokal juga memungkinkan Anda menyimpan 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 tetapkan.
  • Saat Anda memuat ulang halaman, DevTools akan menyajikan file lokal yang telah dimodifikasi, bukan resource jaringan.

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 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 header respons atau konten web di panel Jaringan:

  1. Buka DevTools, buka panel Jaringan, klik kanan permintaan yang ingin Anda ganti, pilih Ganti header atau Ganti konten dari menu drop-down. Memilih konten pengganti dari menu klik kanan permintaan.
  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. DevTools akan meminta Anda untuk memilih folder.
    2. Klik Allow untuk memberikan hak akses DevTools ke perintah tersebut. DevTools meminta akses.
  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 Enable Local Overrides atau klik Clear.

Untuk menghapus satu file penggantian atau semua penggantian dalam folder, klik kanan file atau folder di Sources > Overrides, pilih Delete, lalu klik OK 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 > Overrides.

Ganti konten web

Untuk mengganti konten web:

  1. Siapkan penggantian lokal.
  2. Lakukan perubahan pada file dan simpan di DevTools.

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 dalam Sources > Overrides, dan menampilkan ikon Disimpan. di samping file yang diganti pada panel dan panel yang relevan: Elements > Styles, Network, dan Sources > Overrides.

Ikon yang sesuai di samping file yang diganti di {i>Sources<i}, Network, dan Elements kemudian {i>Styles<i}

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

Ikon titik ungu dengan tooltip di samping tab Respons.

Mengganti permintaan XHR atau pengambilan untuk meniru resource jarak jauh

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

  1. Siapkan penggantian lokal.
  2. Di Jaringan, filter permintaan XHR/fetch, temukan yang Anda butuhkan, klik kanan, lalu pilih Ganti konten.
  3. Lakukan perubahan pada data yang diambil, lalu simpan file tersebut.
  4. Muat ulang halaman dan amati perubahan yang diterapkan.

Untuk mempelajari alur kerja ini, tonton video berikut:

Melacak perubahan lokal Anda

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

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

Opsi &#39;Buka di folder penampung&#39;.

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:

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.

    Editor Header Respons.

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

  4. Ubah atau tambahkan header baru.

    Mengubah nilai header yang ada, menambahkan nilai header baru, dan menghapus penggantian.

    • Klik nilai header untuk mengeditnya.
    • 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 asli.

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

  5. Muat ulang halaman untuk menerapkan perubahan.

Mengedit semua penggantian header respons

Untuk mengedit semua penggantian header di satu tempat:

  1. Klik Disimpan. .headers di samping bagian Header Respons.

    Header mengganti link di samping bagian Header Respons.

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

  2. Edit file .headers:

    Mengedit 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 nilai header ke aturan, arahkan kursor ke pasangan lain dan klik .

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

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

  4. Muat ulang halaman untuk menerapkan perubahan.