Alat Dev Chrome - Memodifikasi javascript dan memuat ulang

196

Apakah mungkin untuk memodifikasi JavaScript halaman dan kemudian memuat kembali halaman tanpa memuat ulang file JavaScript yang dimodifikasi (dan dengan demikian kehilangan modifikasi)?

javascript google-chrome-devtools CDT
sumber

Jawaban:

219

Ini sedikit sulit, tetapi salah satu cara Anda dapat mencapai ini adalah dengan menambahkan breakpoint di awal file javascript atau blok yang ingin Anda manipulasi.

Kemudian ketika Anda memuat ulang, debugger akan berhenti pada breakpoint itu, dan Anda dapat membuat perubahan apa pun yang Anda inginkan ke sumbernya, menyimpan file dan kemudian menjalankan debugger melalui kode yang dimodifikasi.

Tetapi seperti yang dikatakan semua orang, memuat ulang perubahan berikutnya akan hilang - setidaknya biarkan Anda menjalankan sisi klien JS yang sedikit dimodifikasi.

Ashley Schroder
sumber
10
Ternyata ini adalah jawaban yang saya cari. Tempatkan breakpoint pada baris pertama kode javascript. Kemudian ketika kerusakan terjadi, rekatkan kode Anda yang dimodifikasi di sana. Batalkan jeda dan berhasil!
Nicholas Blasgen
bagaimana Anda mengedit atau menempelkan kode di sana? Saya pasti tidak melihat fungsi itu di konsol Chrome. Saya dapat mengedit JS / HTML dari bagian Elemen, tetapi itu tidak dimuat ulang secara otomatis. Tetapi di tempat di mana breakpoints ditetapkan, yang tampaknya hanya bisa dibaca
Josh Sutterfield
Sayangnya ini masih bukan solusi yang bagus. Kode apa pun yang Anda tambahkan tidak tersedia di konsol. Misalnya menambahkan var foo = 'bar'skrip tidak mengekspos fooke konsol.
AgmLauncher
ada apa dengan skrip eksternal? breakpoints tampaknya menghilang dari mereka.
OlehZiniak
Ini berfungsi selama Anda ingin memodifikasi skrip yang dimuat secara eksternal, baik Chrome maupun alat debugging FireFox tidak akan memungkinkan untuk memodifikasi javascript sebaris, meskipun eksekusinya terganggu dengan breakpoint.
Marek
149

Berita bagus, perbaikannya akan datang pada Maret 2018, lihat tautan ini: https://developers.google.com/web/updates/2018/01/devtools

"Overrides Lokal memungkinkan Anda membuat perubahan di DevTools, dan menyimpan perubahan itu di seluruh halaman. Sebelumnya, segala perubahan yang Anda buat di DevTools akan hilang ketika Anda memuat ulang halaman. Overrides Lokal berfungsi untuk sebagian besar jenis file

Bagaimana itu bekerja:

  • Anda menentukan direktori tempat DevTools harus menyimpan perubahan. Saat Anda membuat perubahan di DevTools, DevTools menyimpan salinan file yang dimodifikasi ke direktori Anda.
  • Saat Anda memuat ulang halaman, DevTools menyajikan file lokal yang dimodifikasi, bukan sumber daya jaringan.

Untuk mengatur Override Lokal:

  1. Buka panel Sumber.
  2. Buka tab Override.
  3. Klik Setup Override.
  4. Pilih direktori tempat Anda ingin menyimpan perubahan Anda.
  5. Di bagian atas viewport Anda, klik Izinkan untuk memberi DevTools akses baca dan tulis ke direktori.
  6. Buat perubahan Anda. "

UPDATE (19 Maret 2018): Langsung, penjelasan rinci di sini: https://developers.google.com/web/updates/2018/01/devtools#overrides

Nico
sumber
12
Dengan rilis Chrome 65, ini harus menjadi jawaban yang diterima baru. (Fungsionalitas sudah tersedia di Chrome Canary)
Micros
1
Saya punya file "a.js? Ver = 1.2". Ini disimpan dalam folder override sebagai "a.js", dan tidak dimuat sebagai override. Apakah tidak berfungsi ketika ada parameter? Apakah ada solusinya?
Ralf
Bekerja sebagaimana mestinya, tetapi perlu mengurus satu hal. Anda harus menghapus konfigurasi override atau menghapus file yang dimodifikasi secara lokal (disimpan di folder yang Anda tentukan saat mengonfigurasi override) setelah Anda ingin memuat js asli Anda.
Muhammad Murad Haider
61

The Sumber Daya Override ekstensi memungkinkan Anda untuk melakukan hal itu:

  • buat aturan file untuk url yang ingin Anda ganti
  • edit js / css / etc di ekstensi
  • memuat ulang sesering yang Anda inginkan :)
laktak
sumber
1
Apakah trik untuk saya terima kasih. Saya dulu menggunakan Fiddler untuk Windows sebelum ekstensi itu. Saat ini saya dapat men-debug file jarak jauh di platform apa pun.
Ahmad Alfy
Saya tidak mengerti perangkat lunaknya, dapatkah seseorang menjelaskan bagaimana tepatnya saya harus mengaturnya?
Hitam
0

Saya tahu ini bukan jawaban pertanyaan yang tepat (Alat Pengembang Chrome) tapi saya menggunakan solusi ini dengan sukses: http://www.telerik.com/fiddler

(cukup yakin beberapa web devs sudah tahu tentang alat ini)

  1. Simpan file secara lokal
  2. Edit sesuai kebutuhan
  3. Keuntungan!

masukkan deskripsi gambar di sini

Dokumen lengkap: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Saya lebih suka menerapkannya di Chrome sebagai bendera preserve after reload, tidak bisa melakukan ini sekarang, forum dan grup diskusi diblokir di jaringan perusahaan :)

Mars Robertson
sumber
-8

Ya, cukup buka Tab "Sumber" di dev-tools dan arahkan ke skrip yang ingin Anda ubah. Buat penyesuaian Anda langsung di jendela alat dev dan kemudian tekan ctrl + s untuk menyimpan skrip - tahu js baru akan digunakan sampai Anda me-refresh seluruh halaman.

jacksbox
sumber
Versi krom apa? Ya, Anda dapat "mengedit" isi skrip (bukan skrip pada halaman itu sendiri), tetapi perubahan tidak memiliki efek apa pun, dan ctrl-s / save hanya membiarkan Anda menyimpan skrip secara lokal (seperti ctrl-seperti pada jendela utama).
davidkonrad
Saya menggunakan versi 34 - ketika saya mengedit skrip misalnya menambahkan console.log ke acara klik (sudah terikat) dan menyimpan, konsol menampilkan pesan berikut: "Kompilasi ulang dan pembaruan berhasil." - setelah itu. ketika saya memicu event klik saya mendapatkan log-output di konsol.
jacksbox
Ketika Anda memuat ulang halaman itu tampaknya tidak menggunakan file yang dimodifikasi secara lokal.
Jake Wilson
32
Anda memiliki saya di "ya" ... tapi kemudian Anda kehilangan saya di "sampai Anda menyegarkan seluruh halaman" ....
Cool Blue