Mengedit di debugger Chrome

247

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.

javascript  google-chrome  debugging 
— Tom
sumber
5
Anda bisa menggunakan Opera. Opera memungkinkan pengeditan file JS. Setelah Anda soft reload halaman, perubahan Anda akan diterapkan. Klik kanan> Sumber> Buat perubahan> Terapkan Perubahan.
— XP1
Ini adalah tutorial yang luar biasa untuk debugger Chrome. Ini menunjukkan langkah-langkah yang sangat sederhana untuk membuat perubahan di-debugger ke skrip Anda.
— SaganRitual
1
Anda juga dapat "menyuntikkan" kode melalui breakpoint bersyarat . Dalam contoh yang diberikan digunakan num = 5, console.log(arguments[0], num), falseuntuk memperbarui dan mencatat nilai di dalam foofungsi.
— mems
— stackinfostack

Jawaban:

80

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.

— Adam
sumber
26
Di versi Chrome yang lebih baru, ikon tab telah hilang dan tab 'Skrip' diganti namanya menjadi 'Sumber' - jadi mungkin tidak jelas untuk menemukan debugger javascript. Beberapa info lebih lanjut di sini stackoverflow.com/questions/12113769/…
— chrisjleu
9
Tidak ada metode seperti itu. Saya juga tidak dapat mengubah kode di bawah tab Sumber.
— Melab
17
Chrome debugger tidak memungkinkan untuk modifikasi javascript lokal. Salah.
— omikes
1
@oMiKeY Apa yang salah? Chrome tentu saja memungkinkan memodifikasi skrip di debugger.
— JLRishe
6
@oMiKeY Anda dapat memodifikasi jika skrip tidak dituliskan
— peterchaula
283

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:

  1. Tambahkan break-point pada titik sebelumnya dalam skrip
  2. Muat ulang halaman
  3. Edit perubahan Anda ke dalam kode
  4. CTRL+ s(simpan perubahan)
  5. Batalkan jeda debugger
— sjacob
sumber
1
Terima kasih! Saya menemukan ini berfungsi ketika perlu membuat perubahan pada fungsi anonim yang dijalankan sendiri yang dipanggil tepat di dekat pemuatan halaman.
— Peter
1
Argh, karena saya sudah mencoba ini sebelumnya dan itu tidak berhasil dan, oh ya ampun, bagaimana saya melewatkannya? Tapi ya, tidak berhasil untukku.
— Jamie Hutber
8
Yang penting bagi saya adalah mengetahui bahwa perubahan harus disimpan (langkah 4). Terima kasih!
— Sergey Goliney
3
Tidak berfungsi pada javascript di dalam file html untuk saya. Juga, jika Anda telah menambahkan folder ke ruang kerja, pilih file js lokal , klik kanan dan petakan file itu ke dito jaringan.
— oo
1
Jadi tidak ada cara untuk memodifikasi skrip dalam file html?
— Warrior
13

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/

— artemisian
sumber
5

Cukup mudah, buka tab 'skrip'. Dan pilih file sumber yang Anda inginkan dan klik dua kali setiap baris untuk mengeditnya.

— gnur
sumber
4
Akan luar biasa jika Anda bisa menyimpan perubahan ke disk dalam kasus file: // URL
— Jim Blackler
3
Itu persis apa yang saya lakukan, tetapi perubahan tidak tercermin pada halaman, seperti yang diharapkan. Saya perlu mengubah $ (pemilih) .fadeIn () ... menjadi $ (pemilih) .stop (benar, benar) .fadeIn () ... Anda tahu? Dan saya ingin dapat melihat itu terjadi di halaman.
— Tom
1
Sial, kau benar. Sekarang saya bertanya-tanya mengapa Chrome memungkinkan kami untuk mengedit apa pun jika tidak ada efeknya ..
— gnur
"Save as ..." hanya menyimpan file ke komputer Anda. Itu tidak menerapkan perubahan setelah halaman dimuat ulang. Jika Anda ingin menerapkan perubahan pada file JS untuk debugging, Anda bisa menggunakan Opera.
— XP1
1
dan yang ini disebut tincr: chrome.google.com/webstore/detail/…
— JustGoscha
3

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:

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.

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.

— dominik
sumber
2

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.

— developer747
sumber
2

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

— stackinfostack
sumber
2

Sama seperti jawaban @mark, kita dapat membuat Cuplikan di Chrome DevTools, ke overrideJavaScript default. Akhirnya, kita dapat melihat apa efeknya pada halaman.

Gambar

— anggur kami
sumber
1

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/

— meeech
sumber
1
Langgan yang bagus. Sayangnya, ia tidak mengatakan apa-apa tentang mengedit JS di debugger yang merupakan tugas yang dimaksud.
— Bruno Bronosky
Tidak setuju. Anda lihat di bagian akhir saya secara khusus memberikan contoh bagaimana "" secara dinamis "mengedit kode JavaScript di debugger Chrome" yang merupakan bagian dari pertanyaan.
— meeech
1
meeech, kecuali saya salah paham tentang Anda memposting, Anda mendemonstrasikan cara mengevaluasi JS di konsol. Itu berbeda dari mengedit fungsi sehingga ketika fungsi dipanggil di masa depan, ia berperilaku berbeda.
— Bruno Bronosky
Cukup adil. Saya mengerti bahwa mengedit berarti mengubah nilai-nilai pada halaman langsung, dan berpikir bahwa penulisan akan membantu, karena begitu Anda memilikinya di konsol, Anda dapat bermain-main dengan nilai-nilai itu, dan hal lain apa pun dalam konteks eksekusi.
— meeech
1
ya, ya Tuhan, saya melakukan apa yang Anda gambarkan selama bertahun-tahun. Saya akhirnya frustrasi karena tidak dapat mencapai lingkaran umpan balik yang baik untuk mengubah event handler. Terutama yang memicu selama pemuatan halaman. Seperti yang saya dan AaronLS bahas dalam komentar atas jawaban gnur, terkadang mengedit di DevTools> Sources> Sources bekerja dan terkadang tidak. Tetapi ketika itu berhasil, itu cukup manis!
— Bruno Bronosky
1

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. Debugger Chrome

— Seif Tamallah
sumber
Anda harus menjaga konsol tetap terbuka sehingga chrome akan berhenti di breakpoints, kalau tidak chrome akan mengabaikan breakpoints
— Seif Tamallah
tidak bekerja Saya memuat ulang menggunakan F5 dan berhenti, saya mengubah file, kemudian saya terus berjalan dan saya mendapatkan kesalahan yang sama saya baru saja memperbaiki. Ini adalah file js di samping halaman utama.,
— darkgaze
1

Saya sedang mencari cara untuk mengubah skrip dan men-debug skrip baru itu. Cara saya berhasil melakukannya adalah:

  1. Atur breakpoint di baris pertama skrip yang ingin Anda ubah dan debug.

  2. Muat ulang halaman sehingga breakpoint dipukul

  3. Tempel skrip baru Anda dan atur breakpoint yang diinginkan di dalamnya

  4. Ctrl + s, dan halaman akan me-refresh yang menyebabkan breakpoint di baris pertama menjadi hit.

  5. F8 untuk melanjutkan, dan sekarang skrip Anda yang baru ditempel akan menggantikan yang asli asalkan tidak ada pengalihan dan memuat ulang.

— 100r
sumber
0

Anda dapat menggunakan "Overrides" di Chrome untuk mempertahankan perubahan javascript di antara pemuatan halaman, bahkan saat Anda tidak meng-hosting sumber asli.

  1. Buat folder di bawah Alat Pengembang> Sumber> Timpa
  2. Chrome akan meminta izin ke folder, klik Izinkan
  3. Edit file di Sumber> Halaman lalu simpan (ctrl-s). Titik ungu akan menunjukkan file disimpan secara lokal.

Sub-tab Overrides di Alat Pengembang Chrome

— Mark Foreman
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.