Bir Tarayıcı Geliştiricisi Üzerine Eğitim: Bilmeniz Gereken 10+ Hileler
Tarayıcı geliştiricilerine aşina değilseniz, web sitesi ile uğraşan herkes için en yararlı şeylerden biridir, bu da sahibi, meraklı, sürdürülebilir geliştirici veya diğerleri olarak. Geliştirici Araçları veya Geliştirici Araçları, Markup CSS ve JavaScript hataları gibi herhangi bir web sitesi hakkında birçok şey söyleyebilir. Buna ek olarak, ön uç değişiklik sürücüsünü test etmenize, sitenizin duyarlı tasarımını kontrol etmenize ve hatta performansını optimize etmenize olanak tanır. Buna ek olarak, tamamen ücretsizdir ve doğrudan tüm ana tarayıcılara inşa edilirler. Kullanımını öğrenmeye hazırsanız, bu tarayıcı geliştirici öğreticisi sizin için doğru yerdir.
Bir tarayıcı geliştiricisi nasıl açılır Bir dizi araç sunan şeyleri kullanmak için önce ona nasıl erişileceğini öğrenmelisiniz. Bunu çeşitli tarayıcılarda ve işletim sistemlerinde yapmaktır:
Chrome – Menüde Diğer Araçlar> Geliştirici Araçları’nı tıklayın. Ayrıca sayfada sağa tıklayabilir ve inceleyin. Son olarak, Windows sisteminde MAC’de bir CMD+OPT+I klavye kısayolu ve CTRL+Shift+I vardır.
SAFARI – Web geliştirme araçlarını Tercihler> Devam> Menü çubuğundaki geliştirme menüsünü görüntüleyin. Ardından Geliştirme> Web Müfettişini Göster veya CMD+OPT+I tuşuna basın.
Firefox – Menüde Web Geliştiricisi Erişim> Toogle Araçları. Elemanları sağ tıklama veya Ctrl+Shift+I / CMD+OPT+I ile de kontrol edebilirsiniz.
Her durumda, tarayıcı penceresinde bir set menüsü açacaktır. Genellikle alttalar, ancak yapılandırmanıza bağlı olarak yanda da görünebilirler. Ayrıca yeni bir pencereye taşıyabilirsiniz.
HTTP isteklerini izlemenin yolu web sayfalarına girip çıkış
Bilgisayarda tuttukları sayfalarda veya kaynaklarda çalışan dosyaları ve komut dosyalarını kontrol etme ve hata ayıklama yeteneği
JavaScript günlüğünü görmenin ve sayfadaki komutu denemenin bir yolu
Hız yükünü artırmak için web sitenizin performansını izleyecek araçlar
Duyarlı tasarımları test etmek için web sitenizin hücresel ekranına geçme yeteneği
Tüm geliştirici araçlarının tamamen aynı olmadığını, bu nedenle bazı işlevler başka yerlerde veya eksik olabilir.
İyi bir tarayıcı geliştiricisi nasıl kullanılır, şimdi tarayıcı geliştiricinize nasıl erişeceğinizi ve ne beklendiğini, size nasıl yardımcı olduğunu bildikten sonra nasıl kullanılır? Aşağıda, sizin için aracın çeşitli işlevleri tarafından neler yapılabileceğine dair derin bir bakış sunacağız. Bu örnek için bir Chrome geliştiricisi kullanacağız, çünkü en büyük pazar payına sahip bir tarayıcı. Ancak, deneyiminiz başka bir tarayıcı kullanmaya benzer olmalıdır. 1. HTML sayfasını kontrol edin Bir geliştirme aracı açarken göreceğiniz ilk şey genellikle HTML’deki sayfa yapısının bir temsilidir.
Bu, sayfa öğelerini, sınıflarını ve kimliklerini, birbirleriyle nasıl yuva yaptıklarını ve komut dosyalarını, stil sayfalarını ve kafa ve bacaklarda yayınlanan diğer kaynakları görmenizi sağlar. İmleci herhangi bir öğeye yönlendirdiğinizde, tarayıcı bunu sayfada ve marj veya dolgu gibi herhangi bir CSS düzen özelliği de vurgulayacaktır. Şimdi görünür değilse, herhangi bir öğeyi sağlayın ve ekrana kaydırın. Sayfadaki öğeleri seçip site kodunda görmek için bir seçmen (Dev veya CTRL+Shift+C penceresinin sol üst köşesinde) de kullanabilirsiniz. Sağ -Click> Inspect aynı etkiye sahiptir. HTML ağaçlarında klavyenizle de gezinebilirsiniz. Yukarı ve aşağı hareket edin ve öğeleri küçültmek/iptal etmek için sol ve sağ kullanın. Son olarak, üstteki arama alanı, dizeleri, sınıfları ve diğerlerini filtrelemenizi sağlar. 2. HTML öğelerini manipüle etme HTML sayfalarını görmenin yanı sıra, sayfada da değişiklik yapabilirsiniz. Değiştirmek için kodun neredeyse tüm bölümlerini iki kez tıklatın. Bu şekilde, başlık etiketini H3’ten H2’ye değiştirebilir, sınıf adını silebilir veya değiştirebilir, bir stil satırı ekleyebilir, sayfaya metin değiştirebilir veya Dom’un tüm öğelerini gizleyip silebilirsiniz. Ayrıca farenizle öğeleri bir yerden diğerine çekebilir ve serbest bırakabilirsiniz.
Buna ek olarak, sağ -Click> Force Durumu, imleci, odaklanma, aktif, ziyaret edilen vb. Yönlendirecek öğeleri kalıcı olarak ayarlamanıza olanak tanır. Tarayıcı pencereniz size sayfada ne yaptığını gösterecektir. 3. CSS ile deneyin Dikkat edeceğiniz bir sonraki şey, her elemanın ilgili CSS’sinin HTML’nin sağında görünmesidir. Bu şekilde, düzenin stilini ve işaretlemesini anlayabilirsiniz. Bu, diğer web sitelerinde isteyebileceğiniz tasarımın nasıl elde edildiğini öğrenmenin iyi bir yoludur. Ayrıca, sahip olduğunuz tasarım fikirlerini çalışmayan veya test etmeyen CSS’yi hata ayıklamak için gerçek zamanlı olarak değiştirebilirsiniz. Her sınıfın CSS özelliğini veya onu değiştirmek için sağdaki kimliğe tıklamanız yeterlidir. Aşağıdaki örnekte yazı tipi boyutu özelliğini artırırız. Sayfa üzerindeki aşağıdaki efektler:
Aynı şekilde, CSS mülkünü silebilir, tamamen yeni bir mülk ekleyebilir ve seçmenleri değiştirebilir veya ekleyebilirsiniz. HTML gibi, belirli bir şey bulmanıza yardımcı olacak bir arama çubuğu vardır. Ayrıca sağ üstteki artı simgesinden yeni stil kuralları ekleyebilirsiniz (veya birkaç tarayıcıda sağ -tıklatma> yeni kurallar). Sağ üst köşedeki .cls aracılığıyla HTML yapısını bozmadan buradan sınıflar bile ekleyebilirsiniz. Sınıf adını girin ve öğeye otomatik olarak uygulanır. Son olarak, aşağıda: HOV aynı yerde görünümünde değişiklik yapmak için bir öğeye farklı bir statü uygulayabilirsiniz. Tüm bunların sadece sizin tarafınızdan görülebileceğini unutmayın, genel olarak halk değil. Kalıcı değişiklikler yapmak için, değiştirilmiş CSS kurallarını işaretleyip kopyalayın ve tema stili sayfanıza ekleyin. 4. Kutu Modelini CSS ile ilgili son şey kullanın: Stilin bir parçası olarak, kutu modelinin bir temsilini bulursunuz.
Burada, elementlerin yüksekliğini ve genişliğini, dolguyu, sınır kalınlığını ve marjını görebilirsiniz. İmleci özelliklerden birine yönlendirmek de Dom’da görüntülenir. Ayrıca, herhangi bir parçayı iki kez tıklayıp sayıları yazarak herhangi bir özelliği değiştirebilirsiniz. Yani, alt kenar boşluğunu değiştirmek istiyorsanız, sadece bunu yaparsınız ve sayfadaki etkiyi görürsünüz. JavaScript HTML ve CSS’nin yanı sıra, JavaScript’in yanı sıra site tasarımı için bir başka önemli programlama dilidir. Neyse ki, tarayıcı geliştiricilerinin de kaynak panelinde bulabileceğiniz araçlar için araçları var. Burada, site dosyasına göz atabilir, kodu okuyabilir ve düzenleyebilir ve varsayılan hata ayıklama aracını kullanabilirsiniz. Bununla birlikte, burada yapabileceğiniz en önemli şeylerden biri de kesme noktalarına girmektir. Bu, örneğin, bir hatanın meydana gelip gelmediğini görmek için belirli bir olay sırasında kod yürütmeyi duraklatmanıza olanak tanır. Daha sonra, sorunu bulana kadar sağ üst köşedeki bir simgeden bir kerede bir satır kodunu izleyebilirsiniz. Kodu tarayıcı aracının içindeki doğrudan değiştirebilir ve ardından düzeltip düzeltmediğini görmek için komut dosyasına devam edebilir ve/veya yeniden yükleyebilirsiniz. Tüm bunlar hakkında daha fazla bilgi. 6. JavaScript girin ve çalıştırın JavaScript ile çalışmak için diğer önemli araçlar konsollardır.
Burada, sitenizdeki JavaScript ile birlikte oturum açmak için gönderilen tüm mesajları (Console.log aracılığıyla) bulacaksınız. Bu, kodun doğru sırada mı çalıştırıldığını veya bir hata olup olmadığını görmenizi sağlar. Ayrıca, CSS’ye benzer şekilde, bir konsolda JavaScript ile deney yapabilirsiniz. Örneğin, sayfanızda nasıl çalıştığını görmek için bir açıklama yaparsınız. Mantıklısa onları kopyalar ve sayfalar aracılığıyla kalıcı hale getirin. Buna ek olarak, konsol ayrıca, sayfanızla hiçbir ilgisi olmayan ve kullanılmayan JS ve CSS’yi bulmanıza olanak tanıyan JavaScript ile denemek için bir oyun alanı olarak işlev görür. 7. Site Performans Analizi Bir krom tarayıcı aracıyla yapabileceğiniz başka bir şey, web sitesinin hızını analiz etmektir. Aslında üçüncü taraflı araçlar hakkında hız testi ile ilgili tüm öğreticilere sahibiz, ancak bunu bir tarayıcı aracında da yapabilirsiniz. Bunun için denetim sekmesini açın. Burada, sitenizdeki her türlü denetim çalıştırabilirsiniz. Şimdilik, sadece performansla ilgileniyoruz, bu yüzden diğerlerini silin. Bundan sonra, mobil cihazlar veya masaüstü bilgisayarlar için sitenin performansını ölçüp ölçmeyeceğinizi seçin. Ardından, rapor için basın ve aşağıdakilere benzer bir şey görene kadar bekleyin. Gaziler, bunun Google PagesPeed Insights’ı kullanırken elde ettiğiniz veriler olduğunu bileceklerdir. Bu, neyin optimize edildiği ve sayfanızda neyin optimize edilmediğine ve nasıl artırılacağına dair çok fazla bilgi verir. Bu sonuçla nasıl çalışacağınız hakkında ayrıntılar almak istiyorsanız, yukarıda belirtilen hız testi yayınımızı kontrol edin. Harika olan şey, bir geliştirici ile, sitenizde en büyük farkı neyin yaratacağını görmek için oluşturma engelleme komut dosyalarını bulma ve devre dışı bırakma gibi değişiklikleri de deneyebilirsiniz. Ancak, bu tek eğitim için çok fazla, bu yüzden belgeleri kontrol edin. 8. Mobil cihazımı simüle etmek, hücresel trafiğin çok önemli hale geldiğini ve daha fazla insanın mobil cihazlarında bir masaüstü bilgisayardan daha fazla insanın keşfettiğini söylemesi gerekmeyebilir. Bu nedenle, web sitenizi nasıl oluşturacağınızı öğrenmeniz çok önemlidir. dostça hücresel. Bu, bir tarayıcı geliştiricisinin, sitenizi mobil cihazlarla – tam tarayıcınızda görme deneyimini simüle etmenize izin vererek yardımcı olabilecek başka bir alandır. Buna Sol üst köşedeki açık bir geliştirici veya küçük bir mobil cihaz simgesi ile Ctrl+Shift+M aracılığıyla erişebilirsiniz. Bu, sayfanızın şöyle görünmesini sağlayacaktır: Sitenizin daha küçük bir ekranda nasıl göründüğünü görmek için çerçeve tarafını sürükleyin ve çıkarın. Veya boyutları sayısal olarak üst bıçaklara girin. Aynı yerde, doğru ekran boyutlarını almak için belirli bir cihaz seçmek için açılır menüyü de kullanabilirsiniz. Düzenle düğmesi üzerinden daha fazlasını ekleyin veya kendi cihazınızı girin. Portre modları ve manzaralar arasında geçiş yapmak için sağdaki simgeyi kullanın. Yüzde, yakınlaştırma seviyesini ayarlamanızı sağlar. Düğmeyi üç noktalı tıkladığınızda, medya kuyruğunun görüntüsünü etkinleştirebilirsiniz. Bu, CSS’nizde bulunan kesme noktasını etkinleştirecektir (WordPress’e duyarlı bir tema oluşturma konusundaki kılavuzumuzda daha fazla bilgi). ViewPart’ın boyutunu otomatik olarak bu boyuta değiştirmek için bunlara tıklayın. Son olarak, çevrimiçi okuyan açılır menü, farklı bağlantı hızlarını simüle etmenizi sağlar (cep telefonları her zaman wifi yoktur). Bu şekilde, 3G ağında hızlı ve yavaş olan insanlar gibi deneyimin ne olduğuna dair daha iyi bir resim elde edersiniz. Konum siteniz için önemliyse, ayarlarda etkinleştirirseniz Geololasi’yi de değiştirebilirsiniz. Burada daha fazla bilgi. 10. Yukarıdaki diğer seçenekler, bir tarayıcı geliştiricisine yapabileceğiniz en önemli şeyleri dahil ettik, ancak size kısa bir resim vereceğimiz daha fazla şey var: Ağ – Kaynakların artırılıp artırılmadığını ve nasıl indirilip indirilmediğini görün. Kaynak özelliğini ve ayrı dosyaları kontrol edin, şelale diyagramına bakın ve farklı ağ bağlantı hızlarını simüle edin. Animasyonu kontrol edin – Sayfanızda bir animasyon varsa, yavaşlayabilir, kaynak kodunu kontrol edebilir ve daha fazlası. Erişilebilirlik – sayfa hızıyla aynı, erişilebilirlikte denetimleri çalıştırabilirsiniz. Oranlarınızın Dom ağaçlarına nasıl benzediğini görün, Aria’nın özelliklerine bakın ve ekran kontrastını kontrol edin. En sevdiğiniz tarayıcı geliştiricisi hakkında daha fazla ipucu için belgeleri kontrol edin! Yukarıdaki Tarayıcı Geliştiricisi Eğitiminde Tarayıcı Geliştiricisi hakkındaki son zihin, sitenizi geliştirmenize ve genel olarak web sitesi hakkında daha fazla bilgi edinmenize nasıl yardımcı olabileceklerine dair ayrıntılara bir göz attınız. Artık HTML, CSS ve JavaScript’in nasıl kontrol edileceği ve manipüle edileceği, sitenin performansını analiz edeceği ve hücresel misafirperverliğinizi kontrol edeceğiniz gibi en temel uygulamaları biliyorsunuz. Artı, bulmak için daha fazlası var. Bu kılavuzdaki hepsi seçim tarayıcısı için geçerli olmasa da, temel işlev her zaman aynıdır, bu yüzden bundan yararlanın! Bir tarayıcı geliştiricisinin en sevdiğiniz özellikleri nelerdir? Yukarıda eklemek isteyen var mı? Aşağıdaki yorum bölümünde bize bildirin!
