Chrome Geliştirme Araçları - Javascript'i değiştirin ve yeniden yükleyin

195

Bir sayfanın JavaScript'ini değiştirmek ve ardından değiştirilmiş JavaScript dosyasını yeniden yüklemeden (ve dolayısıyla değişiklikleri kaybetmeden) sayfayı yeniden yüklemek mümkün müdür?

javascript google-chrome-devtools

— CDT
kaynak

218

Bu biraz uğraşmaktır, ancak bunu elde etmenin bir yolu, manipüle etmek istediğiniz javascript dosyasının veya bloğun başına bir kesme noktası eklemektir.

Daha sonra yeniden yüklediğinizde, hata ayıklayıcı bu kesme noktasında duraklar ve kaynakta istediğiniz değişiklikleri yapabilir, dosyayı kaydedebilir ve daha sonra değiştirilmiş kod aracılığıyla hata ayıklayıcıyı çalıştırabilirsiniz.

Ancak herkesin söylediği gibi, bir sonraki yeniden yükleme değişiklikleri gidecek - en azından biraz değiştirilmiş bir JS istemci tarafı çalıştırmanıza izin verin.

— Ashley Schroder
kaynak

10

Aradığım cevap buydu. Javascript kodunun ilk satırına bir kesme noktası yerleştirin. Ardından, mola meydana geldiğinde, değiştirilen kodunuzu oraya yapıştırın. Duraklatmayı kaldırır ve çalışır!

— Nicholas Blasgen

kodu nasıl düzenler veya buraya yapıştırırsınız? Chrome konsolunda bu işlevi kesinlikle görmüyorum. JS / HTML'yi Elements bölümünden düzenleyebilirim, ancak bu otomatik olarak yeniden yüklenmiyor. Ancak kesme noktalarının belirlendiği yerde, bu salt okunur gibi görünüyor

— Josh Sutterfield

Ne yazık ki bu hala mükemmel bir çözüm değil. Eklediğiniz hiçbir kod konsolda mevcut değildir. var foo = 'bar'Bir komut dosyasına eklemek foo, konsola maruz kalmaz .

— AgmLauncher

harici komut dosyalarında ne var? kesme noktaları onlardan yok gibi görünüyor.

— OlehZiniak

Bu, harici olarak yüklenmiş komut dosyalarını değiştirmek istediğiniz sürece çalışır, Chrome'un hiçbiri FireFox hata ayıklama araçları, yürütülmesi bir kesme noktasıyla kesilse bile satır içi javascript'in değiştirilmesine izin vermez.

— Marek

148

Harika bir haber, düzeltme Mart 2018'de geliyor, şu bağlantıya bakın: https://developers.google.com/web/updates/2018/01/devtools

"Yerel Geçersiz Kılmalar, DevTools'ta değişiklik yapmanıza ve bu değişiklikleri sayfa yüklemelerinde tutmanıza olanak tanır. Daha önce, sayfayı yeniden yüklediğinizde DevTools'ta yaptığınız tüm değişiklikler kaybolur. Yerel Geçersiz Kılmalar çoğu dosya türü için çalışır

Nasıl çalışır:

DevTools'un değişiklikleri kaydetmesi gereken bir dizin belirtirsiniz. DevTools'ta değişiklik yaptığınızda, DevTools değiştirilen dosyanın bir kopyasını dizininize kaydeder.
Sayfayı yeniden yüklediğinizde DevTools, ağ kaynağı yerine yerel, değiştirilmiş dosyayı sunar.

Yerel Geçersiz Kılmaları ayarlamak için:

Kaynaklar panelini açın.
Geçersiz Kılmalar sekmesini açın.
Geçersiz Kılmaları Ayarla'yı tıklayın.
Değişikliklerinizi kaydetmek istediğiniz dizini seçin.
Görünüm portunuzun üst kısmında DevTools'a dizine okuma ve yazma erişimi vermek için İzin Ver'i tıklayın.
Değişikliklerinizi yapın. "

GÜNCELLEME (19 Mart 2018): Canlı, ayrıntılı açıklamalar burada: https://developers.google.com/web/updates/2018/01/devtools#overrides

— Nico
kaynak

12

Chrome 65'in yayınlanmasıyla birlikte, bu kabul edilen yeni yanıt olmalıdır. (İşlevsellik zaten Chrome

— Micros

1

"A.js? Ver = 1.2" dosyam var. Geçersiz kılma klasörüne "a.js" olarak kaydedilir ve geçersiz kılma olarak yüklenmez. Parametre olduğunda çalışmaz mı? Bir çözüm var mı?

— Ralf

Amaçlandığı gibi çalışır, ancak bir şeye dikkat etmesi gerekir. Orijinal j'lerinizi yüklemek istediğinizde, geçersiz kılma yapılandırmalarını temizlemeniz veya yerel olarak değiştirilmiş dosyayı (geçersiz kılmaları yapılandırırken belirttiğiniz klasöre kaydedilmiş) silmeniz gerekir.

— Muhammad Murad Haider

61

Kaynak geçersiz kılma uzantısı size tam olarak bunu sağlar:

değiştirmek istediğiniz URL için bir dosya kuralı oluşturun
uzantıdaki js / css / etc'yi düzenleyin
istediğiniz sıklıkta yeniden yükleyin :)

— laktak
kaynak

1

Bana hile yaptın teşekkür ederim. Bu uzantıdan önce Windows için Fiddler kullanıyordum. Şu anda uzak dosyalarda herhangi bir platformda hata ayıklayabilirim.

— Ahmad Alfy

Yazılımı anlamıyorum, birisi tam olarak nasıl kurmam gerektiğini açıklayabilir mi?

— Siyah

0

Kesin sorunun (Chrome Geliştirici Araçları) asnwer olmadığını biliyorum, ancak bu geçici çözümü başarıyla kullanıyorum: http://www.telerik.com/fiddler

(bazı web geliştiricileri bu aracı zaten biliyorlar)

Dosyayı yerel olarak kaydedin
Gerektiği gibi düzenleyin
Kar!

Tam dokümanlar: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Chrome'da bir bayrak olarak uygulanmasını tercih ederim, bunu preserve after reloadşimdi yapamam, forumlar ve tartışma grupları kurumsal ağda engellendi :)

— Mars Robertson
kaynak

-8

Evet, geliştirici araçlarındaki "Kaynak" Sekmesini açmanız ve değiştirmek istediğiniz komut dosyasına gitmeniz yeterlidir. Ayarlarınızı doğrudan geliştirme araçları penceresinde yapın ve betiği kaydetmek için ctrl + s tuşlarına basın - tüm sayfayı yenileyinceye kadar yeni js kullanılacağını bilin.

— jacksbox
kaynak

Hangi krom sürümü? Evet, bir komut dosyasının içeriğini "düzenleyebilir" (sayfanın kendisinde komut dosyaları olmasa da), ancak değişikliklerin herhangi bir etkisi yoktur ve ctrl-s / save komut dosyasını yerel olarak kaydetmenize izin verir (ctrl-as olarak ana pencere).

— davidkonrad

Sürüm 34 kullanıyorum - bir komut dosyasını düzenlediğimde, örneğin bir click olayına (zaten bond) bir console.log ekleyin ve kaydedin, konsol şu iletiyi çıkarır: "Yeniden derleme ve güncelleme başarılı." - Daha sonra. click olayını tetiklediğimde günlük çıktısını konsolda alıyorum.

— jacksbox

Sayfayı yeniden yüklediğinizde, yerel olarak değiştirilmiş dosyayı kullanmıyor gibi görünüyor.

— Jake Wilson

32

beni "evet" 'te buldun ... ama sonra "tüm sayfayı yenileyene kadar" beni kaybettin ....

— Cool Blue