Chrome Geliştirici Araçları Sorunları sekmesini nasıl oluşturduk?

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

Chrome Geliştirici Araçları ekibi, 2019'un son çeyreğinde çerezlerle ilgili olarak Geliştirici Araçları'ndaki geliştirici deneyimini iyileştirmeye başladı. Bu, Google Chrome ve diğer tarayıcıların varsayılan çerez davranışlarını değiştirmeye başlaması nedeniyle özellikle önemliydi.

Geliştirici Araçları'nın sağladığı araçları araştırırken sık sık aşağıdaki gibi durumlardayız:

Console panelindeki sorunlar

😰 Konsol, oldukça teknik açıklamalar ve bazen chromestatus.com adresine bağlantılar içeren uyarılar ve hata mesajlarıyla doluydu. Tüm mesajlar aşağı yukarı aynı derecede önemliydi, dolayısıyla önce hangisine ilgilenilmesi gerektiğini bulmak zordu. Daha da önemlisi, metinde Geliştirici Araçları'ndaki ek bilgilere yer verilmiyordu. Bu da ne olduğunu anlamakta zorlanıyordu. Son olarak, mesajlarda genellikle sorunun nasıl çözüleceğini veya teknik bağlam hakkında bilgi edinme işi tamamen web geliştiriciye bırakılıyordu.

Konsolu kendi uygulamanızdan gelen mesajlar için de kullanıyorsanız bazen tarayıcıdaki tüm mesajlar arasında bu mesajları bulmakta zorlanabilirsiniz.

İnsanların yanı sıra otomatik süreçlerin de konsol mesajlarıyla etkileşim kurması zordur. Örneğin, geliştiriciler Chrome Headless ve Puppeteer'ı sürekli entegrasyon/sürekli dağıtım senaryosuyla kullanabilir. Konsol mesajları yalnızca dize olduğundan geliştiricilerin, uygulanabilir bilgileri ayıklamak için düzenli ifadeler veya başka bir ayrıştırıcı yazması gerekir.

Çözüm: Yapılandırılmış ve uygulanabilir sorun raporlama

Tespit ettiğimiz sorunlara daha iyi bir çözüm bulmak için öncelikle gereksinimleri düşünmeye başladık ve bunları bir Tasarım Belgesi'nde topladık.

Amacımız, sorunları sorunu ve çözümünü açıkça açıklayacak şekilde sunmaktır. Tasarım sürecimizde, her sorunun aşağıdaki dört bölümü içermesi gerektiğini fark ettik:

  • Başlık
  • Açıklama
  • DevTools'daki etkilenen kaynakların bağlantıları
  • Daha fazla bilgi için bağlantı

Başlığın, geliştiricilerin temel sorunu anlamalarına yardımcı olmak için kısa ve net olmasını ve genellikle çözüme dair ipuçları vermesini isteriz. Örneğin, çerez sorunları artık şu şekilde gösteriliyor:

Siteler arası çerezleri siteler arası bağlamlarda ayarlanmaya izin vermek için Güvenli olarak işaretleyin

Her sorun, açıklamasında daha ayrıntılı bilgiler içerir. Bu bilgilerde ne olduğu açıklanır, sorunun nasıl düzeltileceğine dair uygulanabilir tavsiyeler verilir ve sorunu bağlam içinde anlamak için DevTools'taki diğer panellerin bağlantıları sağlanır. Ayrıca, web geliştiricilerin konu hakkında daha ayrıntılı bilgi edinmesi için web.dev'deki ayrıntılı makalelerin bağlantılarını da sağlarız.

Her sorunun önemli bir parçası, Geliştirici Araçları'nın diğer bölümlerine yönlendiren ve daha ayrıntılı inceleme yapılmasını kolaylaştıran etkilenen kaynaklar bölümüdü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. Bunun faydalı olacağını umuyoruz. Ayrıca, Geliştirici Araçları'ndaki hangi panellerin ve araçların belirli bir türdeki sorunların hatalarını ayıklamak için kullanılabileceğini de vurgulayacağız.

Geliştiricilerin Sorunlar sekmesiyle uzun vadeli etkileşimini düşündüğümüzde, geliştirici etkileşiminin aşağıdaki evrimini öngörüyoruz:

  • Belirli bir sorunla ilk kez karşılaştığında web geliştiricisi, sorunu derinlemesine anlamak için bu makaleyi okur.
  • Sorunla ikinci kez karşılaştığınızda, sorun açıklamasının geliştiriciye sorunun neyle ilgili olduğunu hatırlatmak ve sorunu hemen araştırıp çözmek için işlem yapmasına olanak tanımak için yeterli olacağını umuyoruz.
  • Bir sorunla birkaç kez karşılaştıktan sonra sorun başlığının, geliştiricinin bu sorunun türünü tanıması için yeterli olacağını umuyoruz.

İyileştirmek istediğimiz bir diğer önemli özellik de toplama işlemidir. Örneğin, aynı çerez aynı soruna birden fazla kez neden olduysa çerezi yalnızca bir kez bildirmek istedik. Bu, mesaj sayısını önemli ölçüde azaltmanın yanı sıra genellikle sorunun temel nedenini daha hızlı belirlemenize yardımcı olur.

Toplu sorunlar

Uygulama

Ekip, bu şartları 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ı alandan oluşur:

Uygulama üç görevden oluşuyordu:

  • Chromium'da, göstermek istediğimiz bilgilere sahip bileşenleri tanımlamamız ve bu bilgileri hız veya güvenlikten ödün vermeden DevTools Protokolü'ne erişilebilir hale getirmemiz gerekiyordu.
  • Daha sonra, bilgileri istemcilere gösteren API'yi (ör. Geliştirici Araçları ön ucu) tanımlamak için Chrome Geliştirici Araçları Protokolü'nü (CDP) tasarlamamız gerekiyordu.
  • Son olarak, DevTools ön ucunda, bilgileri CDP aracılığıyla tarayıcıdan isteyen ve geliştiricilerin kolayca yorumlayabileceği ve bilgilerle etkileşim kurabileceği 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 ele alındığını inceledik. Bunun nedeni, bu mesajların davranışının sorunlar için aklımızdakiyle çok benzer olmasıdır. CodeSearch, genellikle bu tür keşifler için iyi bir başlangıç noktasıdır. Chromium projesinin tüm kaynak kodunu internette aramanıza ve keşfetmenize olanak tanır. Bu sayede, konsol mesajlarının nasıl uygulanacağını öğrendik ve sorunlar için topladığımız koşullar etrafında paralel ama daha yapılandırılmış bir yol oluşturabildik.

Bu çalışma, her zaman göz önünde bulundurmamız gereken tüm güvenlik etkileri nedeniyle özellikle zordur. Chromium projesi, bilgileri farklı süreçlere ayırmak ve bilgi sızıntılarını önlemek için yalnızca kontrollü iletişim kanalları üzerinden iletişim kurmalarını sağlamak için çok çaba harcar. Sorunlar hassas bilgiler içerebilir. Bu nedenle, tarayıcının bu bilgileri bilmemesi gereken bir bölümüne göndermemeye özen göstermemiz gerekir.

Geliştirici Araçları önyüzünde

DevTools da JavaScript ve CSS ile yazılmış bir web uygulamasıdır. 10 yıldan uzun süredir kullanılıyor olması dışında diğer birçok web uygulamasına benzer. Ve tabii ki arka uç, temel olarak tarayıcıya doğrudan bir iletişim kanalı olan Chrome Geliştirici Araçları Protokolü'dür.

Sorunlar sekmesi için öncelikle 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 yönlendiren incelemeler için merkezi bir başlangıç noktası olarak Sorunlar sekmesinin kullanılması etrafında gelişti. Geliştirici, Ağ veya Uygulama paneli gibi başka bir DevTools bileşeniyle etkileşim kurarken Sorunlar sekmesinin açık kalabilmesi için DevTools'un alt kısmındaki diğer sekmelerle birlikte bu sekmeyi de yerleştirmeye karar verdik.

Bu doğrultuda, kullanıcı deneyimi tasarımcımız amacımızı anladı ve aşağıdaki ilk tekliflerin prototipini oluşturdu:

Prototipler

En iyi çözüm üzerine yoğun bir şekilde konuştuktan sonra, sorunlar sekmesinin bugünkü haline

Sorunlar sekmesinin keşfedilebilirliği de çok önemli bir faktördü. Geçmişte, geliştiricinin tam olarak neyi arayacağını bilmediği sürece birçok harika Devtools özelliği keşfedilemezdi. Geliştiricilerin önemli sorunları kaçırmamasını sağlamak için Sorunlar sekmesinde birden fazla farklı alandaki sorunları vurgulamaya karar verdik.

Belirli konsol mesajları artık sorunlar için kaldırıldığı için konsol paneline bir bildirim eklemeye karar verdik. Ayrıca, DevTools penceresinin sağ üst köşesindeki uyarı ve hata sayacına bir simge ekledik.

Sorun bildirimi

Son olarak, Sorunlar sekmesi yalnızca diğer Geliştirici Araçları panellerine değil, bir sorunla ilgili kaynaklara da bağlantı verir.

İlgili sorunlar

Protokolde

Ön uç ile arka uç arasındaki iletişim, Chromium DevTools Protokolü (CDP) adlı bir protokol üzerinden gerçekleşir. CDP, Chrome Geliştirici Araçları olan web uygulamasının arka ucu olarak düşünülebilir. CDP birden fazla alana ayrılmıştır ve her alan çeşitli komutlar ve etkinlikler 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çılmamışken ortaya çıkan sorunları da bildirebilmemiz için Denetim alanı en son sorunları depolar ve DevTools bağlanır bağlanmaz bunları gönderir. DevTools, tüm bu sorunları toplar ve birleştirir.

CDP, Puppeteer gibi diğer protokol istemcilerinin sorunları almasına ve işlemesine de olanak tanır. CDP üzerinden gönderilen yapılandırılmış sorun bilgilerinin mevcut sürekli entegrasyon altyapısına entegrasyonu kolaylaştıracağını umuyoruz. Bu sayede, sayfa dağıtılmadan önce bile sorunlar tespit edilip düzeltilebilir.

Gelecek

Öncelikle, konsoldan Sorunlar sekmesine çok daha fazla mesaj taşınması gerekiyor. Bu işlem, özellikle de eklediğimiz her yeni sorun için net ve uygulanabilir dokümanlar sağlamak istediğimizden biraz zaman alacaktır. Gelecekte geliştiricilerin sorunları konsol yerine Sorunlar sekmesinde aradığını umuyoruz.

Ayrıca, Chromium arka ucunun yanı sıra diğer kaynaklardan gelen sorunları da Sorunlar sekmesine nasıl entegre edeceğimizi 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ılki listemizde yer alıyor. Bildirilen sorunların sayısının artmasıyla birlikte, sorunları kategorilere ayırma sürecindeyiz. Bu kategoriler sayesinde, örneğin, yalnızca kullanımdan kaldırılacak özelliklerle ilgili sorunları gösterebiliriz. Ayrıca, geliştiricilerin sorunları geçici olarak gizlemek için kullanabileceği bir erteleme özelliği eklemeyi de düşünüyoruz.

Sorunların uygulanabilir olmasını sağlamak için bir sayfanın hangi bölümünün sorunu tetiklediğini keşfetmeyi kolaylaştırmak istiyoruz. Özellikle, gerçekten sayfanızdan kaynaklanan (birinci taraf) sorunları, yerleştirdiğiniz, ancak doğrudan kontrolünüz altında olmayan (reklam ağı gibi) kaynakların tetiklediği sorunlardan ayırt etmenin ve filtrelemenin yollarını düşünüyoruz. İlk adım olarak, Chrome 86'da üçüncü taraf çerezleriyle ilgili sorunları gizlemek mümkün olacak.

Sorunlar sekmesini iyileştirmeyle ilgili önerileriniz varsa hata bildirerek bize bildirin.

Ö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ı ekibiyle iletişime geçme

Yeni özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek için aşağıdaki seçenekleri kullanın.