Genellikle bir web sayfasını düzenlerken Adobe Dreamweaver, CoffeeCup, Bluefish veya diğer geliştirme araçlarından biri gibi özel bir düzenleme aracı kullanırız. Peki ya sadece beyin fırtınası yapıyorsak ya da canlı bir sayfada bir şeyler denemek istersek? Sayfanın bir kopyasını kendi seçim aracımızda yapabilir ve bununla oynayabiliriz. Ya da web tarayıcımız içinde yapabiliriz. Bu öğretici, tarayıcınızda bir web sayfasını nasıl düzenleyeceğinizi gösterecek.
Geliştirici Araçları olarak adlandırılan Firefox, Chrome İnceleme olarak adlandırılırken Öğe İnceleme özelliğini çağırıyor. Her iki durumda da, tarayıcı için tasarımınızın parlaklığının arkasına bakmak ve onu çalıştıran koda bir göz atmak için bir yol. Bu özellik oldukça iyi bilinmektedir ve çokça kullanılmaktadır. Oldukça iyi bilinen bir şey, bu kod üzerinde anında değişiklik yapma yeteneğidir.
Yaptığınız hiçbir değişiklik kaydedilmeyecek ve canlıları etkilemeyecektir. Sayfayı geliştirici aracınıza yüklemek istemiyorsanız, bu deneme yapmanın zarif bir yoludur.
Tarayıcınızdaki herhangi bir web sayfasını düzenleyin
Dreamweaver ve bunun gibi araçlar, bir tasarımın farklı tarayıcılarda nasıl görüneceğini simüle eden yerleşik bir tarayıcı emülatörüne sahiptir. Oldukları kadar iyi, her zaman kesin değiller ve geliştirici aracınızda harika görünen şeyin bağımsız bir tarayıcıda biraz farklı göründüğü bir siteyi başlatırken sık sık karşılaşırsınız.
Genellikle siteyi dahili bir web sunucusunda başlatır ve yalnızca bu nedenle canlı yayınlamadan önce bir tarayıcıda test yaparsınız. Bir sayfa zaten yayındaysa veya yalnızca bir şeyi denemek istiyorsanız, onu geliştirme aracınıza kopyalayıp yüklemeniz gerekmez, yalnızca tarayıcının Geliştirici Aracı'nı kullanabilirsiniz.
Firefox kullanıyorum, böylece size nasıl kullanılacağını göstereceğim. Chrome olsa da aynı.
- Denemek istediğiniz bir web sayfasını tarayıcınızda açın.
- Sayfada herhangi bir yere sağ tıklayın ve İncele'yi seçin.
Sayfanızın alt kısmında görünen yeni bir bölmeyle ikiye bölündüğünü görmelisiniz. Bu kod seçtiğiniz sayfanın itici gücüdür. Farklı sayfa elemanlarına alt sekmenin üst kısmındaki sekmelerden erişilebilir. Örneğin, Firefox'ta Inspector, Console, Debugger, Style Editor vb. Görüyoruz.
İmlecinizi alt bölmedeki çizgilerin üzerinden geçirirseniz, web sayfasının farklı kısımlarının vurgulandığını görürsünüz. Vurgu sırasında kullandığınız kod satırı, sayfanın o bölümünü etkileyen koddur.
- Sayfanın nasıl göründüğü ile oynamak istiyorsanız, Stil Düzenleyici'yi deneyin.
- Sayfanın nasıl çalıştığını öğrenmek istiyorsanız, Konsol veya Erişilebilirlik özelliğini deneyin.
- Hataları düzeltmek veya bir sorunu çözmek istiyorsanız, Konsol veya Hata Ayıklayıcı'yı kullanın.
Performans yerinde SEO için faydalıdır ancak Bellek, Ağ ve Depolama çok fazla kullanılmaz.
Unutmayın, Geliştirici Araçları içinde istediğiniz kadar uğraşabilirsiniz ve siteyi etkilemeyecektir. Herhangi bir değişiklik sadece sayfanın tek tek tarayıcınızda nasıl göründüğü konusunda yapılır, web sitesinin kendisini etkilemezsiniz. Aracı kapattıktan sonra tüm değişiklikler kaybolur.
Sayfada değişiklik yapmak
Artık asıl web sitesini etkilemeden istediğiniz herhangi bir şeyi değiştirebileceğinizi biliyorsunuz, haydi biraz eğlenelim. Sayfada düzenlemek istediğiniz bir öğe bulun. Bir yazı tipini, yazı tipi rengini, arka plan görüntüsünü veya neyi severseniz değiştirebilirsiniz. Bu örnekte, başlık başlığının yazı tipini değiştireceğim.
- Değiştirmek istediğiniz tam öğeye sağ tıklayın ve İncele'yi seçin.
- Satırı 'başlık' veya 'H1' ile vurgulayın, böylece metin üst bölmede vurgulanır.
- Sola iki bölmeye gidin ve yazı tipi rengini bulun.
- Seçiciyi kullanmak için değeri farklı bir şeye değiştirin veya renk noktasını seçin.
Değişikliği tamamladığınızda değişiklikleriniz dinamik olarak görünecektir. Renk, boyut, yazı tipi, arka plan ve yazı tipi ile ilgili her şeyi değiştirebilirsiniz. Çalışmayı kaydedemezsiniz, ancak değişiklikleriniz o oturum için kalacaktır.
Bir fikriniz varsa ve tüm geliştirme uygulamalarınızı çalıştırmadan önce hızlı bir şekilde kontrol etmek istiyorsanız, ideal olan sayfa ile ilgili her şeyi değiştirebilirsiniz. Tek yapmanız gereken, hangi değişiklikleri yaptığınızı ve onları nereye kaydedemediğinizi hatırlamak. Bir ekran görüntüsü almanız veya değişiklikleri kaydetmeniz ve bunları yapıcı hale getirmek için geliştirici araçlarınızda çoğaltmanız gerekir.
Tarayıcınızda bir web sayfasını düzenlemek, sayfaları denemenin veya oynamanın zarif bir yoludur. Pahalı geliştirici araçları satın almak zorunda kalmadan web geliştirme hakkında biraz bilgi edinmek için de iyi bir yoldur. Şimdi nasıl yapılacağını biliyorsun, git ve oyna!
