SPFx Debugging

Her yazılım projesinde olduğu gibi SharePoint Framework üzerinde uygulama geliştirirken de ihtiyaç duyacağımız ana konulardan bir tanesi debug. Microsoft’un da belirttiği üzere SPFx projeleri geliştirmek için en ideal kod editörü olarak Visual Studio Code’u göstermek mümkün. Bu nedenle bende bu yazıda Visual Studio Code kullanarak SPFx projelerinizi nasıl debug edebileceğiniz üzerinde durmaya çalışacağım.

Debug işlemi için en ideal ve basit çözüm Google Chrome web tarayıcısı ile çalışmak. Bu nedenle öncelikle Google Chrome’u aşağıdaki adresten indirmenizi ve kurmanızı öneriyorum.

https://www.google.com/chrome/browser/desktop/index.html

Sonrasında çalışacağımız editör olan Visual Studio Code içerisindeki extensions bölümünden Debugger for Chrome eklentisini indirmenizi ve kurmanız gerekecek. Bu işlem için Visual Studio Code içerisinde yer alan en sol menüdeki en altta yer alan Extensions (Ctrl + Shift + X) bölümünü tıklamanız ve “Debugger for Chrome” etiketini arayarak yüklemeniz gerekiyor.

Yükleme sonrası ekranında yönlendirmesi ile Visual Studio Code’u yeniden yüklemeniz gerekecek. Bunun için “Reload” butonunu kullanabilirsiniz.

Local Workbench Projenizin Debug Edilmesi

Visual Studio Code içerisinde sol bölümdeki “Debug” panelini aktive edin. Bu bölümde henüz bir debug konfigürasyonunuz olmadığından profil seçimi yapabileceğiniz kısmı boş olarak göreceksiniz.

Bu bölümde “No configuration” yazan kısmı tıklayarak Google Chrome için debug konfigürasyonu oluşturma yolunu seçin. Ardından oluşacak launch.json dosyasının içeriğini intellisense yardımıyla siz doldurabileceğiniz gibi local Workbench için aşağıdaki konfigürasyon bölümü ile değiştirebilirsinizde.

Dilerseniz aynı adımları tekrar uygulayarak local Workbench yerine hosted ortamdaki SharePoint platformunuz için de ayrı bir debug profili ekleyebilirsiniz. Bu durumda aşağıdaki örnekte geçen url parametresini kendi ortamınıza göre düzenlemeniz gerekecektir.

Bu konfigürasyonlar sonrası debug işlemine başlamak için tek yapılması gereken launch.js içindeyken önce hosted veya local şeklinde debug ortamını seçmek ve ardından debug işlemini başlatmak. Yeni bir pencere içinde uygulamanız debug modda açılacak ve breakpointleriniz işleme alınacaktır.

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked


This site uses Akismet to reduce spam. Learn how your comment data is processed.