Yeni Breakpoints kenar çubuğu daha hızlı hata ayıklamaya nasıl yardımcı olur?

Kim-Anh Tran
Kim-Anh Tran
Vaatika Dabra Groth
Vaatika Dabra Groth

Eski ve yeni kesme noktası kenar çubuğu bölmesi yan yana.

Chrome 111 veya sonraki bir sürümü kullanıyorsanız kesme noktası kenar çubuğunun tasarımını değiştirdiğimizi fark etmiş olabilirsiniz. Chrome 113 ile birlikte yeni kenar çubuğu, eski tasarımın tamamen yerini alıyor. Yeniden tasarımla amacımız, aşağıdakileri yaparak kesme noktası iş akışını iyileştirmekti:

Ayarlanan tüm kesme noktalarına daha iyi bir genel bakış sunar. Durak noktaları içeren sık kullanılan kullanıcı iş akışlarına daha kolay erişilebilir ve daha sezgisel hale getirin. Mevcut kesme noktası özelliklerini görünür hale getirme.

Bu yayında, durak noktalarını kullanarak hata ayıklama hakkında bilgi sahibi olduğunuz varsayılmaktadır. Daha önce durma noktalarını kullanmadıysanız durma noktalarına genel bakış başlıklı makaleyi inceleyerek kodunuzda hata ayıklama için durma noktalarını nasıl kullanabileceğiniz hakkında daha fazla bilgi edinin.

Şimdi, yeniden tasarımın sunduğu avantajlara ve yeni kenar çubuğundan nasıl yararlanabileceğinize göz atalım. Yeniden tasarımın, yeni özellikler eklemek yerine mevcut özellikleri daha sezgisel ve erişilebilir hale getirmeye odaklandığını unutmayın.

Kodunuzun neden hata verdiğini araştırmak için istisnalarda duraklat

Yakalanan ve yakalanmayan istisnalarda duraklat.

Kodunuz istisna atıyor mu? Endişelenmeyin. Chrome Geliştirici Araçları, istisnalarınızın atandığı noktada yürütmeyi durdurmak için istisnaları duraklatmanıza olanak tanır. Bu sayede, kodunuzun hata verdiği koşulları inceleyip daha iyi anlayabilirsiniz. Kenar çubuğundaki ilgili onay kutularını işaretleyerek yakalanan istisnaları, yakalanmayan istisnaları veya her ikisini birden duraklatmayı seçebilirsiniz.

Kesme noktalarınızı yönetme: İlgili kesme noktası gruplarını genişletin ve alakalı olana odaklanmak için diğerlerini daraltın

Kesme noktası gruplarını daraltın ve genişletin.

Kesme noktaları birkaç dosyaya yayılmış olabilir. Ayırma noktası kenar çubuğu, ayrılma noktalarını ait oldukları dosyaya göre gruplandırır. İlgili kesme noktası gruplarını genişletip kalanları daraltarak yalnızca mevcut hata ayıklama oturumunuz için önemli olanlara odaklanın.

Kesme noktalarınızı yönetme: Koduna atlamak, kaldırmak veya kesme noktalarını etkinleştirmek/devre dışı bırakmak için tek tıklama

Kesme noktası kenar çubuğu, yaygın görevleri tek tıklamayla tamamlamanıza olanak tanır. Aşağıda, aşağıdakileri nasıl yapabileceğinize dair genel bir bakış sunulmaktadır:

Kod Düzenleyici'de kesme noktası konumuna gidin. Bir kesme noktasını veya bir dosyadaki tüm kesme noktalarını kaldırın. Bir kesme noktasını veya bir dosyadaki tüm kesme noktalarını etkinleştirebilir ya da devre dışı bırakabilirsiniz.

Tüm bunları tek tıklamayla yapabilirsiniz. Bu seçeneklere içerik menüsünden de erişebilirsiniz:

Kesme noktası kod snippet'ini tıklayarak kesme noktası konumuna atlama

Kod düzenleyicisinde kaynak kodu konumuna atlayın.

Kodun neresinde duraklatma noktasını ayarladığınızı kontrol etmek ve etrafındaki kodu analiz etmek ister misiniz? Kenar çubuğundaki bir kesme noktasının kod snippet'ini tıklamanız yeterlidir. Böylece kod konumu kod düzenleyicide açılır.

Kaldır düğmesini tıklayarak tek bir kesme noktasını veya bir dosyadaki tüm kesme noktalarını kaldırabilirsiniz.

Tek bir kesme noktasını veya bir dosyadaki tüm kesme noktalarını kaldırın.

Fareyle bir kesme noktasının veya kesme noktası grubunun üzerine geldiğinizde, tıklandığında bir dosyada tek bir kesme noktasını veya tüm kesme noktalarını kaldıran bir kaldırma düğmesi gösterilir.

Bir dosyadaki tek bir kesme noktasını veya tüm kesme noktalarını devre dışı bırakma

Bir dosyada tek bir kesme noktasını veya tüm kesme noktalarını etkinleştirebilir ya da devre dışı bırakabilirsiniz.

Bir kesme noktasını etkinleştirmek veya devre dışı bırakmak için yanındaki onay kutusunu işaretleyin ya da kutunun işaretini kaldırın.

Bir dosyadaki tüm kesme noktalarını etkinleştirmek veya devre dışı bırakmak için kesme noktası grubunun üzerine gelin ve dosya adının yanında görünen onay kutusunu işaretleyin veya kutunun işaretini kaldırın.

Daha az bilinen kesme noktası özelliklerinden yararlanın: koşullu kesme noktaları ve günlük noktaları

Kesme noktasını düzenleyerek kesme noktası koşullarını düzenleyin veya günlük noktası günlük kaydınızı değiştirin

Kesme noktası koşullarını düzenleyin veya günlük noktası günlüklerini değiştirin.

İmleci bir kesme noktasının üzerine getirerek ve görünen düzenle düğmesini tıklayarak kesme noktası koşulunu veya günlüğünü düzenleyin. Bu işlem, kesme noktası türünü ve kesme noktanızın ayrıntılarını değiştirmek için bir iletişim kutusu açar.

Alternatif olarak, kod düzenleyicide kesme noktasının satırını seçin ve kesme noktası düzenleme iletişim kutusunu açmak için Linux'ta Kontrol+Alt+b, Mac'te ise Komut+Alt+b tuşlarına basın.

Ayrıca, kenar çubuğundaki kesme noktasının üzerine gelerek koşulunuzu veya günlük noktası günlük kaydınızı hızlıca tekrar kontrol edebilirsiniz:

Koşulu veya günlük noktası günlüğünü görüntüleyin.

Sonuç

Durak noktası kenar çubuğunu yeniden tasarlamamızın amacı, durak noktalarıyla hata ayıklamayı kolaylaştırmaktı. En önemlisi, daha yapılandırılmış, erişimi ve anlaşılması daha kolay bir deneyim sunmayı hedefledik. Bu iyileştirmelerin bir sonraki hata ayıklama oturumunuzda size yardımcı olacağını umuyoruz.

Daha fazla iyileştirme öneriniz varsa hata bildirerek bize bildirin.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.