Google Chrome'da satır içi Javascript'te kesme noktaları nasıl ayarlanır?

211

Google Chrome'da Geliştirici Araçları'nı açtığımda Profiller, Zaman Çizelgeleri ve Denetimler gibi her türlü özelliği görüyorum, ancak js dosyalarında ve html ve javascript kodunda kesme noktaları ayarlayabilme gibi temel işlevler eksik! Kendisi buggy olan javascript konsolunu kullanmaya çalıştım - örneğin, bir JS hatasıyla karşılaştığında, tüm sayfayı yenilemediğim sürece çıkamıyorum. Birisi yardımcı olabilir mi?

javascript debugging google-chrome

— as
kaynak

Chrome'dan vazgeçtim. Firefox ile denedim ve birkaç saniye içinde kırılma noktama çarptı. Chrome ile mümkün olabilir, ancak nasıl yapılacağı kesinlikle açık değildir!

— Oliver P

127

Kaynaklar sekmesini kullanın, orada JavaScript'te kesme noktaları ayarlayabilirsiniz. Altındaki dizin ağacında (içinde yukarı ve aşağı ok bulunan) hata ayıklamak istediğiniz dosyayı seçebilirsiniz. Aynı sekmenin sağ tarafındaki devam ettir düğmesine basarak hata alabilirsiniz.

— Rian Schmits
kaynak

31

Nedense dahil js dosyaları listesini görüyorum, ancak yürütme sayfasının kendisini seçemiyorum, listede gösterilmez. Herhangi bir fikir?

— ulu

67

@ulu, bende aynı problem vardı. <script> öğenizde type = "text / javascript" özelliğinizin ayarlandığından emin olun.

— contactmatt

9

HTML5'te bu özelliğin artık zorunlu olmaması dışında. Sadece hata ayıklamak için kaynak kodunu değiştirmiyorum!

— sashok_bg

10

Type = "text / javascript" ekledikten sonra bile göremiyorum

— Nitin Kumar Mishra

3

Bu işe yaramazsa ve aşağıdaki gibi satır içi javascript kodunuz varsa: gibi <script> your code </script>bir ad ekleyin: <script> your code //# sourceURL=somename.js </script> Bu, aşağıdaki yanıtta daha iyi açıklanmıştır

— KM.

209

<script>Etiketlerdeki kodlardan mı yoksa HTML etiketi özelliklerinden mi bahsediyorsunuz ?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Her iki durumda da, bunundebugger gibi anahtar kelimeler işe yarar:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

debuggerGeliştirici araçları açık değilse NB Chrome durmaz.

JS dosyalarında ve <script>etiketlerinde özellik kesme noktaları da ayarlayabilirsiniz :

Click Kaynaklar sekmesini
Gezgini Göster simgesini tıklayın ve bir dosya seçin
Sol kenar boşluğundaki bir satır numarasını çift tıklayın. Kesme Noktaları paneline (4) karşılık gelen bir satır eklenir .

resim açıklamasını buraya girin

— Matt Ball
kaynak

4

Komut Dosyası sekmesi yok. Bu resimdeki diğer tüm sekmeleri görüyorum, ancak Komut Dosyası sekmesi yok !.

— ace

5

Ben html komut dosyası etiketi içinde kesme noktası ayarlamak mümkün demek. Ayrıca hata ayıklayıcı kullanmayı denedim; anahtar kelime, ancak çalışmıyor. Chrome bu konuda kesinti yapmaz, ancak Firefox'ta çalışır. Ben kod yerlerde bir sürü koymak için uygun olmayan hata ayıklayıcı anahtar kelimesine dayalı olmayan kesme noktası çözümü arıyorum ve sonra silmek zorunda.

— ace

2

Komut Dosyaları sekmesinin altındaki açılır menüde yalnızca listelenen JS dosyalarını görüyorum, ancak hata ayıklamak istediğim <script> etiketini içeren HTML dosyalarını görmüyorum. FF üzerindeki Firebug benzer bir açılır menüye sahiptir, ancak <script> etiketleri içeren HTML dosyalarını da listeler. Bu bir hata mı yoksa satır içi JS kodunda bir kesme noktası ayarlamak için başka bir yolu var mı?

— Wolfram Arnold

8

Sekme şimdi Sourcesyerine çağrılır Scripts.

— CoderDennis

1

Html gömülü js hata ayıklamak için çalıştığımda, benim dev alanda boş bir sayfa var. Doldurmak için boş kaynak dosyasına bakarken yenilemek zorunda kaldım.

— HappyCoder86

73

Senaryonuza bir isim de verebilirsiniz:

<script> ... (your code here) //# sourceURL=somename.js </script>

Tabii ki "somename" yerine bazı isimler yazın;) ve sonra bunu "Sources> top> (alan yok)> somename.js" adresindeki krom hata ayıklayıcısında normal bir komut dosyası olarak görürsünüz ve diğer komut dosyaları gibi hata ayıklayabilirsiniz.

— buildhome.eu
kaynak

3

en kolay ve mükemmel yol. ancak diğerleri için not edin, üretime itmeden önce çıkarmayı unutmayın.

— Zameer Fouzan

2

Aman tanrım, bunun bana ne kadar yardımcı olduğu hakkında hiçbir fikrin yok. Aman tanrım bu harika. Uzun zamandır böyle bir şey arıyordum.

— GregRos

Bu (iyi) fikri kullandım, ancak kaynaklar sekmesinde yeni dosyayı göremedim, sadece html dosyası. Sonra kodu çalıştırdım ve sonunda, komut dosyasından yazılan mesajın sağında konsolda, koda bir bağlantı görebilirsiniz. En iyi bölüm, bağlantının komut dosyasına verdiğiniz dosya adını göstermesidir (yani, // # sourceURL = somename.js).

— Manuel Rivera

1

Eğer yapabilseydim sana 1000 upvotes veririm;) Çok faydalı hile

— Giulio Quaresima

43

Geliştirici araçları komut dosyaları sekmesinde açıkken komut dosyasını içeren sayfayı yenileyin. Bu, dosya listesine komut dosyası dahil sayfanın html'sini gösteren bir (program) giriş ekleyecektir. Buradan kesme noktaları ekleyebilirsiniz.

— Gruff Bunny
kaynak

Bu benim için işe yaramadı. Bunun yerine, program dosyasını komut dosyaları sekmesinde açmak için sağ alt kısımdaki bir komut dosyası hata simgesini tıkladım.

— sanbikinoraion

1

Teşekkürler! Chrome 69 kullanıldığında, kaynaklar sekmesinde olmasam bile bu işe yaradı. Sayfa yüklenirken geliştirici araçlarının açık olması anahtar gibi görünüyor.

— Sam

Benim sorum bu olsaydı, kabul edilen cevap olurdu. Teşekkür ederim.

— plumpNation

Chrome 83'de çalıştı. Envimde dosya adı, uygulamanızın URL'sini temel alıyor. Örneğin, URL example.com/xxx/yyy ise, dosya adı "yyy" olur.

— Helix Quar

18

Özellikle ajax tarafından döndürülen html içindeki komut dosyası hatalarını ayıklamak için bir başka sezgisel basit hile geçici olarak console.log ("test") komut dosyasına koymaktır.

Etkinliği tetikledikten sonra, geliştirici araçlarının içindeki konsol sekmesini açın. "test" hata ayıklama yazdırma ifadesinin sağ tarafında gösterilen kaynak dosya bağlantısını göreceksiniz. sadece kaynağa tıklayın (VM4xxx gibi bir şey) ve şimdi kırılma noktasını ayarlayabilirsiniz.

PS: ayrıca, @Matt Ball tarafından önerilenler gibi krom kullanıyorsanız "hata ayıklayıcı" ifadesini koymayı düşünebilirsiniz.

— ken
kaynak

10

Durumum ve düzeltmek için ne yaptım:
Aşağıdaki gibi bir HTML sayfasına dahil bir javascript dosyası var:
Sayfa Adı: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Şimdi Javascript Hata Ayıklayıcı'yı Chrome'a girerek, Komut Dosyaları Sekmesini tıklıyorum ve yukarıda gösterildiği gibi listeyi bırakıyorum. Ben açıkça görebilirsiniz common.js / komut ancak olabilir DEĞİL geçerli html sayfası bkz Test.html bu nedenle gömülü javascript hata ayıklama edemedi damla menüde:

<script type="text/javascript">
  document.write("something");
</script>

Şaşırtıcıydı. Ancak, gömülü komut dosyasından eski type = "text / javascript" kaldırdığımda :

<script>
  document.write("something");
</script>

..ve sayfayı yeniledi / yeniden yükledi, voila, açılır listede göründü ve hepsi tekrar iyiydi.
Bu html sayfasında gömülü javascript hata ayıklama sorunları olan herkes için yararlı umuyoruz.

— Aditya Singh
kaynak

Aferin! Mac 10.7.4'te Chrome 20.0.1132.57'de test edildi Chromium projesine hata gönderildi.

— Mars Robertson

HTML 4 ve XHTML'de typegerekli bir özellik olduğunu unutmayın. HTML5'te isteğe bağlıdır.

— hotshot309

2

Yazımla bir ilgisi yok. Komut dosyası bu noktada müfettiş zaten açılmadığı sürece, çalıştırmadan sonra VM tarafından toplanır. Sayfayı yeniden yüklediğinizde komut dosyası toplanmadı.

— vsevik

Ben benim durumum, eksik <div>kod ayıklayıcı kodunu görmemi engelledi

— ceztko

5

Senaryomun debugger;üstüne eklemek benim için çalıştı.

— jeko
kaynak

4

Ben de aynı sorunu yaşıyordum, içeride JavaScript hata ayıklama nasıl <script> etiketleri . Ama sonra parantez içinde "(index)" adlı Kaynaklar sekmesi altında buldum. Kesme noktalarını ayarlamak için satır numarasını tıklayın.

Bu Chrome 71.

— ocarlsen
kaynak

2

"Komut Dosyaları" sekmesini göremiyorsanız, Chrome'u doğru bağımsız değişkenlerle başlattığınızdan emin olun. Bağımsız değişkenle sunucu tarafı JavaScript hatalarını ayıklamak için Chrome'u başlattığımda bu sorunla karşılaştım --remote-shell-port=9222. Chrome'u tartışmasız başlatırsam sorunum yok.

— Düşmüş melek
kaynak

Lütfen biraz açıklayabilir misiniz? Bu tam bir sorun yaşıyorum - hiç komut dosyaları sekmesini göremiyorum. Chrome'un en son geliştirici yapısını indirdim.

— tom redfern

2

Bu sorunla karşılaştım, ancak satır içi işlevim açısal bir JS görünümü ile oldu. Bu nedenle, yalnızca index.html hata ayıklayıcının kaynaklar sekmesinde kullanılabilir olduğundan, yükte hata ayıklama eklemek için satır içi komut dosyasına erişemedim.

Bu, benim inline (bu konuda başka bir seçeneğim yoktu) ile belirli bir görünüm açarken erişilebilir değildi anlamına geliyordu.

Sadece vurmak mümkün başardı hatalı bir işlev koymak ya da satır içi JS işlevi içinde aramak oldu.

Benim çözümüm şunları içeriyordu:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Bu, benim düğmeyi tıklattığımda, daha sonra krom konsolunda istendi.

Uncaught TypeError: undefined is not a function

Burada önemli olan bunun kaynağıydı: VM5658:6 tıklamak satır içi adım atmamı ve kırılma noktasını daha sonra orada tutmamı sağladı.

Ulaşmak için son derece kıvrımlı bir yol .. Ama işe yaradı ve görünümlerinizi dinamik olarak yükleyen Tek sayfa uygulamaları ile uğraşırken yararlı olabilir.

VM[n]Bir değerde, ve nkomut numarası eşittir üzerinde. Bu bilgiyi burada bulabilirsiniz: Chrome "[VM]"

— Pogrindis
kaynak

1

Visual Studio (2012) kullanarak aynı sorunu yaşadım ve IIS Express'e geçmek sorunu çözdü!

scriptEtiketinin typenitelik içine faktörü yoktu.

Nedense Visual Studio Development Server , Chrome'un kesme noktalarını etkinleştirmek için ihtiyaç duyduğu her şeyi sağlamamaktadır.

— kaçış-llc
kaynak

1

Q'nun ilgili olmadığını biliyorum Firefox ancak bu sorunun bir kopyasını kendim cevaplamak istemedim.

Firefox için @ matt-ball'dadebugger; neler yapabileceğinizi eklemeniz gerekir için, scriptetiket için önerilen .

Kodunuzda, debugger hata ayıklamak istediğiniz satırın üstüne ekler ve kesme noktaları ekleyebilirsiniz. Tarayıcıda kesme noktalarını ayarlarsanız durmaz.

Sorunun Chrome ile ilgili olduğu düşünüldüğünde bir Firefox yanıtı ekleyeceğiniz yer bu değilse. Yapmayın :( eksi cevap sadece nereye göndereceğimi bana bildirin ve ben de postayı mutlu bir şekilde taşıyacağım. :)

— T04435
kaynak

0

Bu Rian Schmits'in cevabının bir uzantısı . Benim durumumda, JavaScript koduma gömülü HTML kodu vardı ve HTML kodundan başka bir şey göremedim. Belki Chrome Hata Ayıklama yıllar içinde değişti, ancak Kaynaklar / Kaynaklar sekmesine sağ tıklandığında çalışma alanına klasör ekle seçeneği sunuldu . Tüm JavaScripts'ime erişebileceğim tüm projemi ekledim. Bu bağlantıda daha fazla ayrıntı bulabilirsiniz . Umarım bu birine yardımcı olur.

— Patricia
kaynak