Mengedit Javascript menggunakan Alat Pengembang Chrome

94

Saya mencoba mengedit javascript di situs menggunakan Alat Pengembang Chrome. Saya telah membaca sekitar 30 akun tentang cara melakukan ini serta menonton beberapa video. Faktanya adalah, ketika saya pergi ke tab sumber dan membuka file yang ingin saya edit, saya tidak bisa melakukan apa-apa. Apakah ada langkah yang saya lewatkan?

Saya bisa membuat break point, step through, dll ... Saya tidak bisa mengedit. Apakah fungsi ini baru saja dihapus?

javascript google-chrome web-developer-toolbar cooperia
sumber
1
Saya bisa melakukan panggilan di konsol dengan baik. Saya tidak bisa mengedit sesuatu.
cooperia
1
Anda dapat mengganti fungsi dan variabel lokal, tetapi tidak ada cara untuk menyimpan perubahan ke file dari alat dev. Anda masih membutuhkan editor eksternal untuk itu.
Geuis
1
Sebenarnya, saya bisa mengedit file css tapi tidak bisa mengedit script yang tertanam di file php. >.>
cooperia
1
Ya, saya bisa melakukan apa yang saya inginkan dengan Opera. Masalah semacam terpecahkan.
cooperia
1
@cooperia letakkan kode js Anda dalam file * .js, lalu Anda dapat mengedit dan menjalankannya secara realtime di chrome.
Mahn

Jawaban:

104

Saya tahu pertanyaan ini basi, tetapi saya baru saja mengalami masalah serupa dan menemukan solusinya.

Jika Anda memiliki file prettified, Chrome tidak akan mengizinkan pengeditan. Saya mematikannya dan bisa mengedit. Bersedia bertaruh ini adalah masalah Anda.

raddevon.dll
sumber
4
ya, itu membantu, terima kasih @raddevon, saya dapat mengeditnya sekarang tetapi tidak ada efek yang terjadi pada halaman
Bolas
2
Untuk orang lain yang mencari topik ini: Saya telah mengatur prettify ke OFF tapi masih tidak bisa mengedit. Menghidupkan dan mematikannya lagi membantu. (Terima kasih kepada IT Crowd untuk saran itu;))
Drkawashima
3
Lanjutan: Tidak. Ternyata saya memiliki masalah yang sama dengan @raddevon. Mungkin bug di chrome. Anda dapat mengedit dan menyimpan skrip, dan Anda dapat mencapai break point di dalamnya saat debugging. Tetapi skrip yang benar-benar berjalan masih merupakan versi asli yang tidak diedit. Contoh: Saya mengedit skrip, mengomentari setiap baris, namun masih dapat menjalankan skrip, menekan breakpoint pada baris, dll. Jadi, versi yang diedit bahkan tidak berjalan, hanya ditampilkan ... Tentu saja saya meluncurkan kembali skrip dalam semua jenis cara berbeda tanpa efek apa pun
Drkawashima
4
Sebagai catatan jika Anda mendandani, kemudian salin dan tempel kembali ke file asli itu akan menjadi file asli tiruan yang dapat diedit.
Eoin
2
@Eoin Wonderful! Itu benar-benar berhasil. Dan dengan fungsionalitas "Local Overrides", ini bekerja dengan sempurna. Terima kasih atas petunjuknya :-)
Xan-Kun Clark-Davis
52

Anda dapat mengedit javascript di alat pengembang pada tab "Sumber", TETAPI itu hanya akan memungkinkan Anda untuk mengedit javascript dalam file sendiri. Skrip yang disematkan dalam file HTML (atau PHP) akan tetap menjadi hanya-baca.

welah
sumber
4
Saya menggunakan chrome di linux dan masih tidak dapat mengedit javascript meskipun itu adalah file .js tunggal.
roopunk
2
Catatan yang agak menarik: Mengaktifkan / menonaktifkan Pretty Print (ikon "{}") akan memungkinkan pengeditan js tersemat, tetapi perubahan tidak akan berpengaruh, jadi ini masih bukan yang kami cari. (Chrome 29)
Patrick
Itulah yang perlu saya ketahui. Terima kasih.
geeves
29

Ini memiliki beberapa batasan:

  1. harus berupa file JS. tidak dapat menyematkan tag di halaman html.

  2. itu tidak bisa dipoles.

gcb
sumber
Jika setelah mengikuti pedoman di atas dan perubahan di tab Sumber tidak berpengaruh, coba klik kanan pada file yang diedit di tampilan pohon di sebelah kiri dan pilih "Simpan". Sebuah dialog mungkin muncul meminta Anda untuk menyimpan file lokal, tetapi Anda bisa membatalkannya. Hanya pada saat itulah riwayat edit Chrome akhirnya menunjukkan bahwa pengeditan telah macet.
Erhhung
saya menjadi gila karena file baru ini telah menyematkan js tetapi saya tidak dapat mengedit..saya tidak mengerti mengapa..terima kasih #gcb dan #welah
carinlynchin
Apakah mungkin untuk tidak menyertakan file JS dari daftar di bawah Sourcestab alat Pengembang?
techie_28
@ techie_28 tidak yakin, buka pertanyaan lain. Tetapi saya akan menulis ekstensi cepat untuk itu.
gcb
13

Saya tidak tahu apakah Anda memerlukan ini untuk menyimpan secara permanen, tetapi jika Anda hanya perlu memodifikasi sementara js:

Saya dapat menyalin javascript yang ingin saya ubah menjadi editor teks, mengeditnya, lalu menempelkannya di konsol dan itu akan mendefinisikan kembali fungsi apa pun atau apa pun yang perlu saya definisikan ulang.

misalnya, jika halaman tersebut memiliki:

<script>
var foo = function() { console.log("Hi"); }
</script>

Saya dapat mengambil konten di antara skrip, mengeditnya, lalu memasukkannya ke dalam debugger seperti:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

dan itu akan berhasil untuk saya.

Atau jika Anda punya suka, 

function foo() {
    doAThing();
}

Anda tinggal masuk 

function foo() {
    doSomethingElse();
}

dan foo akan didefinisikan ulang.

Mungkin bukan solusi terbaik, tetapi berhasil. Akan bertahan sampai Anda memuat ulang halaman.

byronaltice
sumber
5

Saya melakukan pencarian "chrome dev tool edit javascript". Halaman ini adalah hasil pencarian pertama. Tapi itu terlalu ketinggalan jaman, itu tidak membantu saya.

Saya menggunakan Chrome 73, versi Chrome ini memiliki opsi "Aktifkan Penimpaan Lokal". Dengan menggunakan fungsi tersebut, saya dapat mengedit javascript dan dapat menjalankan dan debug.

masukkan deskripsi gambar di sini

wafe
sumber