Chrome Geliştirici Araçları ekibi, 2019'un son çeyreğinde Geliştirici Araçları'nda çerezlerle ilgili geliştirici deneyimini iyileştirmeye başladı. Google Chrome ve diğer tarayıcılar varsayılan çerez davranışlarını değiştirmeye başladığından bu durum özellikle önemliydi.
DevTools'un sunduğu araçları araştırırken genellikle aşağıdaki gibi bir durumla karşılaşırız:
😰 Konsol, daha çok teknik açıklamalar ve bazen de chromestatus.com'a bağlantılar içeren uyarılar ve hata mesajlarıyla doluydu. Tüm iletiler aşağı yukarı aynı derecede önemliydi, bu da ilk önce hangisinin ele alınacağını belirlemekte zorlanıyordu. Daha da önemlisi, metinde Geliştirici Araçları'ndaki ek bilgilere bağlantı verilmiyordu. Bu da ne olduğunu anlamamızı zorlaştırıyordu. Son olarak, mesajlar genellikle sorunun nasıl düzeltileceğini ve hatta teknik bağlam hakkında bilgi edinilmesini tamamen web geliştiricisine bırakır.
Konsolu kendi uygulamanızdaki iletiler için de kullanırsanız, bazen bu iletileri tarayıcıdan gelen tüm iletiler arasında bulmakta zorlanabilirsiniz.
İnsanların yanı sıra otomatik işlemlerin konsol mesajlarıyla etkileşimde bulunması da zordur. Örneğin, geliştiriciler Sürekli Entegrasyon/Sürekli Dağıtım senaryolarında Chrome Gözetimsiz ve Puppeteer özelliklerini kullanabilirler. Konsol mesajları sadece dize olduğundan, geliştiricilerin işlem yapılabilir bilgileri ayıklamak için normal ifadeler veya başka bir ayrıştırıcı yazmaları gerekir.
Çözüm: Yapılandırılmış ve uygulanabilir sorun raporlama
Bulduğumuz sorunlara daha iyi bir çözüm bulmak için öncelikle gereksinimleri düşünmeye başladık ve bunları bir Tasarım Dokümanında topladık.
Amacımız, sorunları sorunu net bir şekilde açıklayan ve nasıl düzeltileceklerini sağlayacak şekilde sunmaktır. Tasarım sürecimizden, her sorunun aşağıdaki dört bölümü içermesi gerektiğini fark ettik:
- Başlık
- Açıklama
- Geliştirici Araçları'nda etkilenen kaynakların bağlantıları
- Konuyla ilgili daha fazla bilgi için
Geliştiricilerin temel sorunu anlamalarına yardımcı olmak için başlığın kısa ve net olmasını istiyoruz. Bu başlık genellikle zaten sorunun çözümüyle ilgili ipuçları verir. Örneğin, bir çerez sorunu artık yalnızca şöyle diyor:
Siteler arası çerezleri, siteler arası bağlamlarda ayarlanmasına izin vermek için Güvenli olarak işaretleyin
Her sorun açıklamasında daha ayrıntılı bilgiler yer alıyor. Bu bilgiler ne olduğunu açıklar, sorunun nasıl düzeltileceğine dair uygulanabilecek öneriler verir ve sorunu bağlam içinde anlamak için Geliştirici Araçları'ndaki diğer panellerin bağlantılarını sunar. Web geliştiricilerinin konu hakkında daha ayrıntılı bilgi edinebilmesi için web.dev'de ayrıntılı makalelerin bağlantılarını da sunuyoruz.
Etkilenen kaynaklar bölümü, her sorunun önemli bir parçasıdır. Bu bölümde, Geliştirici Araçları'nın diğer bölümlerine bağlantı verilir ve daha ayrıntılı inceleme yapılması kolaylaşır. Çerez sorunu örneğinde, sorunu tetikleyen ağ isteklerinin bir listesi olmalıdır ve isteği tıkladığınızda doğrudan Ağ paneline yönlendirilirsiniz. Bu özelliğin kullanışlı olmasını değil, aynı zamanda Geliştirici Araçları'ndaki belirli bir sorunun hatalarını ayıklamak için hangi panellerin ve araçların kullanılabileceğini de pekiştirdiğini umuyoruz.
Geliştiricilerin Sorunlar sekmesiyle uzun vadedeki etkileşimi düşünüldüğünde, geliştirici etkileşiminin aşağıdaki gelişimini hayal ediyoruz:
- Bir web geliştiricisi, belirli bir sorunla ilk kez karşılaştığında sorunu derinlemesine anlamak için makaleyi okur.
- Bu sorunla ikinci kez karşılaştığınızda, sorun açıklamasının geliştiriciye sorunun ne olduğunu hatırlatmak ve sorunu hemen araştırıp sorunu çözmek üzere işlem yapmasına olanak tanımak için yeterli olacağını umuyoruz.
- Bir sorunla birkaç kez karşılaştıktan sonra, başlığın, geliştiricinin sorun türünü tanıması için yeterli olduğunu umuyoruz.
İyileştirmek istediğimiz bir diğer önemli nokta da toplamadır. Örneğin, aynı çerez aynı soruna birden çok kez neden olduysa, çerezi yalnızca bir kez bildirmek istedik. Bu yöntem, ileti sayısını önemli ölçüde azaltmanın yanı sıra, genellikle bir sorunun kök nedeninin daha hızlı bir şekilde belirlenmesine de yardımcı olur.
Uygulama
Ekip, bu gereksinimleri göz önünde bulundurarak yeni özelliğin nasıl uygulanacağını araştırmaya başladı. Chrome Geliştirici Araçları projeleri genellikle üç farklı alanı kapsar:
- Chromium, C++'ta Google Chrome'un arkasında yazılmış açık kaynak projesidir
- DevTools ön ucu, Chrome Geliştirici Araçları'nın JavaScript uygulaması
- Chrome Geliştirici Araçları Protokolü (CDP),
Ardından uygulama üç görevden oluşuyordu:
- Chromium'da, göstermek istediğimiz bilgileri içeren bileşenleri tanımlamamız ve hızdan veya güvenlikten ödün vermeden bu bilgileri DevTools Protokolü için erişilebilir hale getirmemiz gerekiyordu.
- Daha sonra, bilgileri istemcilere sunan API'yi (ör. Geliştirici Araçları ön ucu) tanımlamak için Chrome DevTools Protocol'u (CDP) tasarlamamız gerekiyordu.
- Son olarak, DevTools ön ucunda CDP aracılığıyla tarayıcıdan bilgi isteyen ve geliştiricilerin bilgileri kolayca yorumlayıp bunlarla etkileşimde bulunabilmeleri için bu bilgileri uygun bir kullanıcı arayüzünde görüntüleyen bir bileşen uygulamamız gerekiyordu.
Tarayıcı tarafında, ilk olarak konsol mesajlarının nasıl işlendiğini araştırdık. Çünkü bu mesajların davranışı, sorunlar konusunda aklımızda olana çok benziyor. CodeSearch, bunun gibi keşifler için genellikle iyi bir başlangıç noktasıdır. Chromium projesinin kaynak kodunun tamamını çevrimiçi olarak arayıp keşfetmenize olanak tanır. Bu sayede konsol mesajlarının nasıl uygulandığını öğrendik ve sorunlar için topladığımız koşullar etrafında paralel ancak daha düzenli bir yöntem geliştirebildik.
Güvenlikle ilgili her zaman aklımızda tutmamız gereken tüm sonuçlar olduğundan, buradaki çalışma özellikle zorlayıcı. Chromium projesi, her şeyi farklı süreçlere ayırmak ve bilgi sızıntılarını önlemek amacıyla sadece kontrollü iletişim kanalları üzerinden iletişim kurulmasını sağlamak için uzun bir yol kat ediyor. Sorunlar hassas bilgiler içerebilir. Bu nedenle, bu bilgileri tarayıcının sorundan haberdar edilmemesi gereken bir kısmına göndermemeye dikkat etmemiz gerekir.
Geliştirici Araçları ön ucunda
DevTools'un kendisi, JavaScript ve CSS'de yazılmış bir web uygulamasıdır. Diğer pek çok web uygulamasına çok benziyor. Tek farkı 10 yıldan uzun süredir kullanımda olması. Tabii ki arka ucu da tarayıcıya doğrudan giden bir iletişim kanalıdır: Chrome Geliştirici Araçları Protokolü.
Sorunlar sekmesi için ilk olarak kullanıcı hikayelerini ve geliştiricilerin bir sorunu çözmek için ne yapması gerektiğini düşündük. Fikirlerimiz çoğunlukla, kullanıcıları daha ayrıntılı bilgi gösteren panellere bağlayan araştırmalarda Sorunlar sekmesinin merkezi bir başlangıç noktası olarak ortaya çıktı. Sorunlar sekmesini, Geliştirici Araçları'nın en alt kısmındaki diğer sekmelerin yanı sıra geliştirici, Ağ veya Uygulama paneli gibi başka bir DevTools bileşeniyle etkileşimde bulunurken açık kalabilmesi için yerleştirmeye karar verdik.
Bunu göz önünde bulunduran kullanıcı deneyimi tasarımcımız neyi hedeflediğimizi anladı ve şu başlangıç tekliflerinin prototipini oluşturdu:
En iyi çözüm üzerine uzun bir tartışma yürüttükten sonra, tasarımı uygulamaya ve kararları tekrarlamaya başladık. Böylece Sorunlar sekmesinin bugünkü haline gelmesine yardımcı olduk.
Çok önemli bir diğer faktör de Sorunlar sekmesinin bulunabilirliğiydi. Geçmişte, pek çok harika Geliştirici Araçları özelliği, geliştirici tam olarak ne arayacağını bilmeden keşfedilemiyordu. Sorunlar sekmesinde, geliştiricilerin önemli sorunları gözden kaçırmaması için çeşitli alanlardaki sorunları vurgulamaya karar verdik.
Artık sorunlar çıkartıldığında belirli konsol mesajları kaldırıldığından konsol paneline bildirim eklemeye karar verdik. Geliştirici Araçları penceresinin sağ üst kısmındaki uyarılar ve hatalar sayacına da bir simge ekledik.
Son olarak, Sorunlar sekmesi yalnızca diğer Geliştirici Araçları panellerine değil, bir sorunla ilgili kaynaklara da tekrar Sorunlar sekmesine bağlantı verir.
Protokolde
Ön uç ile arka uç arasındaki iletişim, Chromium Geliştirici Araçları Protokolü (CDP) adlı bir protokol üzerinden çalışır. CDP, Chrome Geliştirici Araçları olan web uygulamasının arka ucu olarak düşünülebilir. CDP birden çok alana bölünür ve her alan bir dizi komut ve etkinlik içerir.
Sorunlar sekmesi için Denetimler alanına, yeni bir sorunla karşılaşıldığında tetiklenen yeni bir etkinlik eklemeye karar verdik. Geliştirici Araçları henüz açılmadığında ortaya çıkan sorunlar hakkında da rapor oluşturabilmemiz için Denetimler alanı, en son sorunları depolar ve Geliştirici Araçları bağlantısı kurulur kurulmaz gönderir. Daha sonra Geliştirici Araçları tüm bu sorunları toplar ve birleştirir.
CDP, Puppeteer gibi diğer protokol istemcilerinin de sorunları almasına ve işlemesine olanak tanır. CDP üzerinden gönderilen yapılandırılmış sorun bilgilerinin, mevcut sürekli entegrasyon altyapısına entegrasyonu etkinleştireceğini ve basitleştireceğini umuyoruz. Bu sayede sorunlar sayfa dağıtılmadan önce bile tespit edilip düzeltilebilir.
Gelecekteki
Öncelikle, konsoldan Sorunlar sekmesine çok daha fazla iletinin taşınması gerekiyor. Bu süreç biraz zaman alacak. Özellikle eklediğimiz her yeni sorun için net, işlem yapılabilir belgeler sağlamak istiyoruz. Gelecekte geliştiricilerin, sorunları konsol yerine Sorunlar sekmesinde arayacaklarını umuyoruz.
Ayrıca, Chromium arka uç dışındaki diğer kaynaklardan gelen sorunların da Sorunlar sekmesine nasıl entegre edileceğini düşünüyoruz.
Sorunlar sekmesini düzenli tutmanın ve kullanılabilirliği iyileştirmenin yollarını arıyoruz. Arama, filtreleme ve daha iyi toplama bu yıla ilişkin listemizde yer alıyor. Bildirilen sorun sayısının gitgide artmasını sağlamak için, örneğin yalnızca yaklaşmakta olan desteğin sonlandırılmasıyla ilgili sorunların gösterilmesini mümkün kılan sorun kategorilerini kullanıma sunuyoruz. Ayrıca, geliştiricilerin sorunları geçici olarak gizlemek için kullanabileceği bir erteleme özelliği eklemeyi de düşünüyoruz.
Sorunların işlem yapılabilir durumda kalmasını sağlamak için, sayfanın hangi bölümünün bir sorunu tetiklediğinin bulunmasını kolaylaştırmak istiyoruz. Özellikle sayfanızdan (ör. birinci taraf) gelen sorunları, yerleştirdiğiniz kaynakların tetiklediği ancak doğrudan sizin kontrolünüz altında olmayan (reklam ağı gibi) sorunlardan ayırt etmenin ve filtrelemenin yollarını düşünüyoruz. İlk adım olarak, Chrome 86'da üçüncü taraf çerez sorunlarını gizlemek mümkün olacak.
Sorunlar sekmesini iyileştirmeye yönelik önerileriniz varsa hata bildiriminde bulunarak bize bildirin.
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!
Chrome Geliştirici Araçları ekibiyle iletişim kurma
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda, Diğer seçenekler
> Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin. - @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.