Geliştirici İpuçları – Uzak JavaScript Dosyalarını Nasıl Engeller ve Bunları Yerel Sürümlerle Değiştirir

Nuria Adell tarafından çevrilmiştir.

Bunu tekrar etmekten bıkmayacağım. Web geliştirme dünyası, ne kadar deneyimli olursanız olun, herhangi bir örneğin işinizi berbat edebileceği bir ormandır. Eğer yaptığın buysa, neden bahsettiğimi anlayacaksın. Kötülük yapmak göründüğünden daha kolaydır. Ve ne yazık ki, Nelio'da, üçüncü tarafların kötü uygulamaları nedeniyle eklentilerimizin çalışmayı bıraktığı, istediğimizden daha fazla durumla zaten karşılaştık.

WordPress için eklentiler geliştirirseniz günümüzde bulabileceğiniz en yaygın sorunlardan biri JavaScript'in kötüye kullanılmasıdır . Pek çok "geliştirici" (bir şekilde zarif olarak adlandırmak için) WordPress kurallarına uymuyor. Ve beklenmedik sürprizler bulabilirsiniz. Veya daha da kötüsü, müşterileriniz onları bulacak mı?

Bu makalede, bir sabahı Nelio Content müşterisinin yaşadığı sorunu araştırarak geçirdiğimizi ve tüm süreci kolaylaştıran bir Google Chrome ve Opera uzantısı sayesinde bu sorunu nasıl çözmeyi başardığımızı açıklayacağım.

"Düşmanca bir ortamda" JavaScript sorunlarını araştırmak

Hikaye her zamanki gibi başlıyor: Bir müşteri, Nelio İçeriğiyle ilgili sorunları olduğu için destek sistemimiz aracılığıyla bizimle iletişime geçti. Özellikle sorun, Nelio Content'in sağladığı analizlerle ilgiliydi. Kurulumunda, Nelio Content'in analiz sayfası sonsuz şekilde yükleniyor ve başka bir şey göstermiyordu.

WordPress'ine erişim talebinde bulunduktan (müşterilerinizin kurulumlarına erişmek her zaman kolay değildir) ve hatayı kendimiz kontrol ettikten sonra, gerçekten de komut dosyalarımızla ilgili bir sorun olduğunu gördük. Ama çok garip bir problemdi. Görünüşe göre, fonksiyonlara sonsuz bir çağrı döngüsümüz vardı. Yalnızca olaylara yanıt olarak yürütülen işlevler. Yani, bir şekilde, olaylar hiçbir anlam ifade etmeden defalarca üretiliyordu.

Bir müşterinin kurulumunda bu tür sorunları araştırmak cehennemdir. Ayrıca, yerel geliştirme kurulumlarımızda sorunu yeniden oluşturamadık. Dolayısıyla JavaScript kodumuzda yapmamız gereken her değişiklik, onu geliştirme kurulumumuzda test etmemiz, eklentinin yeni bir sürümünü (bir .zip dosyası) hazırlamamız, müşterinin web sitesinde yüklenen sürümü devre dışı bırakmamız ve silmemiz gerektiği anlamına geliyordu. oradaki yeni sürümü ve sonunda etkinleştirin ve sorunu çözüp çözmediğimizi görün.

FTP veya SSH erişimi alırsanız her şeyin basitleştirildiği açıktır, ancak durum böyle değildi. Her zaman testin düz seyir olduğu bir ortama sahip olamayacaksınız. Dolayısıyla yaptığımız her test üretkenliğimizi ve sabrımızı mahvetti. Ayrıca, sorunun nerede olduğunu gösteren hiçbir şey yoktu. Neyi yanlış yapıyorduk?! Küçük ampul yanana kadar…

Ya eklentimizle ilgili sorununuz gerçekten eklentimizle ilgili bir sorun değilse? Sayfamıza bir şeyler koyan ve her şeyi alt üst eden başka bir eklenti olabilir mi? Araştıralım…

Bildiğiniz gibi, bir WordPress eklentisi WordPress Dashboard'da özel bir sayfa tanımlıyorsa, bu sayfa (genellikle eklenti menüsünden erişilebilir) eklentiye aittir ve hiç kimse oraya herhangi bir JavaScript veya CSS stili koymamalıdır. Standartlar bunu söylüyor ama gerçek ne yazık ki çok farklı.

Müşterimizin WordPress kurulumunda, Nelio Software analiz sayfasında, eklentimizin parçası olmayan 10'dan fazla JavaScript dosyası bulduk. Bu sayfanın özel olduğunu unutmayın, bu nedenle Nelio Content dışında hiç kimse oraya bir şey koymamalı mı?

Bu durumlarda, genellikle etkin eklentileri devre dışı bırakır ve sorunun yalnızca Nelio İçeriğini etkin hale getirerek çözülüp çözülmediğini görürsünüz. Oradan, her şey çalışırsa, hangisinin sizinkini bozduğunu görmek için bir seferde bir eklentiyi etkinleştirirsiniz. Ancak üretimde bir WordPress kurulumunun önündeyken bunu pervasızca yapamazsınız veya eklentileri devre dışı bırakarak müşterinizin web sitesini çökertebilirsiniz.

Neyse ki, sonunda çözümü bulduk.

Interception uzantısı, komut dosyalarını ve stilleri kendinizinkiyle değiştirmenize olanak tanır. Ayrıca hem Google Chrome'da hem de Opera'da çalışır. Buraya bir göz atın. Ve arayüzü çok basit:

Uzak bir dosyanın URL'sini yazmanız ve başka bir URL ile değiştirmeniz yeterlidir. Bu şekilde, Nelio Content'in analitik sayfasının kaynak kodunu keşfederek, WordPress'ten olmayan veya Nelio Content tarafından yazılan JavaScript dosyalarının tüm yollarını bulabiliriz.

Bu URL'leri bulduktan sonra (bizim durumumuzda 10'dan fazla), bunları Interception uzantısına koyabilir ve yerel kurulumunuzdan bir URL ile değiştirmelerini sağlayabilirsiniz. Böyle bir şeyle sonuçlandık:

Tüm URL'lerin, belirli bir JavaScript'e işaret eden yerel URL'lerle değiştirildiğini görebilirsiniz (yukarıdaki ekran görüntüsünde empty.js ). Bu JavaScript, diğer JavaScript'leri (haydi ele geçirilmiş diyelim) “devre dışı bırakmak” için içeride hiçbir şey yapmaz. Orijinal senaryoların bu sayfalarda olmaması gerektiğinden, başarısız olan şeyler hakkında endişelenmenize gerek yok.

Bunu yaptıktan sonra, bu komut dosyalarının içeriğinin empty.js dosyanızla değiştirildiğini göreceksiniz. Tarayıcı geliştiricisinin konsoluna bakarak kontrol edebilirsiniz:

Artık tarayıcınızda çakışan komut dosyalarını engellediğinize ve bunları yerel olarak "devre dışı bıraktığınıza" göre (bunun yalnızca tarayıcınızda gerçekleştiğini, istemcinizin yüklemesinin hala her zamanki gibi çalıştığını unutmayın), eklentinizin çalışıp çalışmadığını kontrol edebilirsiniz. Bizim durumumuzda sorun ortadan kalktı, bu yüzden geriye kalan tek şey hangi eklentinin neden olduğunu bulmaktı.

Bunun için Interception'ın değiştirme kurallarını tek tek ortadan kaldırmanız ve sorunun ne zaman tekrar ortaya çıkacağını görmek için test etmeniz yeterlidir. Başka bir eklentinin JavaScript'inin sizinkini bozduğunu bulduğunuzda, suçlusunuz.

Müşterimizin durumunda, nedensel eklenti , WordPress'in tüm sayfalarına ayrım gözetmeksizin bir JavaScript ekledi. Bu JavaScript aynı zamanda seçicilere anlamsız bir şekilde olaylar atıyordu, bu yüzden Nelio Content'in analiz sayfasının filtrelerini çılgına çevirdi.

Sorunlara neden olan eklentinin geliştiricileriyle ( WordPress dizininde olmayan, ancak harici bir web sitesinde satılan WP Social Traffic PRO) çeşitli yollarla iletişime geçtik, ancak herhangi bir yanıt almadık. İstemciye sorun bildirildi ve yalnızca Nelio Content'i değil, seçicilere sahip diğer eklentileri de bozabileceğinden, çakışan eklentiyi devre dışı bırakması istendi.

Ve şimdiye kadar, Interception sayesinde bir çözüm bulana kadar Nelio'da bir sabahı nasıl geçirdiğimizin hikayesi.

Sonuçlar

WordPress için her eklenti , yalnızca JavaScript dosyalarını ve CSS stillerini kendi sayfalarına veya yaygın WordPress sayfalarına yerleştirmelidir. Ortak sayfaya bir örnek, gönderileri düzenleme sayfasıdır. Oraya bir CSS veya JavaScript koyacaksanız, başkalarının işini bozabileceğinizi unutmayın. Dikkatli olun ve sorumlu olun.

Ne yazık ki, birçok eklenti önceki kuralı sebepsiz yere atlıyor. Çoğu zaman bu, geliştiricilerin cehaletinden veya deneyimsizliğinden kaynaklanır. En azından ben böyle düşünmek istiyorum. Bir WordPress geliştiricisiyseniz, lütfen Eklenti El Kitabını okuyun. Cidden, yap. Linki buraya bir kez daha bırakıyorum.

Bir müşterinin bir sorunu olduğunda, hata yaptığımızı düşünmeye ve yanlış yaptığımız şeyi bulmaya çok fazla odaklanmaya meyilliyiz. Bu, en azından benim durumumda çok sık yapmaya meyilli olduğum hatalardan biri. Ve bazen, size anlattığım hikayede olduğu gibi, bu başka birinin hatasıdır. Buna daha önce baksaydık, çözümü çok daha erken bulurduk. Elbette, hataların asla sizin suçunuz olmadığını düşünerek fazla ileri gitmeyin. Bunun olduğunu unutmayın ve üretkenliğinizi artırmaya çalışmak için kontrol edin.

Bir müşteri olarak, WordPress'inize yüklediğiniz eklentileri nereden edindiğiniz konusunda dikkatli olun. Önceden bilgi aramaya çalışın ve kaynağın güvenilir olduğunu ve geliştiricinin deneyimli olduğunu doğrulayın. Aksi takdirde riske girersiniz. WordPress eklenti dizini genellikle bakılacak en iyi yerdir. Ancak bu, orada da şüpheli kalitede eklentiler bulamayacağınız anlamına gelmez. Yine, dikkatli ol.

Eklenti inceleme süreci, belirli otomatik kontrolleri içermelidir. Bu şekilde, stillerin ve komut dosyalarının ayrım gözetmeksizin kuyruğa alınmasını önleyebilirsiniz (veya en aza indirgeyebilirsiniz). Bu mümkün. Bunu istemekten bıkmayacağım. Tema incelemesi neden eklentilerden daha açık? Nelio'da WordPress eklentilerini inceleyerek katkıda bulunmayı çok isteriz.

Interception uzantısı kesinlikle harika. Bir geliştirici olarak her gün size yardımcı olabilecek bunun gibi daha fazla araç biliyorsanız, lütfen durumunuzu açıklayan bir yorum bırakmaktan çekinmeyin. Deneyimlerinizden öğrenmeyi çok isteriz.

Unsplash'ta Alexander Dummer'ın fotoğrafı .