Web Sitesi Sorunlarını Gidermek için Chrome Geliştirici Araçları Nasıl Kullanılır

Web Sitesi Sorunlarını Gidermek için Chrome Geliştirici Araçları Nasıl Kullanılır

Chrome DevTools, geliştiriciler için önemli bir varlıktır. Diğer tarayıcılar oldukça kullanışlı sorun giderme araçları sunarken, çok işlevli arayüzü ve popülerliği nedeniyle Chrome DevTools dikkatinize değer.





Chrome, güçlü hata ayıklama araçları paketi nedeniyle geliştiriciler için en popüler tarayıcıdır. Chrome DevTools'u kullanmak kolaydır, ancak bundan en iyi şekilde yararlanmak için nasıl çalıştığını anlamanız gerekir.



Chrome Geliştirici Araçları Nasıl Çalışır?

Chrome DevTools, hata konsolu ve diğer hata ayıklama ve izleme araçları aracılığıyla bir web sitesindeki sorunları çözmenize olanak tanır. DevTools'u kullanmak, ön uç boşluklarını ortaya çıkarır ve web sitenizin mobil ve tablet cihazlarda nasıl göründüğünü izlemenize olanak tanır.





DevTools ile bir web sitesinin kodunda JavaScript, HTML ve CSS gibi gerçek zamanlı düzenlemeler yapabilir ve yaptığınız değişikliklerin anında sonuçlarını alabilirsiniz.

DevTools aracılığıyla yaptığınız değişiklikler web sitesini kalıcı olarak etkilemez. Gerçek kaynak koduna uygulamışsınız gibi, yalnızca beklenen sonucu geçici olarak görüntülerler. Bu, web sitenizin çok daha hızlı yüklenmesini sağlamanın yollarını bulmanızı sağlar ve hataları gidermeyi kolaylaştırır.



Chrome Geliştirici Araçlarına Nasıl Erişilir

Chrome DevTools'a çeşitli şekillerde erişebilirsiniz. Mac OS'de geliştirici araçlarını kısayol yöntemiyle açmak için Komut + Seç + Ben . Windows işletim sistemi kullanıyorsanız, Ctrl + Üst Karakter + I klavyenizdeki tuşlar.

Alternatif olarak, ekranın sağ üst köşesindeki üç noktayı tıklayarak Chrome geliştirici araçlarına erişebilirsiniz. Başlamak Daha fazla araç ve seçin Geliştirici araçları . Başka bir seçenek de web sayfasına sağ tıklayıp İncelemek seçenek.



Web Sitesi Teşhisi için Chrome Geliştirici Araçlarını Kullanma

Chrome DevTools, bir web sayfasında ince ayar yapmak ve sorunları gidermek için çeşitli yollar sunar. DevTools'un size nasıl yardımcı olabileceğine bir göz atalım.

Web Sitenizin Akıllı Telefonda Nasıl Göründüğünü Görün

Chrome tarayıcınızı geliştirici moduna geçirdiğinizde, web sayfanızın yarı boyutlu bir sürümünü oluşturur. Ancak, bu size bir akıllı telefon veya tablette nasıl görüneceğine dair gerçek bir görünüm vermez.



Neyse ki, bir web sayfasının ekran boyutunu ayarlamanın yanı sıra Chrome DevTools, farklı mobil ekran türleri ve sürümleri arasında geçiş yapmanızı da sağlar.

Bu seçeneğe erişmek için İncelemek modu. Ardından, üzerine tıklayın Duyarlı DevTools'un sol üst köşesindeki açılır menüden tercih ettiğiniz mobil cihazı seçin. Web sayfası daha sonra, seçtiğiniz mobil cihazın boyutuna uyacak şekilde oluşturulur ve ayarlanır.

iphone 11 pro max gizlilik ekran koruyucusu

Bir Web Sayfasının Kaynak Dosyalarına Erişin

Bir web sayfasını oluşturan dosyalara Chrome DevTools aracılığıyla erişebilirsiniz. Bu dosyalara erişmek için Kaynaklar DevTools menüsünün üst kısmındaki seçenek. Bu, web sitesinin dosya sistemini ortaya çıkarır ve ayrıca size düzenleme sağlar.

Ayrıca, birçok kaynağa sahip bir web sayfasıyla uğraşırken yardımcı olabilecek kaynak dosyaları da arayabilirsiniz. DevTools aracılığıyla bir kaynak dosya aramak için Arama konsolun hemen üstündeki seçenek.

Ancak, bulamazsanız Arama seçeneği, klavye kısayollarını kullanmak daha iyi bir alternatiftir. Mac OS'de, düğmesine basın. Komut + Seç + F kaynak dosya aramak için tuşlar. Windows işletim sistemi kullanıyorsanız, Ctrl + Üst Karakter + F kaynak dosya arama çubuğuna erişmek için tuşuna basın.

Bir Web Sayfasında Canlı Düzenlemeler Gerçekleştirin

DevTools'u kullanmanın temel amaçlarından biri, bir bir web sayfasındaki öğelerin anında sahte düzenlemesi . Geliştirici araçlarına geçtikten sonra, bir web sitesinin HTML içeriğini şuraya tıklayarak düzenleyebilirsiniz: Elementler seçenek. Ardından, kod düzenleyicide değişiklikleri uygulamak istediğiniz herhangi bir noktaya sağ tıklayın ve HTML olarak düzenle .

Satır içi olmayan CSS özelliklerini düzenlemek için Kaynaklar . Ardından, düzenlemek istediğiniz CSS dosyasını seçin. Canlı bir düzenleme gerçekleştirmek için imlecinizi kod konsolu içinde tercih ettiğiniz satırın üzerine getirin. Bunu yapmak, web sayfasına uyguladığınız herhangi bir stil değişikliği hakkında size anında geri bildirim sağlar.

Bir sayfayı DevTools aracılığıyla düzenlediğinizde, sayfayı tarayıcınıza yeniden yüklemenin onu orijinal biçimine döndüreceğini ve düzenlemenin yalnızca sizin tarafınızdan görülebileceğini unutmayın. DevTools aracılığıyla düzenleme, o web sitesinin diğer kullanıcılar için sorunsuz çalışmasını veya kullanımını etkilemez.

DevTools Konsolu ile JavaScript Kodunda Hata Ayıklama

JavaScript'te hata ayıklamanın en iyi yollarından biri Chrome'un geliştirici araçlarını kullanmaktır. Hatanın tam yerinin yanı sıra geçersiz komut dosyaları hakkında doğrudan bir rapor verir.

JavaScript ile bir web sitesi tasarlarken DevTools'u her zaman açık tutmak iyi bir uygulamadır. Örneğin, çalıştırma konsol.log() JavaScript komutu, program başarılı bir şekilde çalışıyorsa, bu günlüğün sonucunu DevTools konsolunda görüntüler.

Varsayılan olarak konsol, web sitenizdeki tüm JavaScript sorunlarını bildirir. Konsolu DevTools'un alt kısmında bulabilir veya simgesine tıklayarak erişebilirsiniz. Konsol Chrome DevTools penceresinin üst kısmındaki seçenek.

Veritabanından Kaynak Yüklemeyi İzleme

Konsol, JavaScript'te hata ayıklamaya ek olarak, web sitesinin veritabanından doğru şekilde yüklenmeyen kaynakların ayrıntılarını da verebilir.

Bu, arka uç sorunlarının hatalarını ayıklamanın her zaman en iyi yolu olmasa da, yine de size hangi kaynakların bir hata döndürdüğünü söyler. 404 bu öğelerin bir veritabanı sorgusunu çalıştırdıktan sonra hata oluştu.

İlgili: Yaygın Web Sitesi Hataları ve Anlamları

Chrome Geliştirici Araçlarının Yönünü Değiştirin

Chrome geliştirici araçlarının konumunu değiştirmek için DevTools içindeki üç menü noktasına tıklayın (tarayıcıdaki ana nokta değil). Ardından, tercih ettiğiniz konumu seçin rıhtım tarafı seçenek.

Chrome DevTools Uzantılarını Yükleyin

Ayrıca Chrome DevTools ile çalışan dile veya çerçeveye özel uzantılar da yükleyebilirsiniz. Bu uzantıları yüklemek, web sayfanızda daha verimli bir şekilde hata ayıklamanıza olanak tanır.

Chrome DevTools için mevcut uzantıların bir listesine Chrome'un Öne Çıkan DevTools Uzantıları galeri.

Bir Web Sitesinde Güvenlik Sorunlarını Kontrol Edin

Chrome DevTools, web sitenizin kullanılabilirliği gibi parametrelere dayanarak web sitenizin ne kadar güvenli olduğunu değerlendirmenize olanak tanır. web güvenlik sertifikaları ve diğerlerinin yanı sıra bağlantının ne kadar güvenli olduğu. Web sitenizin güvenli olup olmadığını kontrol etmek için Güvenlik DevTools'un en üstündeki seçenek.

NS Güvenlik sekmesi, web sitenizin güvenlik ayrıntılarına ilişkin bir genel bakış sunar ve olası tehditleri size bildirir.

Web Sitenizi Denetleyin

Chrome DevTools, belirli parametrelere göre web sitenizin genel performansını kontrol etmenizi sağlayan bir özelliğe sahiptir.

Bu özelliğe erişmek için, deniz feneri DevTools penceresinin üst kısmındaki seçenek. Ardından, kontrol etmek istediğiniz parametreleri seçin ve ardından Mobil veya masaüstü Web sayfanızın farklı platformlarda nasıl performans gösterdiğini görmek için seçenekler.

Ardından, üzerine tıklayın Rapor oluştur Daha önce seçtiğiniz parametrelere dayalı olarak web sayfanızın bir analizini yapmak için.

Ayrıca, bir web sitesinin çalışma süresini veya yükleme performansını, simgesine tıklayarak da değerlendirebilirsiniz. Verim seçenek. Bir testi çalıştırmak için, yanındaki simgeye tıklayın. Kayıt düğmesine tıklayın çalışma zamanı analizi gerçekleştirme seçeneği. Alternatif olarak, yükleme süresi performansını değerlendirmek için altındaki yeniden yükle düğmesine tıklayın. Tıklamak Durmak analizörü durdurmak ve sonuçları görüntülemek için

Chrome DevTools'tan Yararlanın

Ne için ihtiyacınız olduğuna bağlı olarak, Chrome DevTools, basit web sitesi hata ayıklamasından daha fazlasını yapmanıza olanak tanır. Neyse ki DevTools, tüm beceri seviyelerindeki programcılar için kullanımı kolaydır. Hatta ziyaret ettiğiniz web sitelerinin kaynak koduna bakarak web sitesi ön uç geliştirmenin bazı temellerini öğrenebilirsiniz.

chrome neden bu kadar çok bellek kaplıyor?

Bu makalede tartışmadığımız diğer bazı seçenekleri de keşfedebilirsiniz. Bu nedenle, mevcut özelliklerle oynamaktan çekinmeyin. Ayrıca, bu özellikleri değiştirmek bir web sitesine biraz zarar vermez.

Paylaş Paylaş Cıvıldamak E-posta Raspberry Pi'de Chrome OS Nasıl Kullanılır

Bir Chromebook'a paranız yetmiyor mu? Raspbian'a bir alternatif mi arıyorsunuz? Raspberry Pi'nize bir Chrome OS sürümünü nasıl yükleyeceğiniz aşağıda açıklanmıştır.

Sonrakini Oku İlgili konular
  • internet
  • Programlama
  • HTML
  • Web Geliştirme
  • JavaScript
  • Google Chrome
Yazar hakkında Idisou Omisola(94 Makale Yayımlandı)

Idowu akıllı teknoloji ve üretkenlik konusunda tutkulu. Boş zamanlarında kodlamayla uğraşıyor ve canı sıkılınca satranç tahtasına geçiyor ama arada sırada rutinden kopmayı da seviyor. İnsanlara modern teknolojinin yolunu gösterme tutkusu onu daha fazla yazmaya motive ediyor.

Idowu Omisola'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın