VueJs Devtools Kurulumu

VueJs Devtools Kurulumu

Merhaba arkadaşlar, öncelik olarak Vue.js hakkında yazmış olduğum, iki yazıya gelen güzel ve olumlu tepkiler için herkese teşekkür ediyorum. Bu yazımda Vue.js’yi daha etkili kullanmamız ve incelememiz için Google Chrome uygulaması VueJs Devtools hakkında bilgiler vereceğim.

VueJs Devtools Nedir?

Yazmış olduğumuz VueJs kodladımızı debug etmemize yardımcı bir Google Chrome uygulamasıdır. Yani, yazmış olduğumuz Vue kodunda hata olup olmadığını, eğer hata varsa nerede olduğunu göstermek için kullanılır. Tabii ki sadece hatalar için değil, çalıştığında döndürdüğü verileri ve değerleri de inceleme bakımın bize büyük kolaylık sağlayacaktır. Vue.js Devtools’u Google Chrome üzerine kurarak kullanabilirsiniz.

Nasıl Kurulur?

Google Chrome tarayıcınızdan Ayarlar > Uzantılar kısmının en altında Daha fazla uzantı edinin bölümüne tıklayabilirsiniz. Açılan Chrome Web Mağazası’nda arama bölümüne VueJs Devtools yazarak arama yapmanız yeterli olacaktır.

Google Chrome Web Mağazası – VueJs Webtools

Eklentimizi bulduğumuz zaman, sağ üst tarafta bulunan Chrome’a Ekle butonuna basmamız gerekiyor.

VueJs Devtools kullanımı.

Açılan kutucuk içerisinde kurmak istediğimiz uygulamaya onay vermemiz gerekmektedir. Bunun için Uzantı Ekle butonuna basıp eklentimizin tarayıcımız üzerine kurulmasına izin verebiliriz.

 

 

VueJs Devtools kullanımı.

Kurulumu yaptık. Bitirdik ve Chrome tarayıcımız da sağ tarafta Vue sembolünü gördük.

 

 

 

 

Şuana kadar her şey sorunsuz gerçekleştiyse ve Vue.js ikonunu gördüyseniz eğer tebrikler, kurulumu başarı ile tamamladınız.

Bundan sonra ki aşamamız artık kurmuş olduğumuz eklentiyi Vue.js yazılmış bir sayfa da test etmek olacaktır. Ben bu yazıyı hazırlamak ve göstermek için ufak ufak bir Vue.js kodu yazdım. Bu kod VueJs Öğreniyorum : Giriş yazısını okuyan arkadaşlara yabancı  gelmeyecektir.

Kodumu paylaşıyorum, siz de deneyebilirsiniz. Ama bence kendiniz elle yazmanız daha sağlıklı olacaktır. En azından öğrenmeniz bakımından.

Yazmış olduğumuz kodları index.html adında kayıt edelim ve Chrome’da çalıştıralım. Ekrana “Merhaba Vue!” yazısı gelmişse kodlarımız başarılı bir şekilde çalışmış demektir. Peki eklediğimiz uzantıyı kontrol edelim. Hala gri ve soluk renkte değil mi? Üstüne tıklayıp aktif etmeyi deneyelim. Aşağıda ki resimde görüldüğü gibi bir hata almanız mümkün. “Vue.js not detected“.

VueJs Devtools kullanımı.

Vue.js Devtools Nasıl Aktif Edilir?

Bunun nedeni de eklentimizi kurduk fakat aktifleştirme yapmadık. Gerekli izinleri vermedik. Bunun için yine Chrome içerisinde Ayarlar > Uzantılar bölümüne girip kurmuş olduğumuz eklentinin altında bulunan “Dosya URL’lerine erişim izni ver” kutusunu işaretlememiz gerekiyor ki eklenti sayfalarımızı okuyabilsin.

VueJs Devtools kullanımı.

Bu işlemlerimizi yaptığımız zaman tarayıcımızı kapatıp tekrar tekrar açarsak yani baştan başlatırsak kaydetmiş olduğumuz index.html örnek dosyamızı açtığımızda Vue ikonunun bu sefer renkli olduğunu göreceğiz. Bu da sayfamız da Vue.js kullanıldığını ve bunu algıladığını anlamına gelmektedir. İsterseniz üstüne birlikte tıklayıp görelim.

VueJs Devtools kullanımı.

Sayfamız da Vue.js algılandığını ve Google Chrome Devtools‘u kullanmamızı istiyor. Chrome’nun devtools’una erişmek için klavyenizden F12 tuşuna basmanız yeterli olacaktır. Yada sayfa üzerinde link yada resim olmayan boş bir alanda sağ tuş tıklayıp “İncele” demeniz de aynı işi görecektir.

Chrome Devtools’u çalıştırdığımız zaman en son sekmeye Vue adına da bir sekme eklendiğini görebiliriz. İşte bütün debug ve bilgilerin kontrolünü buradan sağlayacağız.

VueJs Devtools kullanımı.

Görmüş olduğunuz gibi yazmış olduğunuz vue.js koduna name: ‘Ahmet’ kod parçacığını kullanarak Ahmet ismini vermiştik. Ve bize sayfamız da Ahmet isminde bir Vue app olduğunu söylemekte. Bu Ahmet isimli app’e tıkladığımız zaman sağ tarafında yazmış olduğumuz app’in içeriğini almış olduğu değerleri yani dataları görmeniz mümkün olacaktır. Bu sayede kolayca debug ve sağlama yapabilirsiniz.

VueJs Devtools kullanımı.

Evet arkadaşlar, bir yazının daha sonuna geldik. Umarım faydalı bir yazı olmuştur. Chrome uygulamasını kurmayı bu kadar detaylı anlatmaya ne gerek vardı diyen arkadaşlarımız da olacaktır evet ama eminim ki bu işe merak salan ve daha önce kurmamış olan arkadaşlarımız da olacaktır. O yüzden elimden geldikçe yazılarımı yazarken detaylı yazmaya özen göstermeye çalışıyorum. Unutmayın arkadaşlar bilgi paylaştıkça çoğalır.

Bir sonra ki VueJs Öğreniyorum serisi yazımda görüşmek üzere.

Ahmet Kaplan

1987, İstanbul doğumlu. Front-End Developer.

Son Yazılar
Bir cevap bırakın

Güvenlik *