Bagaimana cara "secara dinamis" mengedit kode JavaScript di debugger Chrome? Ini bukan untuk saya, jadi saya tidak memiliki akses ke file sumber. Saya ingin mengedit kode dan melihat efek apa yang mereka miliki pada halaman, dalam hal ini menghentikan animasi dari antrian beberapa kali.
247
num = 5, console.log(arguments[0], num), falseuntuk memperbarui dan mencatat nilai di dalamfoofungsi.Jawaban:
Anda dapat menggunakan debugger JavaScript bawaan di Alat Pengembang Chrome di bawah tab "Skrip" (dalam versi yang lebih baru itu adalah tab "Sumber"), tetapi perubahan yang Anda terapkan pada kode hanya diungkapkan pada saat eksekusi melewati mereka. Itu berarti perubahan pada kode yang tidak berjalan setelah halaman dimuat tidak akan berpengaruh. Tidak seperti misalnya perubahan pada kode yang berada di penangan mouseover , yang dapat Anda uji dengan cepat.
Ada video dari acara Google I / O 2010 yang memperkenalkan kemampuan Alat Pengembang Chrome lainnya.
sumber
Saya menemukan ini hari ini, ketika saya bermain-main dengan situs web orang lain.
Saya menyadari bahwa saya dapat melampirkan break-point di debugger ke beberapa baris kode sebelum apa yang ingin saya edit secara dinamis. Dan karena break-point tetap bahkan setelah memuat ulang halaman , saya dapat mengedit perubahan yang saya inginkan ketika berhenti di break-point dan kemudian terus membiarkan halaman memuat.
Jadi sebagai penyelesaian cepat, dan jika berhasil dengan situasi Anda:
sumber
Inilah yang Anda cari:
1.- Arahkan ke tab Source dan buka file javascript
2.- Edit file, klik kanan dan sebuah menu akan muncul: klik Simpan dan simpan secara lokal.
Untuk melihat perbedaan atau mengembalikan perubahan Anda, klik kanan dan pilih opsi Modifikasi Lokal ... dari menu. Anda akan melihat perubahan Anda berbeda dengan file asli jika Anda memperluas stempel waktu yang ditunjukkan.
Info lebih rinci di sini: http://www.sitepoint.com/edit-source-files-in-chrome/
sumber
Cukup mudah, buka tab 'skrip'. Dan pilih file sumber yang Anda inginkan dan klik dua kali setiap baris untuk mengeditnya.
sumber
Karena ini adalah pertanyaan yang cukup populer yang berhubungan dengan penyuntingan langsung JS, saya ingin menunjukkan opsi lain yang bermanfaat. Seperti yang dijelaskan oleh svjacob dalam jawabannya:
Solusi di atas tidak bekerja untuk saya untuk JS yang cukup besar (bundel webpack - versi minimalkan 3.21MB, 130.000 baris kode dalam versi prettified) - chrome mengalami crash dan meminta pemuatan ulang halaman yang mengembalikan setiap perubahan yang disimpan. Cara untuk pergi dalam kasus ini adalah Fiddler di mana Anda dapat mengatur opsi AutoRespond untuk mengganti sumber daya jarak jauh dengan file lokal apa pun dari komputer Anda - lihat pertanyaan SO ini untuk detailnya .
Dalam kasus saya, saya juga harus menambahkan header CORS ke fiddler agar berhasil mengejek respons.
sumber
Jika javascript-nya yang berjalan pada klik tombol, kemudian membuat perubahan di bawah Sumber> Sumber (di alat pengembang di chrome) dan menekan Ctrl + S untuk menyimpan, sudah cukup . Saya melakukan ini sepanjang waktu.
Jika Anda menyegarkan halaman, perubahan javascript Anda akan hilang, tetapi chrome masih akan mengingat titik istirahat Anda.
sumber
Sekarang google chrome telah memperkenalkan fitur baru. Dengan Menggunakan fitur ini Anda dapat mengedit kode Anda di penelusuran chrome. (Perubahan permanen pada lokasi kode)
Untuk itu Tekan F12 -> Tab Sumber - (sebelah kanan) -> Sistem File - di dalamnya silakan pilih lokasi kode Anda. dan kemudian browser chrome akan meminta Anda izin dan setelah itu kode akan tenggelam dengan warna hijau. dan Anda dapat memodifikasi kode Anda dan itu juga akan mencerminkan lokasi kode Anda (Itu berarti itu akan berubah secara permanen)
Terima kasih
sumber
Sama seperti jawaban @mark, kita dapat membuat Cuplikan di Chrome DevTools, ke
overrideJavaScript default. Akhirnya, kita dapat melihat apa efeknya pada halaman.sumber
inilah pengantar lembut untuk debugger js di chrome yang saya tulis. Mungkin itu akan membantu orang lain mencari info tentang ini: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
sumber
Anda dapat mengedit file javascrpit secara dinamis di debugger Chrome, di bawah tab Sumber , namun perubahan Anda akan hilang jika Anda me-refresh halaman, untuk menjeda pemuatan halaman sebelum melakukan perubahan Anda, Anda perlu mengatur break point lalu memuat kembali halaman dan edit perubahan Anda dan akhirnya batalkan jeda debugger untuk melihat perubahan Anda berlaku.
sumber
Saya sedang mencari cara untuk mengubah skrip dan men-debug skrip baru itu. Cara saya berhasil melakukannya adalah:
Atur breakpoint di baris pertama skrip yang ingin Anda ubah dan debug.
Muat ulang halaman sehingga breakpoint dipukul
Tempel skrip baru Anda dan atur breakpoint yang diinginkan di dalamnya
Ctrl + s, dan halaman akan me-refresh yang menyebabkan breakpoint di baris pertama menjadi hit.
F8 untuk melanjutkan, dan sekarang skrip Anda yang baru ditempel akan menggantikan yang asli asalkan tidak ada pengalihan dan memuat ulang.
sumber
Chrome DevTools memiliki Cuplikan panel tempat Anda dapat membuat dan mengedit kode JavaScript seperti yang Anda lakukan pada editor, dan menjalankannya. Buka DevTools, lalu pilih panel Sumber, lalu pilih tab Cuplikan.
https://developers.google.com/web/tools/chrome-devtools/snippets
sumber
Anda dapat menggunakan "Overrides" di Chrome untuk mempertahankan perubahan javascript di antara pemuatan halaman, bahkan saat Anda tidak meng-hosting sumber asli.
sumber