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.
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
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 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.
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.
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 öğ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.
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.
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.
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.
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.
Bir komutu JSON biçimine kopyalama
CDP komutunu JSON biçiminde panonuza kopyalamak için araç çubuğunun en sol ucundaki 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.
- crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
- Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
- @ChromeDevTools hesabına tweet gönderin.
- Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.