Chrome Geliştirici Araçları (Kılavuz)

Chrome Developer Tools etkin bir şekilde nasıl kullanılır (Kılavuz)

Dil: Almanca

Chrome Developer Tools etkili bir şekilde kullanmayı öğrenin (Kılavuz)

Chrome Geliştirici Araçları ile web sitelerinizi analiz edebilir, düzenleyebilir, performans analizi yapabilir ve sitelerinizi çeşitli cihazlar ve ekran boyutları için test edebilirsiniz. Bu kılavuzda DevTools'un en önemli fonksiyonlarını öğreneceksiniz. HTML, CSS ve JavaScript hatalarını tespit etme, performansı ve bellek tüketimini optimize etme ve sayfalarınızın düzenini geliştirme yöntemlerini keşfetmek için neler yapabileceğinizi öğreneceksiniz - Eğitmen Stephan Haewß uygulamalı örneklerle size adım adım nasıl ilerleyeceğinizi gösterecektir!

Chrome Developer Araçlarının temel fonksiyonlarını öğrenin
HTML, CSS, JavaScript kodunu hata ayıklamak ve optimize etmek
Kod akışlarını takip etmek, hataları ortaya çıkarmak ve düzeltmek
CSS animasyonları, stil ve düzenlemeleri özelleştirin
Web sitelerinin performansını ve bellek tüketimini artırmak
Hatasız ve hızlı web siteleri için optimize edilmiş düzenlerle – Eğitmen Stephan Haewß tarafından altı saatten fazla süren bir kurs

Temiz bir kod, web sitelerinizin görünürlüğüne önemli ölçüde katkıda bulunur. Şimdi Chrome DevTools'u kullanarak sayfalarınızı analiz etmeyi ve optimize etmeyi öğrenin.

DETAYLAR

İçerik: 6 h Video Eğitimi
Lisans: özel ve ticari Kullanım hakları

Kategoriler

Web tasarımı, CMS ve geliştirme

Sevgiyle oluşturulmuştur:

Stephan Haewß

Chrome Geliştirici Araçları Kursuna Giriş

Chrome Geliştirici Araçları: 1.1 | Bu kurs boyunca ne öğreniyorsunuz?

Ücretsiz

Chrome Geliştirici Araçları: 1.1 | Bu kurs kapsamında ne öğreniyorsunuz?

Bu kurs kapsamında ele alınan tüm konular hakkında bir genel bakış sunulmaktadır.

Ücretsiz

Chrome Geliştirici Araçları: 1.2 | Test web uygulaması oluşturma

İlk Web uygulaması oluşturulur, Geliştirici Araçları'nın kullanımına ilişkin ilk adımlar açıklanır.

Ücretsiz

Chrome Geliştirici Araçları: 1.2 | Test web uygulaması oluşturma

İlk Web uygulaması oluşturulur, Geliştirici Araçları'nın kullanımına ilişkin ilk adımlar açıklanır.

Chrome Geliştirici Araçları: 1.3 | İşlevler hakkında ilk genel bakış

Ücretsiz

Chrome Geliştirici Araçları: 1.3 | Fonksiyonlara İlk Bakış

Geliştirici Araçları'nın farklı panellerine ve temel işleyişlerine genel bir bakış.

Stil, düzen, görünüm için "Öğeler" sekmesi üzerinden

Chrome Geliştirici Araçları: 2.1 | Elements sekmesinde DOM yapısını incele

Bir web sitesinin HTML yapısının detaylı bir şekilde incelenmesi ve öğeleri Öğeler sekmesinde nasıl seçip düzenleyeceği.

Chrome Geliştirici Araçları: 2.2 | Stil değiştir

CSS stilleri canlı olarak düzenleme ve web sitesinin görünümü üzerindeki etkilerini inceleme.

Chrome Geliştirici Araçları: 2.2 | Stil değiştir

CSS stilleri canlı olarak düzenleme ve web sitesinin görünümü üzerindeki etkilerini inceleme.

Chrome Geliştirici Araçları: 2.3 | HTML, DOM düzenleme

HTML yapısını değiştirme ve etkilerini DOM üzerinde gözlemleme.

Chrome Geliştirici Araçları: 2.4 | Mobil Görünüm - Duyarlı Tasarımı Test Et

Farklı cihaz boyutlarının simülasyonu ve web sitesinin uyumluluğunun kontrol edilmesi.

Chrome Geliştirici Araçları: 2.4 | Mobil Görünüm - Duyarlı Tasarımı Test Et

Farklı cihaz boyutlarının simülasyonu ve web sitesinin uyumluluğunun kontrol edilmesi.

Chrome Geliştirici Araçları: 2.5 | Pratik Egzersiz: Sayfa menüsünü onarın

Chrome Geliştirici Araçları: 2.5 | Uygulama: Sayfa menüsünü onarın

Bir sayfa menüsündeki hatanın giderilmesi.

Chrome Geliştirici Araçları: 2.6 | Pratik Egzersiz: Düzen/Aşırı Akışı Onarmak

Chrome Geliştirici Araçları: 2.6 | Pratik Egzersiz: Düzen/Aşırma Problemini Çözmek

Düzen sorunlarının ve taşma hatalarının çözümü.

Chrome Geliştirici Araçları: 2.6 | Pratik Egzersiz: Düzen/Aşırma Problemini Çözmek

Düzen sorunlarının ve taşma hatalarının çözümü.

Komut dosyası hata ayıklama Sources ve Console üzerinden yapılır

Chrome Developer Araçları: 3.1 | Tanıtım: Betik Hata Ayıklama ve ilk kesme noktasını ayarlama

Chrome Geliştirici Araçları: 3.1 | Tanıtım: Betik Hata Ayıklama ve ilk kesme noktasını ayarlama

JavaScript kodlarını hata ayıklamaya ve kesme noktaları koymaya giriş.

Chrome Geliştirici Araçları: 3.2 | Pratik Alıştırma: TypeScript uygulamasını hata ayıklama

Chrome Geliştirici Araçları: 3.2 | Uygulamayı TypeScript ile hata ayıklama pratiği

TypeScript kodunun Geliştirici Araçları ile hata ayıklama.

Chrome Geliştirici Araçları: 3.3 | Pratik Egzersiz: Hata Ayıklama - Diziden Silme Hatası Bulma

Chrome Geliştirici Araçları: 3.3 | Kullanışlı Egzersiz: Hata Ayıklama - Diziden Silme Hatası Bulma

Bir diziden öğelerin kaldırılması sırasında bir hatanın aranması ve giderilmesi.

Chrome Geliştirici Araçları: 3.4 | Kullanışlı Egzersiz: React uygulamasını hata ayıklamak

Chrome Geliştirici Araçları: 3.4 | Pratik Alıştırma: React uygulamasını hata ayıklama

React uygulamaları için özgül hata ayıklama teknikleri.

Chrome Geliştirici Araçları: 3.5 | Koşullu Kesme Noktaları

Chrome Geliştirici Araçları: 3.5 | Koşula Bağlı Duraklamalar

Belirli koşullar altında tetiklenen kesme noktaları oluşturun.

Chrome Geliştirici Araçları: 3.6 | DOM-Kesme Noktaları

Chrome Developer Araçları: 3.6 | DOM Kırılma Noktaları

Belirli DOM öğelerindeki değişikliklerin izlenmesi.

Chrome Geliştirici Araçları: 3.7 | Alım-Durakları

Chrome Geliştirici Araçları: 3.7 | Getirme-Kesme Noktaları

Ağ isteklerinde kodun durması.

Chrome Geliştirici Araçları: 3.8 | İstisna-Kesme Noktaları

Hatalar meydana geldiğinde otomatik durdurma.

Chrome Geliştirici Araçları: 3.9 | Overrides ve Çalışma Alanı

Chrome Geliştirici Araçları: 3.9 | Overrides ve Workspace

Orijinal kodu değiştirmeden stiller ve betiklerin uyarlanması.

Chrome Geliştirici Araçları: 3.10 | Adımlarla ve belirli noktalara kadar hata ayıklama

Chrome Geliştirici Araçları: 3.10 | Adım adım hata ayıklama ve belirli noktalara ayakta durmak

Debuglama sürecinin detaylı kontrolü.

Chrome Geliştirici Araçları: 3.11 | Konsol: Genel Bakış, basit kod yürütme ve çıktılar

Chrome Geliştirici Araçları: 3.11 | Konsol: Genel Bakış, basit kod yürütü ve çıktılar

Konsol ve temel fonksiyonlarının tanıtımı.

Chrome Geliştirici Araçları: 3.12 | Konsolda DOM öğelerine erişme

Chrome Geliştirici Araçları: 3.12 | Konsolda DOM öğelerine erişim

DOM manipülasyonu doğrudan konsol üzerinden.

Chrome Geliştirici Araçları: 3.13 | Parçalar ve Zaman Ölçümü Konsolda

Chrome Geliştirici Araçları: 3.13 | Snippets ve Zaman Ölçümü Konsolda

Yeniden kullanılabilir kod parçacıkları ve performans ölçümleri.

Chrome Geliştirici Araçları: 3.14 | Günlük çıktıları gruplandırma ve stil verme

Günlük çıktılar renk ve yazı tipiyle değiştirilebilir ve gruplanabilir.

Chrome Geliştirici Araçları: 3.15 | Diğer faydalı Konsol Methodları

Chrome Geliştirici Araçları: 3.15 | Daha fazla yararlı Konsol Metotları

Bazı pek kullanılmayan ama yine de faydalı Console fonksiyonları.

Ağ analizi ve optimizasyonu

Chrome Geliştirici Araçları: 4.1 | Ağ: Fonksiyonlar hakkında genel bilgi

Chrome Geliştirici Araçları: 4.1 | Ağ: Fonksiyonların genel bir bakışı

Ağ isteklerinin ve yanıtlarının analizi.

Chrome Geliştirici Araçları: 4.2 | Ağ: Kısıtlama, Başlıklar ve Önizleme

Yavaş ağ bağlantılarının simülasyonu ve HTTP başlıklarının incelenmesi.

Performans ve bellek optimizasyonu

Chrome Geliştirici Araçları: 5.1 | Profiler - Performansı inceleyin ve optimize edin

JavaScript kodundaki performans darboğazlarının belirlenmesi.

Chrome Developer Araçları: 5.2 | Hafıza Profilleyici ile bellek tüketimini optimize etmek

Chrome Geliştirici Araçları: 5.2 | Bellek Profilleyici ile bellek kullanımını optimize etmek

Bellek tüketiminin analizi ve bellek sızıntılarının tanımlanması.

Uygulama sekmesi ve diğer araçlar

Chrome Geliştirici Araçları: 6.1 | Faydalı Araclar ve Renderleme Sekmesi

Chrome Geliştirici Araçları: 6.1 | Faydalı Araçlar ve Rendering Sekmesi

Performans optimizasyonu için diğer araçlar.

Chrome Geliştirici Araçları: 6.2 | Animasyonları incelemek ve ayarlamak

Chrome Geliştirici Araçları: 6.2 | Animasyonları gözden geçirme ve ayarlama

CSS animasyonlarının ve geçişlerinin detaylı analizi. Zamanlama fonksiyonlarının ve özelliklerin ayarlanmasıyla performansın optimize edilmesi.

Chrome Geliştirici Araçları: 6.3 | Uygulama Sekmesi ile web uygulama kaynaklarını inceleyin

Chrome Geliştirici Araçları: 6.3 | Uygulama Sekmesi ile Web Uygulama Kaynaklarını İncele

Web uygulamasının depolanan verilerinin incelenmesi: Local Storage, Session Storage ve IndexedDB. Depolama yönetiminin optimize edilmesi.

Chrome Geliştirici Araçları: 6.4 | Uzantı React Dev Tools kullanın

React DevTools tarayıcı eklentisinin tanıtımı. React bileşen yapısının, Props ve State'nin denetlenmesi.

Ayarlar

Chrome Geliştirici Araçları: 7 | Chrome Geliştirici Araçlarının En Önemli Ayarları

Verimli bir çalışma için Araç Geliştirme Ayarlarının yapılandırılması. Temaların, klavye kısayollarının ve diğer ayarların özelleştirilmesi.

Diğer tarayıcıların geliştirici araçları

Chrome Geliştirici Araçları: 8.1 | MS Edge Geliştirici Araçları

Chrome Geliştirici Araçları: 8.1 | MS Edge-DevTools

Chrome-Dev-Tools'a çok benzer, ancak ayrıntı farkları vardır.

Chrome Developer Tools: 8.2 | Firefox Geliştirici Araçları

Chrome Geliştirici Araçları: 8.2 | Firefox Geliştirici Araçları

Belirgin farklılıklar bulunuyor, ancak temelde çok benzer.

Chrome Geliştirici Araçları: 8.3 | Safari-Geliştirici Araçları

Chrome'a kıyasla bazı farklılıklar olabilir, ancak prensip burada da aynıdır.

İçerik detayları

Chrome Geliştirici Araçları ile Web Sayfalarınızı Optimize Edin
Kusursuz, hızlı yüklenen ve her ekran boyutunda iyi bir performans sergileyen bir web sitesi mi? Bunları elde etmek için sayfalarınızın kodunu analiz etmeli ve optimize etmelisiniz. Bunu başarmak için Chrome Geliştirici Araçları mükemmel bir seçenektir. HTML, CSS ve JavaScript kodlarınızda hataları bu araçlarla tespit edebilirsiniz. Ayrıca performansı detaylı olarak inceleyebilir, kod akışlarını ve bellek tüketimini gözlemleyebilirsiniz. Bu bilgileri kullanarak sayfalarınızı hedefe yönelik şekilde düzenleyebilir ve sonuç olarak hata ayıklama ve optimizasyon yoluyla sayfalarınızın görünürlüğünü artırabilirsiniz.
Chrome Geliştirici Araçları'nı nasıl etkili bir şekilde kullanacağınızı öğrenmek için yazılım geliştirici ve eğitmen Stephan Haewß'in bu altı saatlik eğitim videosunu izleyin. Chrome DevTools hakkında temellerden başlayarak ileri düzey tekniklere kadar, sayfalarınızın temiz, güçlü bir şekilde performans göstermesi için!

HTML, CSS, JavaScript – Normalize Edilmiş Düzenlemelerle Temiz, Hızlı Web Sayfaları İçin Hata Ayıklama

Kurs, tarayıcıda doğrudan erişilebilen Chrome Developer Tools'un Tanıtımı ile başlar. DevTools'ların ne olduğunu ve temel olarak nasıl uygulayabileceğinizi öğreneceksiniz. Daha sonra, Elements- sekmesiyle, sayfalarınızın stilini, düzenini ve görünümünü inceleyebilir ve düzeltebilirsiniz. Kaynaklar ve Konsol bölümleriyle birlikte Script Hata Ayıklaması yaparsınız. Ayrıca Chrome Geliştirici Araçları'nı kullanarak ağ analizi, performans ve bellek optimizasyonu nasıl yapılacağını öğreneceksiniz. Son olarak, diğer tarayıcıların DevTools'larını da gözden geçireceksiniz. Genel olarak, bu kurs, Chrome'un DevTools'larını kullanarak sayfaları hata ayıklamak ve optimize etmek isteyen tüm web geliştiricilere uygundur.

Chrome DevTools'u Etkili Bir Şekilde Kullanma - Ders içeriği genel Bakış

Chrome DevTools'a Giriş: Kurs, DevTools'u nasıl açacağınızı, gezinmeyi ve HTML, CSS ve JavaScript'i düzenleme ve hata ayıklama için en önemli işlevleri nasıl etkili bir şekilde kullanacağınızı gösterir.
HTML ve CSS Hata Ayıklama: Chrome DevTools'u kullanarak bir web sayfasının DOM ağacını inceleyerek, HTML ve CSS'yi canlı modda doğrudan düzenleyerek düzen problemlemlerini ve CSS stil hatalarını hemen giderebilirsiniz - değişiklikleri kalıcı hale gelmeden önce tasarımı hızlı bir şekilde test etmek ve uyarlamak için idealdir.
JavaScript Hata Ayıklama: JavaScript dosyalarını nasıl yükleyeceğinizi, kesme noktaları nasıl belirleyeceğinizi ve kodu adım adım nasıl işleteceğinizi öğrenin. Değişkenler ve nesneleri canlı olarak inceleyebilirsiniz. Çağırmaların geri izlenmesini CallStack kolaylaştırır - hatanın doğru bir şekilde bulunması için idealdir.
Konsol Kullanımı: Chrome Development Tools'un konsolu, logları açmanıza ve analiz etmenize, JavaScript kodunu çalıştırmanıza, web sayfası elemanlarını doğrudan değiştirmenize olanak tanır. Hedefli log çıktılarıyla kodu detaylı olarak analiz edebilir ve iyileştirme yapabilirsiniz, bu da hata ayıklamayı ve performansı önemli ölçüde kolaylaştırır.
Performans Optimizasyonu: Ağ isteklerini ve yükleme sürelerini kontrol edin, depolama kullanımını izleyin ve bellek sızıntılarını tanımlayın. JavaScript performansını hedefleyerek ve detaylı uygulama performans analizleri yaparak yükleme hızını ve kaynak yönetimini etkili bir şekilde iyileştirebilirsiniz.
İleri Teknikler: Chrome DevTools'un Uygulama- paneli Web Depolama, LocalStorage, IndexedDB ve Önbellek gibi web depolarına erişmenizi sağlar. Ayrıca Service Worker ve Manifest'ları yönetebilir ve reaktif uygulamaları daha iyi hata ayıklamak için React DevTools gibi uzantıları entegre edebilirsiniz. Özelleştirilebilir ayarlar, DevTools'u bireysel çalışma gereksinimleriniz için en uygun şekilde yapılandırmanıza olanak tanır.