Yayınlanma tarihi: 13 Kasım 2024
Bir performans izlemeye baktığınızda en uzun görev veya gereksiz bir çalışma parçası gibi belirli bir alanı vurgulamak istediğinizi varsayalım. Gelecekte referans olarak kullanmak için not almak veya bulgularınızı bir iş arkadaşınızla paylaşmak isteyebilirsiniz. Bunu yapmanın en iyi yolu nedir?
Elbette, büyük bir kağıda çıktısını alıp notlarınızı elle çizip yazmak veya üçüncü taraf yazılım kullanarak bir izlemenin ekran görüntüsüne notlar çizmek de bu yöntemlerden biri. (Bu yöntem şimdiye kadar en iyi yöntemdi.)
Ekibimizin geliştirici iş akışlarını kolaylaştırmaya olan bağlılığı kapsamında, bu seçeneklere bir alternatif sunmaktan mutluluk duyuyoruz: Performans panelinde doğrudan izlemeye not ekleme özelliği.
Artık izleri yerinde ek açıklamayla işaretleyebilir, bu ek açıklamalar arasında kolayca gezinebilir ve hatta bunları doğrudan izleme dosyasına kaydedebilirsiniz. Bu sayede, vurgulanan analizleri paylaşmak bir dosya göndermek kadar kolay hale gelir ve harici araçlara veya geçici çözümlere ihtiyaç duyulmaz. Ek açıklamalar, performansla ilgili hata ayıklamanıza yardımcı olmanın yanı sıra iş arkadaşlarınızla hızlıca aynı fikirde olmanıza veya çok fazla geri bildirim vermeden neler olduğunu anlamalarını sağlamanıza yardımcı olabilir.
Üç tür ek açıklama vardır:
Ek açıklamalı zaman aralıkları: Zaman çizelgesindeki herhangi bir zaman aralığını etiketleme
Açıklanmış girişler: Zaman çizelgesindeki herhangi bir girişe etiket ekleme
Giriş bağlantıları: İki giriş arasındaki ilişkiyi göstermek için girişleri okla birbirine bağlama
Her ek açıklama türüne ve bu ek açıklamaların işinize yarayabileceği senaryolara göz atalım.
Ek açıklamalı zaman aralıkları
DevTools'da yavaş bir etkileşimde hata ayıklama için izleme kaydı oluşturmak yaygın bir iş akışıdır. İzleme görünümü ilk başta göz korkutucu görünebilir ancak belirli etkinlik işleyicilerine ve çağrı yığınlarına ayrıntılı olarak baktığınızda anlamlı olmaya başlar. İzleme görünümünde çalışmayı kolaylaştırmak için yapabileceğiniz bir işlem, bir zaman aralığının genellikle nasıl harcandığını etiketlemek için ek açıklama oluşturmaktır. Örneğin, kullanıcı etkileşiminden sonra kullanıcı arayüzünün anlamlı bir şekilde güncellenmesi için zaman aralığını notlandırmak yararlı olabilir.
Bir zaman aralığına not eklemek için: Üst Karakter tuşunu basılı tutun ve etkileşimin başlangıcından kullanıcı arayüzü güncellemesine kadar sürükleyin. Ardından, ek açıklama oluşturmak için bir etiket yazın. Seçilen aralık doğru değilse yazmadan önce tıklayarak iptal edin. Alternatif olarak, bir ek açıklamanın etiketini düzenlemek için ek açıklamayı çift tıklayın. Şu anda mevcut bir ek açıklamanın zaman aralığını ayarlayamazsınız. Zaman aralığı yanlışsa notu silin ve yeni bir not oluşturun.
Bu ek açıklama sayesinde, kullanıcı tarafından görülebilen değişiklikten önce yapılması gereken tüm çalışmaları daha net bir şekilde görebilirsiniz. Böylece, hata ayıklama işlemine uygun şekilde odaklanabilirsiniz.
Ek açıklamalı girişler
Kullanıcı tarafından görülebilen değişikliği daha belirgin hale getirmek için geçişten sorumlu görevi bir giriş etiketiyle de notlandırabilirsiniz.
Giriş için etiket oluşturmak üzere: Seçili girişi çift tıklayın ve etiketinizi yazın veya girişi sağ tıklayıp bağlam menüsünden "Girişi Etiketle"yi seçin. Bir ek açıklamanın etiketini düzenlemek için girişi veya etiketi çift tıklayın. Alternatif olarak, içerik menüsünden "Etiket Girişi" seçeneğini belirleyin.
Bu giriş ek açıklamaları sayesinde, etkileşim için kritik olan (veya olmayan) çalışmaları ve bunların ne kadar sürdüğünü tespit etmek daha kolaydır.
Giriş bağlantıları
İzlemeyi notlandırmanın üçüncü yolu, etkileşim ile geçişten sorumlu uzun görev arasındaki bağlantıyı çizmektir.
Girişler arasında bağlantı oluşturmak için: Başka bir girişe bağlamak istediğiniz girişi çift tıklayın ve bu girişin sağ tarafında görünen oku tıklayın. Ardından, bu öğeyi bağlamak istediğiniz girişi tıklayın. Alternatif olarak, girişi sağ tıklayın ve giriş bağlam menüsünden "Girişleri Bağla"yı seçin.
Bu nedenle, etkileşimin kendisi sona ermiş olsa bile, bu tür ek açıklamaları kullanarak etkileşimin, nihayetinde kullanıcı arayüzünü engelleyen sonraki uzun görevlerle nasıl bağlantılı olduğunu daha net bir şekilde gösterebilirsiniz.
Ek açıklamaları silme ve gizleme
Tüm ek açıklamalar, kenar çubuğundaki ek açıklama listesi görünümünden hızlıca silinebilir. Fareyle bir ek açıklamanın üzerine geldiğinizde çöp kutusu simgesi gösterilir. Ek açıklamayı silmek için bu simgeyi tıklayın.
Alternatif olarak, belirli bir etkinlikle ilişkili giriş etiketlerini ve giriş bağlantısı ek açıklamalarını silmek için etkinliği sağ tıklayın ve "Ek açıklamaları sil"i seçin. Etiketli ek açıklamaları, etiketi kaldırıp ek açıklamaları kaydederek de silebilirsiniz.
Notları silmeksizin gizlemek istiyorsanız, notların sizi izlemeyi keşfetmenizi engellememesi için notlar kenar çubuğunun alt kısmındaki "notları gizle" onay kutusunu işaretlemeniz yeterlidir. Bu tercih kaydedilir. Bu ayar etkinken ek açıklama içeren bir izleme yüklediğinizde, onay kutusunu temizleyene kadar ek açıklamalar gizli kalır.
Açıklanmış izleri kaydetme veya yükleme
Harika. Kendinize ve diğer kullanıcılara izlemeyi anlamalarına yardımcı olmak için tüm bu ek açıklamaları eklediniz. Sırada ne var?
Not ekleme özelliğinden önce olduğu gibi, bir iş arkadaşınıza göndermek için izlemenin ekran görüntülerini almanız gerekmez. Not eklediğiniz dosyayı kaydedip onlara göndermeniz yeterlidir. Bu kadar. Dosyayı Performans paneline yükleyebilir ve izleme bağlamında yaptığınız tüm ek açıklamaları görebilir, hatta daha fazla ek açıklama ekleyip size geri gönderebilir.
DevTools, diğer özelleştirmeleri de izleme görünümünde kaydeder. Örneğin, yakınlaştırıp bir içerik haritası ayarlayarak veya alakasız çağrı yığınlarındaki girişleri gizleyerek ilgilendiğiniz bir alanı ayırabilirsiniz. Bu ayarların tümü izleme dosyası tarafından korunur. Böylece, performansla ilgili hata ayıklama konusunda ortak çalışmayı daha da kolaylaştırabilirsiniz. Tüm bu özelleştirmelerle, ekran görüntüsünün aksine etkileşimli izlemenin tamamının bağlamını sağlarken en önemli noktaya dikkat çekebilirsiniz.
Ek açıklamaları ve diğer özelleştirmeleri korumak için indirme simgesinin altındaki İzleyiciyi kaydet seçeneğini tıklayın. Yüklenen bir izleme, bu özelleştirmelerin tümünü içerir. Varsayılan seçenek, ek açıklamalı olarak kaydetmektir. Ancak yalnızca ham izleme dosyasını kaydetmek istiyorsanız İzi açıklama olmadan kaydet seçeneğini belirleyin.
Sonuç
Bu bilgiler ilk bakışta çok fazla görünebilir ancak endişelenmeyin. Ek açıklama oluşturmayla ilgili talimatları dilediğiniz zaman Performans paneli kenar çubuğundaki ek açıklamalar sekmesinde bulabilirsiniz. Bu sekme, ek açıklama olmadığında talimatlar sağlar ve oluşturulduktan sonra ek açıklamaların liste görünümünü gösterir.
Benzer şekilde, Performans panelindeki ek açıklamalar, geliştiricilerin kişiselleştirilmiş bağlam ve analizler ekleyerek bir izlemedeki önemli anları belirlemesini sağlar. Bu sayede analiz süreci kolaylaştırılır ve performans optimizasyonlarını paylaşmak ve bunlar üzerinde ortak çalışmak kolaylaşır. Performans panelindeki ek açıklamaları deneyin ve düşüncelerinizi bizimle paylaşın. Geri bildiriminiz varsa herkese açık sorun sayfasında yorumlarınızı okumaktan memnuniyet duyarız.
Harici araçlara olan ihtiyacı ortadan kaldırın ve daha verimli bir iş akışına merhaba deyin.