Chrome hata ayıklayıcısında düzenleme

247

Chrome hata ayıklayıcısındaki JavaScript kodunu nasıl "dinamik olarak" düzenlerim? Bu benim için değil, bu yüzden kaynak dosyaya erişimim yok. Kodu düzenlemek ve sayfada hangi efektlerin olduğunu görmek istiyorum, bu durumda bir animasyonun birkaç kez kuyruğa girmesini durduruyorum.

javascript  google-chrome  debugging 
— Tom
kaynak
5
Opera'yı kullanabilirsiniz. Opera, JS dosyalarının düzenlenmesine izin verir. Sayfayı yumuşak bir şekilde yeniden yükledikten sonra değişiklikleriniz uygulanır. > Kaynak> Değişiklik yap> Değişiklikleri Uygula'ya sağ tıklayın.
— XP1
Bu , Chrome hata ayıklayıcısı için harika bir öğreticidir. Komut dosyalarınızda hata ayıklayıcıda değişiklik yapmak için çok basit adımları gösterir.
— SaganRitual
1
Ayrıca koşullu kesme noktası aracılığıyla kodu "enjekte edebilirsiniz" . Verilen örnekte fonksiyon num = 5, console.log(arguments[0], num), falseiçindeki değeri güncellemek ve günlüğe kaydetmek için kullanın foo.
— mems
— stackinfostack

Yanıtlar:

80

Chrome Geliştirici Araçları'ndaki yerleşik JavaScript hata ayıklayıcısını "Komut Dosyaları" sekmesi altında kullanabilirsiniz (sonraki sürümlerde "Kaynaklar" sekmesidir), ancak kodda uyguladığınız değişiklikler yalnızca yürütme bunlardan geçerken ifade edilir. Bu, sayfa yüklendikten sonra çalışmayan kodda yapılan değişikliklerin bir etkisi olmayacağı anlamına gelir. Örneğin, fareyle çalışırken test edebileceğiniz fareyle üzerine gelme işleyicilerinde bulunan kodda yapılan değişikliklerden farklı olarak .

Google I / O 2010 etkinliğinde , Chrome Geliştirici Araçları'nın diğer özelliklerini tanıtan bir video var .

— Adem
kaynak
26
Chrome'un sonraki sürümlerinde sekme simgeleri gitti ve 'Komut Dosyaları' sekmesi 'Kaynaklar' olarak yeniden adlandırıldı - bu nedenle javascript hata ayıklayıcısını bulmak açık olmayabilir. Biraz daha fazla bilgi burada stackoverflow.com/questions/12113769/…
— chrisjleu
9
Böyle bir yöntem yok. Kaynaklar sekmesi altındaki kodu da değiştiremiyorum.
— Melab
17
Chrome hata ayıklayıcısı, javascript'in yerel olarak değiştirilmesine izin vermez. Yanlış.
— omikes
1
@oMiKeY Yanlış olan nedir? Chrome, hata ayıklayıcıdaki komut dosyasının değiştirilmesine kesinlikle izin verir.
— JLRishe
6
@ oMiKeY Senaryo önceden onaylanmamışsa değiştirebilirsiniz
— peterchaula
284

Bugün bir başkasının web sitesi ile oynarken bu durumla karşılaştım.

Dinamik olarak düzenlemek istediğimden önce bazı kod satırlarına hata ayıklayıcıda bir kırılma noktası ekleyebileceğimi fark ettim . Beri kırılma noktaları bile sayfanın yeniden sonra kal , ben kırılma noktasında durdurulmuş ve sonra sayfa yükleme izin devam ederken istediğim değişiklikler düzenlemek başardı.

Hızlı bir çalışma olarak ve durumunuzla çalışırsa:

  1. Kodun daha önceki bir noktasına bir kesme noktası ekleme
  2. SAYFAYI yeniden yuklemek
  3. Koddaki değişikliklerinizi düzenleyin
  4. CTRL+ s(değişiklikleri kaydet)
  5. Hata ayıklayıcıyı duraklat
— sjacob
kaynak
1
Teşekkürler! Ben hemen sayfa yük yakın denilen kendini yürütme anonim işlevinde değişiklik yapmak gerektiğinde bu işe yaradı bulundu.
— Peter
1
Argh, çünkü bunu daha önce denemiştim ve işe yaramadı ve oh adamım, nasıl özledim. Ama evet, benim için çalışmıyor.
— Jamie Hutber
8
Benim için önemli olan değişikliklerin kaydedilmesi gerektiğini bilmekti (4. adım). Teşekkürler!
— Sergey Goliney
3
Benim için html dosyaları içinde javascript üzerinde çalışmıyor . Ayrıca, çalışma alanına bir klasör eklediyseniz, yerel js dosyasını seçin , sağ tıklayın ve ağ dito'yla eşleyin.
— oo
1
Html dosyalarındaki komut dosyalarını değiştirmenin bir yolu yok mu?
— Savaşçı
13

Aradığın şey bu:

1.- Kaynak sekmesine gidin ve javascript dosyasını açın

2. - Dosyayı düzenleyin, sağ tıklayın ve bir menü görünecektir: Kaydet'i tıklayın ve yerel olarak kaydedin.

Farkı görüntülemek veya değişikliklerinizi geri almak için, sağ tıklayın ve menüden Yerel Değişiklikler ... seçeneğini seçin. Gösterilen zaman damgasını genişletirseniz, değişikliklerinizin orijinal dosyaya göre farklı olduğunu görürsünüz.

Burada daha ayrıntılı bilgi: http://www.sitepoint.com/edit-source-files-in-chrome/

— artemiziyan
kaynak
5

Oldukça kolay, 'komut dosyaları' sekmesine gidin. Ve istediğiniz kaynak dosyayı seçin ve düzenlemek için herhangi bir satırı çift tıklayın.

— gnur
kaynak
4
Dosyada diskteki değişiklikleri kaydedebilmeniz harika olurdu: // URL'ler
— Jim Blackler
3
Tam olarak yaptığım buydu, ancak değişiklikler beklendiği gibi sayfaya yansımadı. $ (Selector) .fadeIn () ... $ (selector) .stop (true, true) .fadeIn () ... Y'know? Ve bunun sayfada olmasını görmek istiyorum.
— Tom
1
Kahretsin, haklısın. Şimdi, Chrome'un herhangi bir etkisi yoksa neden herhangi bir şeyi düzenlememize izin verdiğini merak ediyorum.
— gnur
"Farklı kaydet ..." yalnızca dosyayı bilgisayarınıza kaydeder. Sayfa yeniden yüklendikten sonra değişiklikleri uygulamaz. Hata ayıklama amacıyla JS dosyalarına değişiklik uygulamak istiyorsanız, Opera'yı kullanabilirsiniz.
— XP1
1
ve buna tincr deniyor: chrome.google.com/webstore/detail/…
— JustGoscha
3

Bu, JS'nin canlı olarak düzenlenmesi ile ilgili oldukça popüler bir soru olduğundan, başka bir yararlı seçeneğe dikkat çekmek istiyorum. Svjacob tarafından yanıtında açıklandığı gibi:

Dinamik olarak düzenlemek istediğimden önce bazı kod satırına hata ayıklayıcıda bir kırılma noktası ekleyebileceğimi fark ettim. Kesme noktaları sayfanın yeniden yüklenmesinden sonra bile kaldığından, kesme noktasında duraklatıldığında istediğim değişiklikleri düzenleyebildim ve ardından sayfanın yüklenmesine izin verdim.

Yukarıdaki çözüm benim için oldukça büyük JS (web paketi paketi - 3.21MB minimize edilmiş sürüm, önceden hazırlanmış sürümde 130k kod satırı) için işe yaramadı - krom çöktü ve kaydedilen değişiklikleri geri alan sayfa yeniden yüklemesi istedi. Bu durumda gitmenin yolu, herhangi bir uzak kaynağı bilgisayarınızdan herhangi bir yerel dosyayla değiştirmek için AutoRespond seçeneğini ayarlayabileceğiniz Fiddler'dir - ayrıntılar için bu SO sorusuna bakın .

Benim durumumda, yanıtı başarılı bir şekilde alay etmek için kemancıya CORS başlıkları eklemek zorunda kaldım.

— dominik
kaynak
2

Bir düğme tıklamasıyla çalışan javascript ise, Kaynaklar> Kaynaklar (krom geliştirici araçlarında) altında değişiklik yapmak ve kaydetmek için Ctrl + S tuşlarına basmak yeterlidir . Bunu her zaman yaparım.

Sayfayı yenilerseniz javascript değişiklikleriniz kaybolur, ancak krom yine de kırılma noktalarınızı hatırlar.

— developer747
kaynak
2

Artık google chrome yeni bir özellik sunuyor. Bu özelliği kullanarak kodunuzu krom taramasında düzenleyebilirsiniz. (Kod konumunda kalıcı değişiklik)

Bunun için lütfen kod konumunuzu seçmek için F12 -> Kaynak Sekmesi - (sağ taraf) -> Dosya Sistemi - tuşlarına basın. ve sonra krom tarayıcı size izin isteyecek ve bu koddan sonra yeşil renkle batılacaktır. ve kodunuzu değiştirebilirsiniz ve kod konumunuzu da yansıtacaktır (Kalıcı değişiklik olacağı anlamına gelir)

Teşekkürler

— stackinfostack
kaynak
2

@Mark'ın yanıtı gibi, Chrome DevTools'ta overridevarsayılan JavaScript'e bir Parçacık oluşturabiliriz . Son olarak, sayfada ne gibi etkileri olduğunu görebiliriz.

görüntü

— kami şarabı
kaynak
1

burada yazdığım krom js hata ayıklayıcı için yumuşak bir giriş. Belki bu konuda bilgi arayan başkalarına yardımcı olacaktır: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
kaynak
1
Bu iyi bir yazı. Ne yazık ki, söz konusu görev olan hata ayıklayıcıda JS düzenlemenin hiçbir şeyi söylemiyor.
— Bruno Bronosky
Katılmıyorum. Sonunda özellikle sorunun bir parçası olan Chrome hata ayıklayıcısında "" dinamik olarak JavaScript kodunun nasıl düzenleneceğini "örnek olarak görüyorum.
— meeech
1
meeech, eğer yayınınızı yanlış anlamadım, JS'yi konsolda nasıl değerlendireceğinizi gösterirsiniz . Bu, bir işlevi düzenlemekten farklıdır, böylece işlev gelecekte çağrıldığında farklı davranır.
— Bruno Bronosky
Yeterince adil. Canlı sayfanın değerleri etrafında değişiklik anlamına gelecek şekilde düzenlemeyi anladım ve yazmanın yardımcı olacağını düşündüm, çünkü konsolda bir kez bulunduğunuzda, değerler ve yürütme bağlamında başka bir şey js ile oynayabilirsiniz.
— meeech
1
evet, meeech, yıllardır anlattıklarını aynen yaptım. Sonunda, olay işleyicilerini değiştirmek için iyi bir geri bildirim döngüsü elde edememek beni hayal kırıklığına uğrattı. Özellikle sayfa yüklemesi sırasında tetikleyenler. AaronLS ve ben gnur'un cevabının yorumlarında tartıştığımız gibi, bazen DevTools> Sources> Sources çalışır ve diğer zamanlarda işe yaramaz. Ama işe yaradığında oldukça tatlı!
— Bruno Bronosky
1

javascrpit dosyalarını Chrome hata ayıklayıcısında, Kaynaklar sekmesi altında dinamik olarak düzenleyebilirsiniz , ancak sayfayı yenilerseniz, değişikliklerinizi yapmadan önce sayfa yüklemesini duraklatmak için bir kırılma noktası ayarlayıp sayfayı yeniden yüklemeniz gerekir. ve değişikliklerinizi düzenleyin ve son olarak değişikliklerinizin etkili olduğunu görmek için hata ayıklayıcıyı duraklatın. Chrome hata ayıklayıcı

— Seif Tamallah
kaynak
konsolu açık tutmak zorundasınız, böylece krom kesme noktalarında duracak, aksi takdirde krom kesme noktalarını göz ardı edecek
— Seif Tamallah
çalışmıyor. F5 kullanarak yeniden yüklüyorum ve duruyor, dosyayı değiştiriyorum, sonra çalışmaya devam ediyorum ve düzelttiğim aynı hatayı alıyorum. Ana sayfanın yanındaki bir js dosyası.,
— darkgaze
1

Senaryoyu değiştirmek ve yeni senaryodaki hataları ayıklamak için bir yol arıyordum. Bunu yapmayı başardım:

  1. Değiştirmek ve hata ayıklamak istediğiniz komut dosyasının ilk satırındaki kesme noktasını ayarlayın.

  2. Kesme noktası vurulur böylece sayfayı yeniden yükleyin

  3. Yeni komut dosyanızı yapıştırın ve içine istediğiniz kesme noktalarını ayarlayın

  4. Ctrl + s tuşlarına basarsanız sayfa yenilenir ve ilk satırdaki kesme noktası vurulur.

  5. Devam etmek için F8'e geçin ve şimdi yeni yapıştırılan komut dosyanız, yeniden yönlendirme ve yeniden yükleme yapılmadığı sürece orijinal komut dosyasının yerini alır.

— 100R
kaynak
0

Orijinal kaynağı barındırmasanız bile, sayfa yüklemeleri arasında javascript değişikliklerini sürdürmek için Chrome'da "Geçersiz Kılmalar" ı kullanabilirsiniz.

  1. Geliştirici Araçları> Kaynaklar> Geçersiz Kılmalar altında bir klasör oluşturun
  2. Chrome klasör için izin isteyecek, İzin Ver'i tıklayın
  3. Kaynaklar> Sayfa'da dosyayı düzenleyin ve kaydedin (ctrl-s). Mor bir nokta, dosyanın yerel olarak kaydedildiğini gösterir.

Chrome Geliştirici Araçları'ndaki Geçersiz Kılmalar alt sekmesi

— Mark Foreman
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.