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 ayrılma noktası kenar çubuğu bölmesi yan yana.

Chrome 111 veya sonraki bir sürümünü kullanıyorsanız ayrılma noktası kenar çubuğumuzun tasarımını değiştirdiğimizi zaten fark etmiş olabilirsiniz. Chrome 113'te yeni kenar çubuğu tamamen eski tasarımın yerini alıyor. Bu yeni tasarımda amacımız, aşağıdakileri yaparak ayırma noktası iş akışını iyileştirmekti:

Ayarlanan tüm ayrılma noktaları hakkında daha iyi bir genel bakış sağlar. Ayrılma noktalarıyla yaygın kullanıcı iş akışlarını daha kolay erişim ve daha sezgisel hale getirme. Mevcut kesme noktası özelliklerini görünür hale getirmek.

Bu gönderide, kesme noktalarını kullanarak hata ayıklama konusunda zaten bilgi sahibi olduğunuz varsayılmaktadır. Ayrılma noktalarını daha önce kullanmadıysanız ayırma noktalarıyla ilgili bu genel bakışa göz atın ve kodunuzda hata ayıklamak için ayrılma noktalarını nasıl kullanabileceğiniz hakkında daha fazla bilgi edinin.

Şimdi yeni tasarımın neler sunduğuna ve yeni kenar çubuğundan nasıl yararlanabileceğinize göz atalım. Bu yeni tasarımda, yeni özellikler eklemek yerine mevcut özelliklerin kullanımını daha sezgisel ve kolay erişilebilir hale getirmeye odaklanıldığını hatırlatmak isteriz.

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

Yakalanan ve yakalanmamış istisnalarda duraklat.

Kodunuz bir istisna mı oluşturuyor? Endişelenmeyin! Chrome Geliştirici Araçları, istisnanın atıldığı noktada yürütmeyi durdurmak için istisnalarda duraklamanıza olanak tanır. Bu, kodunuzun hata verdiği durumları araştırmanıza ve daha iyi anlamanıza yardımcı olabilir. Kenar çubuğundaki ilgili onay kutularını işaretleyerek, yakalanan istisnalarda, yakalanmayan istisnalarda veya her ikisinde duraklatmayı seçebilirsiniz.

Ayrılma noktalarınızı yönetin: İlgili kesme noktası gruplarını genişletin ve alakalı öğelere odaklanmak için diğerlerini daraltın

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

Kesme noktaları birden fazla dosyaya yayılmış olabilir. Kesme 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 geçerli hata ayıklama oturumunuz için önemli olanlara odaklanın.

Ayrılma noktalarınızı yönetin: Koda atlamak, ayrılma noktalarını kaldırmak veya etkinleştirmek/devre dışı bırakmak için tek bir tıklama

Kesme noktası kenar çubuğu, sık gerçekleştirilen görevleri tek tıklamayla gerçekleştirmenize olanak tanır. Aşağıda, şu işlemleri nasıl yapabileceğinize dair bir genel bakış sunulmuştur:

Kod Düzenleyici'de ayrılma noktası konumuna gidin. Dosya içindeki bir ayrılma noktasını veya tüm ayrılma noktalarını kaldırın. Dosya içindeki bir ayrılma noktasını veya tüm kesme noktalarını etkinleştirin ya da devre dışı bırakın.

Üstelik tüm bunları tek tıkla! Elbette bu seçenekler içerik menüsünde de mevcuttur:

Kesme noktası kod snippet'ini tıklayarak ayrılma noktası konumuna gidin

Kod düzenleyicide kaynak kod konumuna gidin.

Ayrılma noktanızı kodun neresinde ayarladığınızı kontrol etmek ve etrafındaki kodu analiz etmek ister misiniz? Kenar çubuğundaki ayrılma noktasının kod snippet'ini tıkladığınızda kod konumu kod düzenleyicide açılır.

Kaldır düğmesini tıklayarak bir dosya içindeki tek bir ayrılma noktasını veya tüm kesme noktalarını kaldırın

Dosya içindeki tek bir ayrılma noktasını veya tüm kesme noktalarını kaldırabilirsiniz.

Tıklandığında bir dosyadaki ayrılma noktalarının birini veya tümünü kaldıran bir kaldırma düğmesinin görünmesi için fareyle bir ayrılma noktasının veya ayrılma noktası grubunun üzerine gelin.

Dosya içindeki bir kesme noktasını veya tüm kesme noktalarını devre dışı bırakma

Dosya içindeki bir kesme noktasını veya tüm kesme noktalarını etkinleştirin ya da devre dışı bırakın.

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

Bir dosyadaki tüm kesme noktalarını etkinleştirmek veya devre dışı bırakmak için fareyle 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 şu kesme noktası özelliklerinden yararlanın: koşullu kesme noktaları ve günlük noktaları

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

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

Fareyle bir ayrılma noktasının üzerine gelip görünen düzenle düğmesini tıklayarak bir ayrılma 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, kesme noktası düzenleme iletişim kutusunu açmak için kod düzenleyicide ayrılma noktası satırını seçip Linux'ta Control+Alt+b, Mac'te Command+Alt+b tuşlarına basın.

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

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

Sonuç

Ayrılma noktası kenar çubuğunun yeniden tasarımının ardındaki amacımız, ayrılma noktalarıyla hata ayıklamayı kolaylaştırmaktı. En önemlisi, her şeyi daha yapılandırılmış ve kolay erişilebilir ve anlaşılır hale getirmeyi amaçladık. Bu iyileştirmelerin bir sonraki hata ayıklama oturumunuzda size yardımcı olacağını umuyoruz.

Daha fazla iyileştirme için önerileriniz varsa hata bildiriminde bulunarak bize bildirin!

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.