PhpStorm ile JavaScript ve PHP'de aynı anda hata ayıklama

Geçen Temmuz'da Delicious Brains ile başladığımdan beri, PhpStorm'un büyük bir hayranı oldum. Gerçekten arının dizleri. Tüm özelliklerin üzerinden geçmeyeceğim, ancak günlük olarak yararlı bulduğum şeylerden bazıları:

• Cmd+yöntem tanımlarına tıklama
• VCS entegrasyonu ve kod değişikliklerinin renkle vurgulanması
• Kod yer imleri
• Ve elbette, Xdebug entegrasyonu

Bu yazıda, Iain'in PhpStorm ve Xdebug ile zaten kapsadığı şeyleri genişletmek ve size JavaScript hata ayıklama becerilerinizi PhpStorm ile nasıl geliştireceğinizi göstermek istiyorum. Hadi hadi bakalım!

PhpStorm Hata Ayıklayıcıyı Neden Kullanmalı?

Kendinizi hiç karmaşık bir JavaScript dosyası veya yöntemiyle buldunuz mu ve komut dosyasının yürütülmesi sırasında bir noktada bir değişkenin değerini bilmeniz mi gerekiyordu? Bildiğim kadarıyla, özellikle yeni bir kod tabanını veya işlevi 'groklarken'. Normalde yapacağım şey, bir değeri bilmek istediğim noktada bir console.log() çağrısında sıkışmak ve neyin ne olduğunu görmek için Chrome'un konsolunu çalıştırmak.

Bu yöntemle ilgili sorun, WP Migrate DB Pro'da yaptığımız gibi derleme araçlarını kullandığınızda ortaya çıkar. Çıktınızı görmek için derleme görevinin tamamlanmasını beklemeniz gerekir – günün değerli saniyelerini kaybedersiniz. Ayrıca JavaScript kodunuzu görüntülemenin oldukça basit bir yoludur ve size tam resmi vermez.

Chrome, geliştirici konsolunda yerleşik olarak iyi bir hata ayıklayıcıya sahiptir. Ancak, benim için IDE'mde olmayan harici bir hata ayıklayıcı kullanmak her zaman ayrık hissettirdi. Geçmişte Chrome hata ayıklayıcısını kullandım ancak birkaç nedenden dolayı PhpStorm hata ayıklayıcısını tercih ediyorum.

PhpStorm hata ayıklayıcısının ilk avantajı, hata ayıklama başlamadan önce çalıştırılacak görevleri veya komut dosyalarını tanımlamanıza izin vermesidir. Komut dosyalarınızı derleyen bir homurdanma veya yutkunma göreviniz varsa, bu yararlı bir eklemedir.

İkinci avantaj, PhpStorm hata ayıklayıcı ile sayfa yenilemeleri arasında güvenilir bir şekilde kaydedilen kesme noktalarına sahip olmaktır. Bir komut dosyası etiketinde URL'ye eklenen bir önbellek bozma dizesi varsa, Chrome hata ayıklayıcı sayfa yüklemeleri arasında kesme noktaları kaydetmez. Rastgele dizeyi kaldırmak ve/veya komut dosyalarınız için kaynak haritaları ayarlamak bu konuda yardımcı olabilir, ancak bu her zaman mümkün değildir.

Son olarak, PhpStorm JavaScript hata ayıklayıcısının en büyük avantajı, Xdebug PHP hata ayıklayıcı ile entegrasyonudur. Yakında göreceğimiz gibi, hem JavaScript hem de PHP aynı oturum sırasında hata ayıklanabilir.

Kurulum

Yapmak isteyeceğiniz ilk şey, JavaScript hata ayıklayıcısını yapılandırmayla ilgili Jetbrains belgelerine göz atmak. İşleri başlatmak ve çalıştırmak için gereken ana adımların üzerinden geçer.

Bir sonraki yapmak isteyeceğiniz şey, Chrome web tarayıcısını kullandığınızdan emin olmaktır. Bir Firefox yapılandırması da olsa, işler en iyi Chrome ile çalışıyor gibi görünüyor. Ardından, Chrome ve PhpStorm'un birbirleriyle konuşabilmesi için Jetbrains Chrome uzantısını yüklemeniz gerekir.

Bu yazının amaçları doğrultusunda, yerel geliştirme sitelerimin tümü ayrı yerel etki alanları kullandığından ve PhpStorm'a göre bunlar 'uzak' olduğundan Uzaktan Hata Ayıklama'yı gözden geçireceğiz. Biraz kafa karıştırıcı, ancak en iyi başarıyı uzak sunucu talimatlarını izleyerek elde ettim.

JavaScript'te uzaktan hata ayıklamayı etkinleştirmek için kalıcı bir hata ayıklama yapılandırması oluşturmanız gerekir. Bunu yapmak için, üst menü çubuğundaki “Çalıştır” a tıklayalım ve ardından “Yapılandırmaları Düzenle” ye tıklayalım. “+” düğmesine tıklayarak ve “JavaScript Debug” öğesini seçerek başlayacağız.

Bu ekranda, bu hata ayıklama yapılandırması için adımızı gireceğiz ve bir başlangıç ​​URL'si seçeceğiz. WP Migrate DB Pro yönetici sayfasını kullanıyorum, ancak kendi kurulumunuz için bir ön uç URL'yi kolayca kullanabilirsiniz.

Ayrıca, URL şu anda açık olan PHPStorm projesiyle eşleşiyorsa, çalışmaya başlamak için ihtiyacınız olan tek şey bu olmalıdır! Aksi takdirde, hata ayıklama yapılandırmasının "Uzak URL" bölümünü kullanarak mevcut projenize bir etki alanı veya URL eşleyebilirsiniz.

hata ayıklama

Her şey yolunda giderse, şimdi biraz JavaScript'te hata ayıklamak için hazır olmalıyız. Bunu yapmak için bazı kesme noktaları kullanmamız gerekecek. Burada dikkat edilmesi gereken gerçekten önemli bir nokta, kesme noktalarınızın tarayıcının yüklediği JavaScript dosyalarına yerleştirilmesi gerektiğidir. İş akışınızda bir derleme aracı kullanmıyorsanız, hazırsınız demektir.

Ancak, bir derleme aracı (Grunt, Gulp veya Webpack gibi) kullanıyorsanız, kesme noktalarınızın derleme işlemi tarafından çıkarılan dosyalarda olduğundan emin olmanız gerekir. Bu nedenle, varlıklarınızın depolandığı bir /dist klasörünüz varsa, kesme noktalarının kaynak JS dosyalarında değil bu dosyalarda olduğundan emin olun.

Geliştirme sırasında yerleşik dosyalarınızı yerel olarak küçültmekten kaçınmak ve son bir 'oluşturma' adımı için küçültmeyi kaydetmek isteyeceğinizi unutmamak önemlidir.

Alternatif olarak, oluşturma işleminizde kaynak haritaları etkinleştirdiyseniz, kesme noktalarınızı doğrudan kaynak JavaScript dosyalarınıza ekleyebilirsiniz. WebStorm/PhpStorm ve Browserify'ın satır içi kaynak haritalarıyla ilgili bir sorun var, ancak bir geçici çözüm var.

Bizim durumumuzda, WordPress' SCRIPT_DEBUG etkinken, küçültülmemiş yerleşik dosyaları yükleyebiliriz. Bu da sizin için bir seçenek olabilir.

Ayrıca, hata ayıklarken PhpStorm'un Chrome'un geliştirici konsolunu esas olarak devraldığını da belirtmeliyim. Bu, kodu çalıştırdığınız sekmede Chrome konsolu açıksa hata ayıklayıcının çalışmadığı anlamına gelir. Küçük bir sorun, ama beni birkaç kez yakaladı.

kesme noktaları

Artık kesme noktalarımızı nereye koyacağımızı bildiğimize göre, biraz ekleyelim. PhpStorm'da, kırmak istediğimiz bir satırda kenar boşluğuna tıklamak kadar basit. Kesme noktaları için birkaç başka seçenek daha var, ancak bizim amacımız için normal bir satır kesme noktası kullanacağız.

Kesme noktalarımızı ayarladıktan sonra, üst menü çubuğundaki veya "Çalıştır" menüsü > Hata Ayıkla altındaki "hata" simgesine tıklayacağız. Bu, Chrome'u en üstte "JetBrains IDE Desteği bu tarayıcıda hata ayıklıyor" yazan sarı bir çubukla açmalıdır. Tarayıcıda bir kesme noktası ile işaretlenmiş kodu tetikleyen bir şey yaptığınızda, hata ayıklayıcı açıkken PhpStorm'a yeniden başlatılırsınız.

Hata ayıklama konsolunda, Xdebug PHP hata ayıklama ile elde ettiğiniz tüm favori hata ayıklama araçlarına ve aynı zamanda eşzamansız kod hatalarını ayıklamak için yeni bir araca sahip olacaksınız. Bu, hata ayıklama panelindeki 'Async' onay kutusuyla değiştirilebilir. Bu küçük adam asenkron koda geçmenize izin verecek. Bu onay kutusuna tıklamak, AJAX veya setTimeout() çağrısı gibi bir şey olsun, zaman uyumsuz geri çağırma içinden tüm çağrı yığınına erişmenizi sağlayacaktır.

WP Migrate DB Pro'nun Medya Dosyaları Eklentisi için JavaScript'te hata ayıklarken bu benim için kullanışlı oldu. 'Push' geçişi sırasında büyük dosyaların nasıl işlendiğini araştırıyordum ve mantığı birkaç satır JavaScript'e indirdim. Yeni bulunan JS hata ayıklama araçlarımla bazı kırılma noktaları belirledim ve işe koyuldum.

Oradan if ifadesinin her bir bölümünün nasıl ve ne zaman tetiklendiğini görebildim.

Diğer Aletler

Bir başka kullanışlı araç da PhpStorm'un yerleşik “saatler” işlevidir. Bu, kodunuzdaki izlenecek öğeleri ayarlamanıza olanak tanır – bu, hata ayıklayıcının bu öğenin değerini saatler bölmesinde göstereceği anlamına gelir. Bu, normalde bir console.log çağrısıyla çıkaracağınız şeyler için yararlıdır, çünkü esasen yaptığı budur, kesme noktaları tetiklendiğinde izlenen değişkenin değerini verir. Hata ayıklayıcıyı her yeniden başlattığınızda hata ayıklama panelindeki değişkeni takip ederken size zaman kazandırdığı için faydalıdır.

Yukarıdaki örnekte, kesme noktaları tetiklendiğinde ona hızlı erişim sağlayabilmek için wpmdb global değişkenini izliyordum.

PhpStorm hata ayıklayıcısının oldukça sık kullandığım bir başka hilesi de “Evaluate Expression” aracıdır. Bu araçla, o anda duraklatılmış koda göre değerleri inceleyebilir ve hesaplayabilirsiniz.

Yukarıdaki örnekte, AJAX çağrısının bir jQuery AJAX başarılı geri aramasında bir data değişkeni döndürdüğünü gördüm. Ancak, döndürülen veriler bir JSON dizesiydi ve güzel bir şekilde biçimlendirilmesini istedim. "Evaluate Expression" aracıyla, jQuery $.parseJSON() yöntemini kullanarak, daha fazla inceleme için biçimlendirilmiş bir JavaScript nesnesinin çıktısını alabilirim. Bu araç, PHP Xdebug hata ayıklayıcısını kullandığınızda da kullanılabilir.

Xdebug ile entegrasyon

Son olarak, PhpStorm hata ayıklayıcısının en harika yönü olduğunu düşündüğüm bir özelliği daha ele almak istiyorum – aynı hata ayıklama oturumu sırasında JavaScript kodunuzda ve PHP kodunuzda hata ayıklama yeteneği. Bir değeri ön uç JavaScript'ten arka uç PHP'ye aktarılırken izleyebilirsiniz. Bu, özellikle AJAX çağrıları ve arka uç işleyicileri ile başa çıkmak için yararlıdır.

Örneğin, AJAX aracılığıyla PHP arka ucunuza bazı değerler gönderdiğinizi ve bunların bozuk olduğunu varsayalım. Değerleri sunucuya gönderilmeden önce incelemek ve ardından sunucu bunları alır almaz incelemek için JavaScript'inizde bazı kesme noktaları ayarlayabilirsiniz.

JavaScript değerlerini incelemek için Chrome hata ayıklayıcısını kesinlikle kullanabilseniz de, değerleri yorumlandıkça incelemek için PhpStorm'a geri dönmeniz gerekir. Entegre PhpStorm hata ayıklayıcı tarafından sağlanan sorunsuzluk, hata ayıklama sırasında IDE'nizden ayrılmanız gerekmediğinden son derece yararlıdır.

Hem JS'nizde hem de PHP'nizde hata ayıklamak için, Xdebug'un zaten etkinleştirilmiş olması ve PHP ve PhpStorm ile kurulum yapmanız gerekir. Bunu burada ele almayacağım, ancak MAMP ile çalışmaya başlamanızı sağlayacak güzel bir gönderi var.

PHP'nin Xdebug'u çalıştıracak şekilde yapılandırıldığını varsayarsak, PHP Xdebug bağlantılarını dinlemeye başlamak için "telefon" simgesine tıklamanız gerekir. Bundan sonra, “hata” simgesine tıklayarak JavaScript hata ayıklamasını başlatın. Bu senaryoda, daha önce oluşturduğumuz kaydedilmiş Javascript hata ayıklama profiliyle PhpStorm'un “Sıfır Yapılandırma Web Hata Ayıklama” özelliğini kullanıyoruz.

PhpStorm'un Xdebug bağlantılarını dinlemesinin yanı sıra JavaScript hata ayıklamasını başlattıktan sonra, hazırsınız demektir. PHP kodunuzda kesme noktalarınız varsa, bunlar program yürütülürken vurulduklarında tetiklenir. Hata ayıklama panelinin üzerindeki iki sekmeye tıklayarak JavaScript hata ayıklama ve PHP hata ayıklama arasında geçiş yapabilirsiniz.

Yüzeyi kazımak

Ve bu, PhpStorm'daki bazı JavaScript hata ayıklama işlevlerini özetler. PHP için Xdebug ile birleştiğinde, hata ayıklamaya ve karmaşık kodun içine kazmaya yardımcı olan güçlü bir kombinasyondur. Bu, PhpStorm hata ayıklayıcısının yapabileceklerinin yalnızca bir kısmı, ancak umarım sizi denemeye teşvik eder!

PhpStorm hata ayıklayıcısını kullanıyor musunuz? Karmaşık JavaScript kodunda hata ayıklamak için kullandığınız bazı yollar nelerdir? Yorumlarda bize bildirin!