Chrome Geliştirici Araçları Devrimleri 2013

Arthur Evans
X GitHub
Tim Statler
X

Giriş

Web uygulamalarının karmaşıklığı ve işlevselliği arttıkça Chrome Geliştirici Araçları da gelişti. Paul Irish'ın Google I/O 2013'teki Chrome DevTools Revolutions 2013 konuşmasının özetinde, web uygulamalarını oluşturma ve test etme şeklinizde devrim yaratan en son özelliklere göz atabilirsiniz.

Paul'in konuşmasını kaçırmadıysanız yukarıdan izleyebilirsiniz (Buyurun, bekleriz) veya doğrudan özellik özetine geçebilirsiniz:

  • Workspaces, kaynak kod düzenleyiciniz olarak Geliştirici Araçları'nı kullanmanıza olanak tanır.
  • Sass kullanıyorsanız DevTools'ta Sass (.scss) dosyalarını canlı olarak düzenleme ve değişikliklerinizin sayfaya anında yansıtılmasını görme özelliğinden yararlanabilirsiniz.
  • Android için Chrome'da sayfalarda uzaktan hata ayıklama bir süredir mümkün olsa da ADB uzantısı, Android cihazlara bağlanmayı daha kolay hale getiriyor. Ters bağlantı noktası yönlendirmesi, cihazınızdan geliştirme makinenizdeki localhost'a kolayca bağlanmanızı sağlar.
  • Web uygulamalarında performans her zaman önemli bir konudur. DevTools'ta, CPU profilleme için yeni Alev Grafiği görselleştirmesi ve oluşturma ile bellek kullanımıyla ilgili performans sorunlarını gidermek için çeşitli yeni araçlar da dahil olmak üzere darboğazları tespit etmenize yardımcı olacak çeşitli yeni özellikler vardır.

Bu özellikler, Chrome 28'de kullanıma sunuldu ve artık kararlı güncelleme kanalında mevcut.

Çalışma alanları

Çalışma alanları, yerel bir web sunucusundan sunulan kaynakları diskteki dosyalarla eşlemenize olanak tanır. Böylece, Kaynaklar panelinde her tür kaynak dosyasını düzenleyebilir ve bu değişikliklerin diskte kalmasını sağlayabilirsiniz. Benzer şekilde, harici düzenleyicinizde yaptığınız değişiklikler Kaynaklar panelinde hemen görünür.

Aşağıdaki ekran görüntüsünde, çalışma alanlarının kullanımda olduğu bir örnek gösterilmektedir. Takvim sitesi localhost üzerinden yüklenirken Kaynaklar panelinde sitenin kök klasörünün yerel dosya sistemi görünümü gösterilir. Bu klasördeki dosyalarda yaptığınız düzenlemeler diskte kalır. Aşağıdaki ekran görüntüsünde, Calendar.css dosyasında kaydedilmemiş bazı değişiklikler yapıldığı için dosya adının yanına yıldız işareti eklenmiştir.

Kaynaklar paneli.

Control+S veya Command+S tuşuna basarak değişiklikleri diske kaydedebilirsiniz.

Benzer şekilde, Öğeler panelinde bir öğenin stillerinde yaptığınız değişiklikler hem Kaynaklar paneline hem de harici düzenleyicinize yansıtılır. Unutmayın:

  • Öğeler panelindeki DOM değişiklikleri kalıcı değildir. Yalnızca Öğeler panelindeki stil değişiklikleri kaydedilir.
  • Yalnızca harici bir CSS dosyasında tanımlanan stiller değiştirilebilir. element.style veya satır içi stillerde yapılan değişiklikler diske kaydedilmez. Satır içi stilleriniz varsa bunları Kaynaklar panelinde değiştirebilirsiniz.
  • Öğeler panelindeki stil değişiklikleri hemen kaydedilir. Control+S veya Command+S tuşlarına basmanız gerekmez.
Nesne paneli.

Çalışma alanı klasörü ekleme

Çalışma alanlarını kullanmanın iki bölümü vardır: yerel bir klasörün içeriğini DevTools'a sunma ve bu klasörü bir URL ile eşleme.

Yeni bir çalışma alanı klasörü eklemek için:

  1. Geliştirici Araçları'nda, Geliştirici Araçları ayarlarını açmak için Ayarlar'ı Ayarlar simgesi tıklayın.
  2. Çalışma Alanı'nı tıklayın.
  3. Klasör ekle'yi tıklayın.
  4. Projenizin kaynak dosyalarını içeren klasöre gidin ve Seç'i tıklayın.
  5. İstendiğinde, DevTools'un klasöre tam erişmesine izin vermek için İzin ver'i tıklayın.

Kaynaklar panelinde, localhost üzerinden yüklenen kaynaklarla birlikte yeni çalışma alanı klasörü gösterilir. Artık Workspace klasörünüzdeki dosyaları canlı olarak düzenleyebilir ve bu değişiklikler diskte kalır.

Hem localhost kaynaklarını hem de Workspace dosyalarını gösteren Kaynaklar paneli.

Klasörleri URL ile eşleme

Eklediğiniz çalışma alanı klasörünü bir URL ile eşleyebilirsiniz. Chrome belirtilen URL'yi her yüklediğinde Kaynaklar panelinde ağ klasörünün içeriği yerine çalışma alanı klasörünün içeriği gösterilir.

Bir çalışma alanı klasörünü URL ile eşlemek için:

  1. Kaynaklar panelinde, çalışma alanı klasöründeki bir dosyayı sağ tıklayın veya Ctrl+tıklayın.
  2. Ağ kaynağıyla eşle'yi seçin.
    Ağ kaynağıyla eşle seçeneğini gösteren içerik menüsü
  3. Mevcut yüklü sayfadan ilgili ağ kaynağını seçin.
    Kaynak seçim iletişim kutusu.
  4. Sayfayı Chrome'da yeniden yükleyin.

Kaynaklar panelinde artık aşağıda gösterildiği gibi localhost kaynaklarını değil, yalnızca sitenizin yerel Workspace klasörünün içeriği gösterilir.

Eşlenen çalışma alanı klasörü

Bir ağ klasörünü çalışma alanı klasörüne bağlamanın iki yolu daha vardır:

  • Bir ağ kaynağını sağ tıklayın (veya Control tuşunu basılı tutarak tıklayın) ve Dosya Sistemi Kaynağı ile Eşle'yi seçin.
  • Eşlemeleri DevTools Ayarları iletişim kutusunun Çalışma Alanı sekmesine manuel olarak ekleyin.

Sass/CSS kaynak eşleme hata ayıklama

Sass (CSS Kaynak Eşlemesi) hata ayıklama, Kaynaklar panelinde Sass (.scss) dosyalarını canlı olarak düzenlemenize ve DevTools'tan çıkmanıza veya sayfayı yenilemenize gerek kalmadan sonuçları görüntülemenize olanak tanır. Stilleri Sass tarafından oluşturulan bir CSS dosyası tarafından sağlanan bir öğeyi incelediğinizde Öğeler panelinde oluşturulan .css dosyası yerine .scss dosyasının bağlantısı gösterilir.

.scss stil sayfasını gösteren öğeler paneli

Bağlantıyı tıkladığınızda Kaynaklar panelinde (düzenlenebilir) SCSS dosyası açılır. Bu dosyada istediğiniz değişiklikleri yapabilirsiniz.

.scss dosyasını gösteren kaynaklar paneli.

Bir SCSS dosyasında (DevTools'ta veya başka bir yerde) yaptığınız değişiklikleri kaydettiğinizde Sass derleyicisi CSS dosyalarını yeniden oluşturur. Ardından DevTools, yeni oluşturulan CSS dosyasını yeniden yükler.

Sass hata ayıklama özelliğini kullanma

Chrome'da Sass hata ayıklama özelliğini kullanmak için Sass derleyicisinin yayın öncesi sürümüne sahip olmanız gerekir. Şu anda kaynak haritası oluşturmayı destekleyen tek sürüm budur.

gem install sass -v '>=3.3.0alpha' --pre

Ayrıca, DevTools denemelerinde Sass hata ayıklama özelliğini etkinleştirmeniz gerekir:

  1. Chrome'da about:flags adresini açın.
  2. Geliştirici Araçları denemelerini etkinleştir'i açın.
  3. Chrome'u yeniden başlatın.
  4. Geliştirici Araçları Ayarları'nı açıp Deneysel'i tıklayın.
  5. Sass desteği'ni (veya kullandığınız tarayıcı sürümüne bağlı olarak Sass stil sayfası hata ayıklama) etkinleştirin.

Sass yüklendikten sonra, Sass kaynak dosyalarınızda yapılan değişiklikleri izlemek ve oluşturulan her CSS dosyası için kaynak haritası dosyaları oluşturmak üzere Sass derleyicisini başlatın. Örneğin: 

sass --watch **--sourcemap** sass/styles.scss:styles.css

Compass kullanıyorsanız Compass'ın henüz Sass'ın ön sürümünü desteklemediğini ve bu nedenle Compass ile Sass hata ayıklama özelliğini kullanamayacağınızı unutmayın.

İşleyiş şekli

Sass derleyicisi, işlediği her SCSS kaynak dosyası için derlenmiş CSS'ye ek olarak bir kaynak eşleme dosyası (.map dosyası) oluşturur. Kaynak haritası dosyası, .scss dosyası ile .css dosyaları arasındaki eşlemeleri tanımlayan bir JSON dosyasıdır. Her CSS dosyası, özel bir yoruma yerleştirilmiş kaynak haritası dosyasının URL'sini belirten bir ek açıklama içerir:

/*# sourceMappingURL=<url>; */

Örneğin, aşağıdaki SCSS dosyası verildiğinde:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass, sourceMappingURL ek açıklamasını içeren aşağıdaki gibi bir CSS dosyası oluşturur:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Aşağıda örnek bir kaynak eşleme dosyası verilmiştir:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Android için Chrome'da daha kolay uzak hata ayıklama

Android için Chrome'da uzaktan hata ayıklama işlemini kolaylaştırmak amacıyla Geliştirici Araçları'na eklenen yeni özelliklerden bazıları: ADB uzantısı ve ters bağlantı yönlendirme.

ADB Chrome uzantısı, uzaktan hata ayıklama ayarlama sürecini basitleştirir. Bu durum, şu avantajları sunar:

  • Android Debug Bridge'i (ADB) paket halinde sunar. Böylece ADB'yi yüklemeniz gerekmez.
  • Komut satırı etkileşimi gerekmez.
  • ADB daemon'unu kolayca başlatmak, durdurmak ve bağlı cihazları görüntülemek için kullanıcı arayüzü.

Ters bağlantı yönlendirme, Android'deki Chrome'u yerel ana makinenizde çalışan bir web sunucusuna bağlamayı kolaylaştırır. Bu, bazı ağ ortamlarında DNS hilelerine başvurmadan zor bir işlemdir.

ADB uzantısını kullanma

Öncelikle Chrome Web Mağazası'ndan ADB Chrome uzantısını yükleyin. Uzantıyı yüklemek için Chrome'a ekle'yi tıklayın.

Yüklendikten sonra Chrome'da gri bir Android menü simgesi görünür. ADB'yi başlatmak için simgeyi ve ardından ADB'yi başlat'ı tıklayın.

ADB uzantısı menüsü.

ADB başladıktan sonra menü simgesi yeşile döner ve varsa şu anda bağlı cihazların sayısını gösterir.

Bağlı cihazları gösteren ADB uzantısı menüsü.

Bağlı her cihazı ve sekmelerini gösteren about:inspect sayfasını açmak için Cihazları Görüntüle'yi tıklayın. DevTools'ta bir sekmeyi incelemek için URL'sinin yanındaki "denetle" bağlantısını tıklayın.

Cihaz sekmelerinin bağlantılarını gösteren about:inspect sayfası

Bağlı cihaz görmüyorsanız cihazınızın USB'ye bağlı olup olmadığını ve Android için Chrome ayarlarında USB hata ayıklama'nın etkin olup olmadığını kontrol edin. Daha ayrıntılı talimatlar ve sorun giderme adımları için Android'de Uzaktan Hata Ayıklama başlıklı makaleyi inceleyin.

Ters bağlantı noktası yönlendirme (deneysel)

Genellikle yerel geliştirme makinenizde çalışan bir web sunucunuz vardır ve bu siteye cihazınızdan bağlanmak istersiniz. Geliştirme makinesi ve cihaz aynı ağdaysa bu işlem kolaydır. Ancak kısıtlanmış kurumsal ağlar gibi bazı durumlarda, bazı akıllı DNS hileleri olmadan bu mümkün olmayabilir. Android için Chrome'daki ters bağlantı noktası yönlendirme adlı yeni özellik, bu işlemi kolaylaştırır. Bu özellik, cihazınızda USB üzerinden trafiği geliştirme makinenizdeki belirli bir TCP bağlantı noktasına yönlendiren bir dinleyici TCP bağlantı noktası oluşturarak çalışır.

Bu özelliği kullanmak için şunlara ihtiyacınız vardır:

  • Geliştirme makinenizde Chrome 28 veya sonraki bir sürüm yüklü olmalıdır.
  • Cihazınızda Android için Chrome Beta yüklü olmalıdır.
  • Geliştirme makinenizde Android Debug Bridge (ADB Chrome uzantısı veya tam Android SDK'sı) yüklü olmalıdır.

Ters bağlantı noktası yönlendirmeyi kullanmak için ADB uzantısını kullanma bölümünde açıklandığı gibi, uzaktan hata ayıklama için cihazınızın bağlı olması gerekir. Ardından, ters bağlantı noktası yönlendirmeyi etkinleştirmeniz ve uygulamanız için bir bağlantı noktası yönlendirme kuralı eklemeniz gerekir.

Öncelikle ters bağlantı noktası yönlendirmeyi etkinleştirin:

  1. Geliştirme makinenizde Chrome'u açın.
  2. about:flags adresinde Geliştirici Araçları denemelerini etkinleştir'i açın ve Chrome'u yeniden başlatın.
  3. about:inspect adresini açın. Mobil cihazınızı ve açık sekmelerinin listesini görürsünüz.
  4. Listelenen sitelerden herhangi birinin yanındaki "incele" bağlantısını tıklayın.
  5. Açılan DevTools penceresinde Ayarlar panelini açın.
  6. Denemeler bölümünde Ters bağlantı yönlendirmeyi etkinleştir'i açın.
  7. DevTools penceresini kapatın ve about:inspect adresine dönün.

Ardından, bağlantı noktası yönlendirme kuralı ekleyin:

  1. Geliştirici Araçları'nı açmak için "İncele" bağlantısını tekrar tıklayın ve Geliştirici Araçları ayarlarını tekrar açın.
  2. Port Yönlendirme sekmesini tıklayın.
  3. Cihaz bağlantı noktası alanına, Chrome'un Android cihazınızda bağlanacağı bağlantı noktası numarasını girin (varsayılan olarak 8080).
  4. Hedef alanına, web uygulamanızın geliştirme makinenizde çalıştığı bağlantı noktası numarasını ekleyin.
    Geliştirici Araçları Ayarları&#39;ndaki Bağlantı noktası yönlendirme sekmesi
  5. Android için Chrome'da localhost: adresini açın. Burada , Cihaz bağlantı noktası alanına girdiğiniz değerdir (varsayılan değer 8080'dir).

İçeriğin, geliştirme makineniz tarafından yayınlandığını görürsünüz.

JavaScript profilleri için flame grafiği görselleştirmesi

Yeni Alev Grafiği görünümü, zaman içindeki JavaScript işlemenin görsel bir temsilini sağlar. Bu görünüm, Zaman Çizelgesi ve Ağ panellerinde bulunanlara benzer.

Flame grafiği.

Yatay eksen zaman, dikey eksen ise çağrı yığınıdır. Panelin üst kısmında, kaydın tamamını gösteren bir genel bakış bulunur. Aşağıda gösterildiği gibi, genel bakıştaki bir bölgeyi farenizle seçerek "yakınlaştırabilirsiniz". Ayrıntılar görünümündeki zaman ölçeği buna göre küçülür.

Yakınlaştırılmış alev grafiği.

Ayrıntılar görünümünde, çağrı yığınları işlev "blokları" yığını olarak gösterilir. Alttaki işlev bloğu, diğerinin üzerine yerleştirilmiş bir bloğu çağırdı. Fareyle belirli bir bloğun üzerine geldiğinizde işlev adı ve zamanlama verileri gösterilir:

  • Ad: İşlevin adı.
  • Kendi zamanı: İşlevin mevcut çağrısının tamamlanması için geçen süre. Yalnızca işlevdeki ifadeler dahildir, çağrılan işlevler dahil değildir.
  • Toplam süre: Bu işlevin geçerli çağrısının ve çağırdığı tüm işlevlerin tamamlanması için geçen süre.
  • Toplu kendi zamanı: Kayıt boyunca işlevin tüm çağrılarının toplam süresidir. Bu işlev tarafından çağrılan işlevler dahil değildir.
  • Toplanan toplam süre: Bu işlev tarafından çağrılan işlevler dahil olmak üzere işlevin tüm çağrılarının toplam süresi.
Zamanlama verilerini gösteren alev grafiği

Bir işlev bloğunu tıkladığınızda, işlevin tanımlandığı satırda Kaynaklar panelinde ilgili JavaScript dosyası açılır.

Kaynaklar panelinde işlev tanımı.

Alev grafiğini kullanmak için:

  1. Geliştirici Araçları'nda Profiller sekmesini tıklayın.
  2. JavaScript CPU profili kaydet'i seçin ve Başlat'ı tıklayın.
  3. Veri toplamayı tamamladığınızda Durdur'u tıklayın.
  4. Profil görünümünde Alev Grafiği görselleştirmesini seçin.
    Profil görünümündeki görselleştirme menüsü

Beş temel performans ölçümü özelliği

Geliştirici Araçları'ndaki devrim niteliğindeki gelişmeleri inceleyen bu anketi, performans sorunlarını incelemeye yönelik birkaç yeni özellik tamamlıyor:

  • Sürekli boyama modu
  • Boyama dikdörtgenlerini ve katman sınırlarını gösterme
  • FPS ölçer
  • Zorunlu eşzamanlı düzenleri bulma (düzen karmaşası)
  • Nesne tahsisi izleme

Sürekli boyama modu

DevTools Ayarları'ndaki (Oluşturma > Sürekli sayfayı yeniden boyamayı etkinleştir) sürekli boyama modu, tek tek öğelerin veya CSS stillerinin oluşturma maliyetini belirlemenize yardımcı olan bir seçenektir.

Normalde Chrome, ekrana yalnızca bir düzen veya stil değişikliğine yanıt olarak ve yalnızca ekranın güncellenmesi gereken bölgelerine çizim yapar. Sürekli sayfa yeniden boyamayı etkinleştirdiğinizde ekranın tamamı sürekli olarak yeniden boyanır. Bir bilgi ekranı, Chrome'un sayfayı oluşturmasının ne kadar sürdüğünün yanı sıra zaman aralığını ve son oluşturma zamanlarının dağılımını gösteren bir grafik gösterir. Histogramdaki yatay çizgi 16,6 ms işaretini gösterir.

Boyama zamanlaması uyarı ekranı.

Bu özelliği kullanmanın avantajı, Nesneler panelinde DOM ağacında gezinip öğeleri tek tek gizleyebilmeniz (mevcut seçili öğeyi gizlemek için H tuşuna basın) veya bir öğenin CSS stillerini devre dışı bırakabilmenizdir. Sayfa boyama süresindeki değişiklikleri fark ederek bir öğenin veya stilin sayfa oluşturma "ağırlığına" (varsa) ne kadar zaman eklediğini görebilirsiniz. Tek bir öğenin gizlenmesi, boyama sürelerini önemli ölçüde azaltıyorsa söz konusu öğenin stili veya yapısına odaklanmanız gerektiğini bilirsiniz.

Sürekli boyama modunu etkinleştirmek için:

  1. Geliştirici Araçları ayarlarını açın. 1.Genel sekmesinde, Oluşturma bölümünde Sürekli sayfayı yeniden boyamayı etkinleştir'i açın.

Daha fazla bilgi için DevTools'un Sürekli Boyama Modu ile Uzun Boyama Sürelerini Profilleme başlıklı makaleyi inceleyin.

Boyama dikdörtgenlerini ve katman sınırlarını gösterme

DevTools'taki bir diğer seçenek de ekranın hangi dikdörtgen bölgelerinin boyandığını göstermektir. (Ayarlar > Oluşturma > Boyama karelerini göster). Örneğin, aşağıdaki ekran görüntüsünde mor grafiğe CSS fareyle üzerine gelme efektinin uygulandığı bölgenin üzerine bir boya dikdörtgeni çizilmektedir. Bu, ekranın nispeten küçük bir kısmı olduğu için iyi bir şeydir.

Boya dikdörtgenini gösteren web sitesi.

Ekranın tamamının yeniden boyanmasına neden olan tasarım ve geliştirme uygulamalarından kaçınmak istersiniz. Örneğin, aşağıdaki ekran görüntüsünde kullanıcı sayfayı kaydırmaktadır. Bir boya dikdörtgeni kaydırma çubuğunu, diğeri ise sayfanın geri kalanını çevreler. Bu durumda suçlu, body öğesindeki arka plan resmidir. Resim konumu CSS'de sabit olarak ayarlanmıştır. Bu nedenle Chrome'un her kaydırma işleminde sayfanın tamamını yeniden boyaması gerekir.

Tam ekran yeniden boyamayı gösteren web sitesi.

FPS ölçer

FPS ölçer, sayfanın mevcut kare hızını, minimum ve maksimum kare hızını, zaman içindeki kare hızını gösteren bir çubuk grafiği ve kare hızı değişkenliğini gösteren bir histogram gösterir.

FPS ölçer

FPS ölçerini göstermek için:

  1. Geliştirici Araçları ayarlarını açın.
  2. Genel'i tıklayın.
  3. Oluşturma bölümünde Hızlandırılmış birleştirmeyi zorla ve FPS sayacını göster'i açın.

about:flags adresini açıp FPS sayacı'nı etkinleştirip Chrome'u yeniden başlatarak FPS sayacının her zaman görünmesini sağlayabilirsiniz.

Zorunlu eşzamanlı düzenleri bulma (düzen karmaşası)

Chrome, oluşturma performansını en üst düzeye çıkarmak için genellikle uygulamanız tarafından istenen düzen değişikliklerini gruplandırır ve istenen değişiklikleri eşzamansız olarak hesaplayıp oluşturmak için bir düzen geçişi planlar. Ancak bir uygulama, sayfa düzenine bağlı bir mülkün (ör. offsetHeight veya offsetWidth) değerini isterse Chrome, sayfa düzenini hemen ve senkronize olarak gerçekleştirmek zorunda kalır. Zorunlu senkronize düzenler olarak adlandırılan bu düzenler, özellikle büyük DOM ağaçlarında tekrar tekrar gerçekleştirildiğinde oluşturma performansını önemli ölçüde düşürebilir. Bu senaryoya "düzenleme karmaşası" da denir.

Zaman Çizelgesi kaydı, zorunlu senkronize düzen algıladığında ilgili Zaman Çizelgesi kaydının yanında sarı uyarı simgesi gösterir. Fareyle bu kayıtlardan birinin üzerine geldiğinizde, düzeni geçersiz kılan ve düzeni zorlayan kodun yığın izlemeleri gösterilir.

Zaman çizelgesi görünümünde zorunlu eşzamanlı düzen pop-up&#39;ı.

Bu pop-up'ta düzen gerektiren düğümlerin sayısı, yeniden düzen ağacının boyutu, düzen kapsamı ve düzen kökü de gösterilir.

Daha fazla bilgi için Zaman çizelgesi demosu: Zorunlu senkronize düzenleri teşhis etme başlıklı makaleyi inceleyin.

Nesne tahsisi izleme

Nesne tahsisi izleme, zaman içindeki tahsisi gösteren yeni bir bellek profili türüdür. Tahsis izlemeyi başlattığınızda DevTools, zaman içinde sürekli olarak yığın anlık görüntüleri alır. Yığın tahsisi profili, nesnelerin nerede oluşturulduğunu gösterir ve saklama yolunu tanımlar.

Yığın ayırma profili görünümü.

Nesne tahsislerini izlemek için:

  1. Geliştirici Araçları'nda Profiller sekmesini tıklayın.
  2. Yığın tahsislerini kaydet'i seçin ve Başlat'ı tıklayın.
  3. Veri toplamayı tamamladığınızda Yığın profili kaydını durdur'u (profil oluşturma bölmesinin sol alt köşesindeki kırmızı daire) tıklayın.

Tuval profil oluşturma (deneysel)

Son olarak, keşfedebileceğiniz tamamen deneysel bir özellikten bahsedeceğiz. Tuval profil oluşturma, bir tuval öğesinde yapılan WebGL çağrılarını kaydetmenize ve oynatmanıza olanak tanır. Tek tek WebGL çağrılarını veya çağrı gruplarını adım adım inceleyebilir ve oluşturulan sonuçları görebilirsiniz. Ayrıca, bu aramaların yeniden oynatılmasının ne kadar sürdüğünü de görürsünüz.

Tuval profillemeyi kullanmak için:

  1. DevTools ayarlarının Denemeler sekmesinde Tuval denetimi özelliğini etkinleştirin. (Bu sekmeyi görmüyorsanız about:flags adresini açın, Geliştirici Araçları denemelerini etkinleştir'i açın ve Chrome'u yeniden başlatın.)
  2. Profiller sekmesini tıklayın.
  3. Tuval çerçevesini yakala'yı seçin ve Fotoğraf çek'i tıklayın.
  4. Artık tuval çerçevesini oluşturmak için kullanılan çağrıları keşfedebilirsiniz.
Kanvas profili.