Chrome Geliştirici Araçları Devrimleri 2013

Giriş

Web uygulamalarının karmaşıklığı ve işlevselliği arttıkça Chrome Geliştirici Araçları da büyüdü. Paul Ireland'ın Google I/O 2013 konuşmasının Chrome DevTools Revolutions 2013'ün bu özetinde, web uygulamalarını oluşturma ve test etme biçiminde devrim yaratan en son özelliklere göz attınız.

Paul'un konuşmasını kaçırdıysanız yukarıdan izleyebilirsiniz (devam edin, bekleyeceğiz) veya doğrudan özellik özetine geçebilirsiniz:

• Çalışma alanları, kaynak kodu düzenleyiciniz olarak Geliştirici Araçları'nı kullanmanıza olanak tanır.
• Sass kullanıyorsanız Geliştirici Araçları'nda Sass (.scss) dosyalarını canlı olarak düzenleyebilir ve değişikliklerinizin sayfaya hemen yansıdığını görebilirsiniz.
• Android için Chrome'da uzaktan hata ayıklama işlemi uzun süredir mümkün olsa da ADB uzantısı Android cihazlara bağlanmayı kolaylaştırır. Ters bağlantı noktası yönlendirme, cihazınızdan geliştirme makinenizde localhost'a kolayca bağlanmanızı sağlar.
• Web uygulamalarında performans her zaman önemli bir konudur. DevTools, CPU profili oluşturma için yeni Flame Chart görselleştirmesi ve oluşturma ve bellek kullanımıyla ilgili performans sorunlarında hata ayıklamaya yönelik çeşitli yeni araçlar da dahil olmak üzere performans sorunlarını tespit etmenize yardımcı olacak birçok yeni özelliğe sahiptir.

Bu özellikler Chrome 28'de kullanımda olup artık mevcut ürün güncelleme kanalından sunulmaktadır.

Ç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 dosyayı düzenleyebilir ve bu değişikliklerin diskte saklanmasını sağlayabilirsiniz. Benzer şekilde, harici düzenleyicinizde yaptığınız değişiklikler hemen Kaynaklar panelinde görünür.

Aşağıdaki ekran görüntüsünde, çalışan çalışma alanlarını gösteren bir örnek gösterilmektedir. Takvim sitesi localhost üzerinden yüklendi. Kaynaklar paneli ise sitenin kök klasörünün yerel dosya sistemi görünümünü gösterir. Bu klasördeki dosyalarda yaptığınız düzenlemeler diske kaydedilir. 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 bir yıldız işareti yerleştirilmiştir.

Control+S veya Command+S tuşlarına bastığınızda diskteki değişiklikler devam eder.

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

• Nesne panelindeki DOM değişiklikleri kalıcı değildir. Yalnızca Nesne panelindeki stil değişiklikleri korunur.
• Yalnızca harici bir CSS dosyasında tanımlanan stiller değiştirilebilir. item.style veya satır içi stillerde yapılan değişiklikler diske geri yüklenmez. Satır içi stilleriniz varsa bunları Kaynaklar panelinden değiştirilebilir.
• Öğeler panelindeki stil değişiklikleri hemen uygulanır, Control+S veya Command+S tuşlarına basmanız gerekmez.

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

Çalışma alanları iki aşamadan oluşur: yerel klasör içeriğini Geliştirici Araçları tarafından kullanılabilir hale getirmek 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, Ayarlar'ı tıklayarak Geliştirici Araçları ayarlarını açı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 göz atın ve Seç'i tıklayın.
5. İstendiğinde, Geliştirici Araçları'nın klasöre tam erişim izni için İzin ver'i tıklayın.

Kaynaklar paneli, yerel ana makine üzerinden yüklenen kaynaklarla birlikte yeni çalışma alanı klasörünü görüntüler. Artık Workspace klasörünüzde dosyaları canlı olarak düzenleyebilirsiniz. Bu değişiklikler diskte kalır.

Klasörü bir URL ile eşleme

Bir çalışma alanı klasörü ekledikten sonra onu bir URL ile eşleyebilirsiniz. Chrome, belirtilen URL'yi her yüklediğinde Kaynaklar paneli, ağ klasörü içerikleri yerine çalışma alanı klasörünün içeriğini gösterir.

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

1. Kaynaklar panelinde, çalışma alanı klasöründeki bir dosyayı sağ tıklayın veya Control tuşuyla birlikte tıklayın.
2. Ağ Kaynağıyla Eşle'yi seçin.

   

3. Şu anda yüklü olan sayfadan ilgili ağ kaynağını seçin.

   

4. Sayfayı Chrome'da yeniden yükleyin.

Kaynaklar paneli, aşağıda gösterildiği gibi, localhost kaynaklarını değil, yalnızca sitenizin yerel çalışma alanı klasörünün içeriğini gösterir.

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

• Bir ağ kaynağını sağ tıklayın (veya Kontrol tuşunu basılı tutarken tıklayın) ve Dosya Sistemi Kaynağıyla Eşle'yi seçin.
• Eşlemeleri, Geliştirici Araçları'ndaki Ayarlar iletişim kutusunun Çalışma Alanı sekmesinde manuel olarak ekleyin.

Sass/CSS Kaynak Haritası hata ayıklaması

Sass (CSS Kaynak Haritası) hata ayıklaması, Sass (.scss) dosyalarını Kaynaklar panelinde canlı olarak düzenlemenize ve Geliştirici Araçları'ndan ayrılmanı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ının değil, .scss dosyasının bağlantısı görüntülenir.

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

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

Sass hata ayıklamasını kullanma

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

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

Geliştirici Araçları denemelerinde Sass hata ayıklama özelliğini de etkinleştirmeniz gerekir:

1. Chrome'da about:flags sayfasını açın.
2. Geliştirici Araçları denemelerini etkinleştir seçeneğini etkinleştirin.
3. Chrome'u yeniden başlatın.
4. Geliştirici Araçları Ayarları'nı açın ve Denemeler'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ıklaması'nı) etkinleştirin.

Sass yüklendikten sonra, Sass kaynak dosyalarınızdaki değişiklikleri izlemek ve oluşturulan her CSS dosyası için kaynak eşleme 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 yayın öncesi sürümünü desteklemediğini, dolayısıyla Sass hata ayıklamasını Compass ile 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 eşleme dosyası, .scss dosyası ile .css dosyaları arasındaki eşlemeleri tanımlayan bir JSON dosyasıdır. Her CSS dosyası, kaynak eşleme dosyasının URL'sini belirten ve özel bir yoruma yerleştirilmiş bir ek açıklama içerir:

/*# sourceMappingURL=<url>; */

Örneğin, aşağıdaki SCSS dosyası göz önünde bulundurulduğunda:

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

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

Sass, sourceEşlemeURL ek açıklamasına sahip şu şekilde 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 haritası 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 uzaktan hata ayıklama

Geliştirici Araçları'ndaki bazı yeni özellikler, Android için Chrome'da uzaktan hata ayıklamayı kurulumu daha kolay hale getirir: ADB uzantısı ve ters bağlantı noktası yönlendirme.

ADB Chrome uzantısı, uzaktan hata ayıklamayı ayarlama işlemini basitleştirir. Aşağıdaki avantajları sağlar:

• Android Debug Bridge'i (ADB) paketler. Bu nedenle, uygulamayı yüklemek zorunda kalmazsınız.
• Komut satırı etkileşimi gerekmez.
• ADB arka plan programını kolayca başlatmak ve durdurmak ve bağlı cihazları görüntülemek için kullanılan kullanıcı arayüzü.

Ters bağlantı noktası yönlendirme özelliği, Android'de Chrome'u localhost'unuzda çalışan bir web sunucusuna kolayca bağlamanızı sağlar. Bazı ağ ortamları bazı DNS hileleri olmadan zorlaşır.

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 başladığında, menü simgesi yeşile döner ve varsa şu anda bağlı olan cihazların sayısını gösterir.

Her bağlı cihazı ve sekmelerini gösteren about:inspect sayfasını açmak için Cihazları Görüntüle'yi tıklayın. Geliştirici Araçları'nda bir sekmeyi incelemek için URL'sinin yanındaki "incele" bağlantısını tıklayın.

Herhangi bir bağlı cihaz görmüyorsanız cihazınızın USB'ye bağlı olduğundan ve Android için Chrome ayarlarında USB üzerinden hata ayıklama'nın etkinleştirildiğinden emin olun. Daha ayrıntılı talimatlar ve sorun giderme adımları için Android'de Uzaktan Hata Ayıklama başlıklı makaleye bakın.

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

Genelde yerel geliştirme makinenizde çalışan bir web sunucunuz olur ve cihazınızdan bu siteye bağlanmak istersiniz. Geliştirme makinesi ve cihaz aynı ağdaysa bu kolayca anlaşılır. Ancak bazı durumlarda, örneğin kısıtlı şirket ağlarında, bazı zekice DNS hileleri olmadan bu mümkün olmayabilir. Android için Chrome'da bulunan ters bağlantı noktası yönlendirme adlı yeni bir özellik bu işlemi kolaylaştırır. Bu özellik, cihazınızda trafiği USB üzerinden geliştirme makinenizdeki belirli bir TCP bağlantı noktasına yönlendiren bir dinleme 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 daha yeni bir sürüm yüklü
• Android için Chrome Beta cihazınızda yüklü
• Geliştirme makinenizde yüklü Android Debug Bridge (ADB Chrome uzantısı veya tam Android SDK'sı)

Ters bağlantı noktası yönlendirmeyi kullanmak için ADB uzantısını kullanma bölümünde açıklandığı gibi cihazınızı uzaktan hata ayıklama için bağlamanız 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 bölümünde Geliştirici Araçları denemelerini etkinleştir'i açın ve Chrome'u yeniden başlatın.
3. about:inspect sayfasını 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 Geliştirici Araçları penceresinde Ayarlar panelini açın.
6. Denemeler bölümünde Ters bağlantı noktası yönlendirmeyi etkinleştir'i açın.
7. Geliştirici Araçları penceresini kapatın ve about:inspect sayfasına dönün.

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

1. "İncele" bağlantısını tekrar tıklayarak Geliştirici Araçları'nı açın, ardından Geliştirici Araçları Ayarları'nı tekrar açın.
2. Port Redirect (Bağlantı Noktası Yönlendirme) sekmesini tıklayın.
3. Cihaz bağlantı noktası alanına Chrome'un Android cihazınızda bağlanması gereken bağlantı noktası numarasını girin (varsayılan olarak 8080'dir).
4. Target (Hedef) alanına, geliştirme makinenizde web uygulamanızın çalıştığı bağlantı noktası numarasını ekleyin.

   

5. Android için Chrome'da localhost: uygulamasını açın. Burada , Cihaz bağlantı noktası alanına girdiğiniz değerdir (varsayılan değer 8080'dir).

Geliştirme makineniz tarafından sunulan içeriği görmeniz gerekir.

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

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

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

Ayrıntılar görünümünde bir çağrı yığını, bir işlev "blokları" yığını olarak gösterilir. Bir diğerinin üzerinde duran bir blok, alt fonksiyon bloğu tarafından çağrılıyordu. Belirli bir bloğun üzerine geldiğinizde işlev adı ve zamanlama verileri görüntülenir:

• Ad: İşlevin adı.
• Süresi: Yalnızca işlevin kendi içindeki ifadeler de dahil olmak üzere (çağrıladığı herhangi bir işlev hariç), işlevin geçerli çağrışımının tamamlanmasının ne kadar sürdüğü.
• Toplam süre: Bu işlevin ve çağırdığı işlevlerin geçerli çağrılmasının tamamlanması için geçen süre.
• Toplu kendi kendine zaman: Bu işlevin çağırdığı işlevler dahil değil, kayıt boyunca işlevin tüm çağrıları için toplanan süre.
• Toplam toplam süre: Bu işlev tarafından çağrılan işlevler de dahil olmak üzere, işlevin tüm çağrıları için toplam süre.

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

Flame grafiğini kullanmak için:

1. Geliştirici Araçları'nda Profiller sekmesini tıklayın.
2. JavaScript CPU profilini 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.

   

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

Geliştirici Araçları'ndaki devrim niteliğindeki gelişmelerle ilgili bu anketi tamamlıyor, performans sorunlarını incelemeye yarayan birçok yeni özellik bulunuyor:

• Sürekli boyama modu
• Boya dikdörtgenleri ve katman kenarlıkları gösteriliyor
• FPS ölçer
• Zorunlu eşzamanlı düzenleri bulma (istenmeyen düzen)
• Nesne ayırma izleme

Sürekli boyama modu

Sürekli boyama modu, Geliştirici Araçları ayarlarında bulunan bir seçenektir (Oluşturma > Sürekli sayfa yeniden boyamayı etkinleştir). Tek tek öğelerin veya CSS stillerinin oluşturma maliyetini belirlemenize yardımcı olur.

Normalde Chrome, ekranı yalnızca bir düzen veya stil değişikliğine göre ve ekranın yalnızca güncellenmesi gereken bölgelerine boyar. Sürekli sayfa boyamayı etkinleştirdiğinizde ekranın tamamı sürekli olarak yeniden boyanır. Uyarı ekranı, Chrome'un sayfayı boyaması için gereken süreyi, zaman aralığını ve son boyama sürelerinin dağılımını gösteren bir grafiği gösterir. Histogramdaki yatay çizgi 16,6 ms işaretini gösterir.

Bunu kullanmanın avantajı, Öğeler panelinde DOM ağacını yürütebilmeniz ve öğeleri tek tek gizleyebilmeniz (seçilmiş olan öğeyi gizlemek için H tuşuna basabilmeniz) veya bir öğenin CSS stillerini devre dışı bırakabilmenizdir. Sayfanın boyama süresinde değişiklikler olduğunu fark ederek bir öğenin veya stilin, varsa sayfa oluşturma "ağırlığına" ne kadar süre eklediğini görebilirsiniz. Tek bir öğenin gizlenmesi boyama sürelerinin önemli ölçüde azalmasına neden oluyorsa o öğenin stiline veya yapısına odaklanmanız gerekir.

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

1. Geliştirici Araçları ayarlarını açın. 1.Genel sekmesinde, Oluşturma altında Sürekli sayfa yeniden boyamayı etkinleştir'i açın.

Daha fazla bilgi için DevTools'un Sürekli Boyama Modu ile Profil Oluşturma Süreleri bölümüne bakın.

Boya dikdörtgenleri ve katman kenarlıkları gösteriliyor

Geliştirici Araçları'ndaki bir başka seçenek de ekranın hangi dikdörtgen bölgelerine boyandığını göstermektir. (Ayarlar > Oluşturma > Boya dikdörtgenlerini göster). Örneğin, aşağıdaki ekran görüntüsünde, mor grafiğe bir CSS fareyle üzerine gelme efektinin uygulandığı bölgenin üzerine bir boya dikdörtgeni çizilmiştir. Bu, ekranın nispeten küçük bir parçası olduğu için iyidir.

Ekranın tamamının yeniden boyanmasına neden olan tasarım ve geliştirme uygulamalarından kaçınmak istiyorsunuz. Örneğin, aşağıdaki ekran görüntüsünde kullanıcı sayfayı kaydırıyor. Bir boya dikdörtgeni kaydırma çubuğunu çevrelerken bir diğeri sayfanın geri kalanını çevreler. Bu durumda sorunun kaynağı, gövde öğesindeki arka plan resmidir. Resim konumu CSS'de sabit olarak ayarlandığı için Chrome'un her kaydırmada sayfanın tamamını yeniden boyaması gerekir.

FPS ölçer

FPS ölçer, sayfanın geçerli 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örüntüler.

FPS sayacını görüntülemek için:

1. Geliştirici Araçları ayarlarını açın.
2. Genel'i tıklayın.
3. Oluşturma altında, Hızlandırılmış birleştirmeyi zorunlu kıl ve FPS sayacını göster seçeneklerini açın.

about:flags sayfasını açıp FPS sayacını etkinleştirerek ve Chrome'u yeniden başlatarak FPS sayacını her zaman görünmeye zorlayabilirsiniz.

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

Oluşturma performansını en üst düzeye çıkarmak için Chrome, normalde uygulamanız tarafından istenen düzen değişikliklerini toplu olarak işler ve istenen değişiklikleri eşzamansız olarak hesaplamak ve oluşturmak için bir düzen geçişi planlar. Ancak, bir uygulama düzene bağlı bir özelliğin (ofsetHeight veya offsetWidth gibi) değerini isterse Chrome'un hemen ve eşzamanlı bir şekilde sayfa düzenini gerçekleştirmeye zorlanır. Zorunlu eşzamanlı düzenler, özellikle büyük DOM ağaçlarında tekrar tekrar uygulandığında oluşturma performansını önemli ölçüde düşürebilir. Bu senaryoya "dizgi hırsızlığı" da denir.

Zaman Çizelgesi kaydı, ilgili Zaman Çizelgesi kaydının yanında sarı bir uyarı simgesi bulunan zorunlu eşzamanlı düzen algıladığında sizi uyarır. Bu kayıtlardan birinin üzerine geldiğinizde, düzeni geçersiz kılan kodun yığın izlemeleri ve düzeni zorunlu kılan kod gösterilir.

Bu pop-up'ta düzene ihtiyaç duyulan düğüm sayısı, yeniden düzenleme 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 eşzamanlı düzenleri teşhis etme bölümüne bakın.

Nesne ayırma izleme

Nesne ayırma izleme, zaman içindeki ayırmayı gösteren yeni bir bellek profili türüdür. Ayırma izlemeyi başlattığınızda Geliştirici Araçları, zaman içinde sürekli olarak yığın anlık görüntüleri alır. Yığın ayırma profili, nesnelerin nerede oluşturulduğunu gösterir ve tutma yolunu tanımlar.

Nesne ayırmalarını 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 profilini kaydetmeyi durdur'u (profil oluşturma bölmesinin sol alt köşesindeki kırmızı daire) tıklayın.

Tuval profili oluşturma (deneysel)

Son olarak, işte keşfetmeniz için tamamen deneysel bir özellik. Tuval profili oluşturma, bir tuval öğesinde yapılan WebGL çağrılarını kaydedip oynatmanıza olanak tanır. Bağımsız WebGL çağrıları veya çağrı grupları arasında adım adım ilerleyebilir ve oluşturulan sonuçları görebilirsiniz. Ayrıca, söz konusu belirli aramaları tekrar oynatmak için gereken süreyi görürsünüz.

Tuval profili oluşturmak için:

1. Geliştirici Araçları ayarlarının Denemeler sekmesinde Tuval inceleme özelliğini etkinleştirin. (Bu sekmeyi görmüyorsanız about:flags sayfasını açın, Geliştirici Araçları denemelerini etkinleştir ayarını etkinleştirin ve Chrome'u yeniden başlatın.)
2. Profiller sekmesini tıklayın.
3. Tuval çerçevesi yakala'yı seçin ve Anlık görüntü al'ı tıklayın.
4. Artık tuval çerçevesini oluşturmak için kullanılan çağrıları inceleyebilirsiniz.