Yeni komut düzenleyiciyle Chrome Geliştirici Araçları Protokolü (CDP) komutlarınızı verimli bir şekilde oluşturun

Hadrien Jaubert
Hadrien Jaubert

Chrome Geliştirici Araçları Protokolü (CDP), geliştiricilerin çalışan bir Chrome tarayıcısıyla iletişim kurmasını sağlayan uzaktan hata ayıklama protokolüdür (API). Chrome Geliştirici Araçları, tarayıcının durumunu incelemenize, davranışını kontrol etmenize ve hata ayıklama bilgilerini toplamanıza yardımcı olmak için CDP'yi kullanır. CDP kullanan Chrome uzantıları da oluşturabilirsiniz.

Örneğin, bu CDP komutu, ruleText ile belirli bir stil sayfasına location tarafından belirtilen konumda yeni bir kural ekler.styleSheetId

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

Protokol izleyici çekmece sekmesi, CDP istekleri göndermenize ve DevTools'un gönderip aldığı tüm CDP isteklerini ve yanıtlarını görüntülemenize olanak tanır.

Protokol İzleyici'nin alt kısmındaki komut satırı çubuğu.

Daha önce, özellikle de birçok parametresi olan komutları manuel olarak oluşturmak zordu. Yalnızca açılış ve kapanış parantezlerini ve tırnak işaretlerini dikkate almanız değil, komutun parametrelerini de hatırlamanız gerekiyordu. Bu da sizi CDP belgelerine bakmaya yönlendiriyordu.

Bu sorunu çözmek için DevTools, temel hedefleri şunlar olan yeni bir CDP düzenleyicisi kullanıma sundu:

  • Otomatik tamamlama komutları. Otomatik tamamlama özelliğiyle kullanılabilir komutların listesini sağlayarak CDP komut girişinizi basitleştirin.
  • Komut parametrelerini otomatik olarak doldurma. Mevcut komut parametrelerinin listesi için CDP dokümanlarını kontrol etme ihtiyacını azaltın.
  • Parametrenin yazılmasını basitleştirin. Göndermek istediğiniz parametrelerin değerlerini girmeniz yeterlidir.
  • Düzenleyip yeniden gönderin. CDP komutunu değiştirmeyi hızlandırarak prototip oluşturma hızını artırın.

Şimdi bu yeni düzenleyicinin sunduğu özelliklere ve bu düzenleyiciden nasıl yararlanabileceğinize göz atalım.

Otomatik tamamlama özelliği

Otomatik tamamlama açılır menüsü.

Komut giriş çubuğu artık otomatik tamamlama özelliğine sahiptir. Erişiminiz olan CDP komutlarının adlarını yazmanıza yardımcı olur. Bu, parametre kabul etmeyen komutlar için çok kullanışlı olabilir.

Dize ve sayı parametreleri

Bu yeni düzenleyiciyle artık ilkel parametrelerin değerlerini kolayca düzenleyebilirsiniz. Düzenleyiciyi açmak için komut girişinin yanındaki Sol paneli açın. simgesini tıklayın.

Komut adını girdikten sonra düzenleyici, ilgili parametreleri otomatik olarak gösterir. Hangi parametrelerin hangi komutlarla kullanıldığını öğrenmek için dokümanlara bakmanız gerekmez. Ayrıca düzenleyici, parametreleri belirli bir sırada gösterir: önce zorunlu olanlar (kırmızı renkte) ve ardından isteğe bağlı olanlar (mavi renkte).

İsteğe bağlı bir parametreye değer eklemek için fareyle parametrenin üzerine gelip + düğmesini tıklayın. Parametreyi "tanımlanmadı" olarak sıfırlamak için Varsayılan değere sıfırla düğmesini tıklayın.

+ ve "Varsayılan değere sıfırla" düğmeleri.

Aralık ve boole parametreleri

Liste veya boole parametrelerini düzenlerken, olası değerler (liste için) veya boole için basit doğru ya da yanlış seçeneğini sunan bir açılır menü görürsünüz. Bu özellik, enum parametreleri için yanlış değer girme olasılığını azaltır ve doğruluğu ve basitliği korur.

Boole ve enum açılır menüleri.

Dizi parametreleri

Dizi parametreleri için diziye manuel olarak değer ekleyebilirsiniz. Fareyle parametrenin satırının üzerine gelip + düğmesini tıklayın.

Dizi öğesi ekleyen + düğmesi.

Dizi öğelerini tek tek silmek için öğelerin yanındaki çöp kutusu düğmesini tıklayın. Engelle düğmesini kullanarak dizideki tüm parametreleri de temizleyebilirsiniz. Bu durumda dizi parametresi [] olarak sıfırlanır.

"Parametreyi sil" ve "Varsayılana sıfırla" düğmeleri.

Nesne parametreleri

Nesne parametrelerini kabul eden bir komut girdiğinizde düzenleyici bu nesnenin anahtarlarını listeler ve değerlerini doğrudan düzenleyebilirsiniz. Bu, tüm iç içe geçmiş parametre türleri için geçerlidir.

İç içe yerleştirilmiş parametreler.

Düzenleyicide komutun ve parametrelerin ne yaptığını öğrenme

Bir parametrenin veya komutun amacından emin olmadığınız oldu mu? Artık fareyle bir komutun veya parametrenin üzerine geldiğinizde, online dokümanların bağlantısını içeren açıklayıcı bir ipucu gösterilir.

Fareyle bir komutun üzerine geldiğinizde görünen açıklayıcı ipucu.

Yanlış parametreler göndermeden önce uyarı alma

Daha önce, bir parametrenin değerinin doğru türde olup olmadığını bilmiyorsanız ve hata yanıtını okumak için beklemek zorunda kalıyorsanız bu yeni düzenleyici tam size göre. Parametre girdiğiniz değeri kabul edemiyorsa anlık hataları gösterir.

Yanlış değere sahip bir parametrenin yanındaki hata simgesi.

Komutu yeniden gönderme

Az önce gönderdiğiniz komutun bir parametresinde değişiklik yapmanız gerekirse komutu tekrar yazmanız gerekmez. Komutu düzenlemek ve yeniden göndermek için veri ızgarasındaki bir öğeyi sağ tıklayın ve açılır menüden Düzenle ve yeniden gönder'i seçin. Bu işlem, CDP düzenleyicisini otomatik olarak yeniden açar ve seçtiğiniz komutla önceden doldurur.

Veri ızgarasındaki bir komutun "Düzenle ve yeniden gönder" seçeneğini içeren açılır menüsü.

Bir komutu JSON biçimine kopyalama

CDP komutunu JSON biçiminde panonuza kopyalamak için araç çubuğunun en sol ucundaki Kopyala'ya dokunun. kopyala simgesini tıklayın. Ayrıca, doğrudan giriş çubuğuna girdiğiniz komutların düzenleyiciyi sorunsuz bir şekilde dolduracağını ve bunun tam tersinin de geçerli olduğunu unutmayın.

Sonuç

DevTools ekibinin bu yeni CDP düzenleyiciyi tasarlamasının amacı, CDP komutlarının yazılmasını basitleştirmekti. Yeni düzenleyici, dokümanlarla birlikte parametreleri görüntülemek ve CDP komutlarınızı göndermenin daha kolay bir yolunu sunmak için de kullanılabilir.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.