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 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. Memilih konten penggantian 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 memilih folder.
    2. Klik Izinkan untuk memberikan hak akses DevTools ke aplikasi 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 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 Disimpan. di samping file yang diganti pada panel dan panel yang relevan: Elements > Gaya, Jaringan, dan Sumber > Penggantian.

Ikon yang sesuai di samping file yang diganti di Sumber, Jaringan, dan Elemen, lalu Gaya

Selain itu, panel Jaringan 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 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. 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.

Setelan 'Buka di folder yang memuat'' sebelumnya.

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:

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.

    Editor Header Respons.

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

  4. Ubah atau tambahkan header baru.

    Mengubah nilai header yang ada, menambahkan nilai 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 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.

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 sebelah 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 header-nilai ke aturan, arahkan kursor ke pasangan lainnya, lalu klik .

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

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

  4. Muat ulang halaman untuk menerapkan perubahan.