|

Modern tarayıcılar, JavaScript ve diğer teknolojiler için yerleşik geliştirme araçları sağlar. Bu araçlar, kabuk arayüzüne benzer bir konsolun yanı sıra DOM incelemesi, hata ayıklama ve ağ etkinliği analizi için araçlar içerir.

Konsol, JavaScript geliştirme sürecinin bir parçası olarak bilgileri günlüğe kaydetmek için kullanılabilir. Konsol ayrıca, sayfa bağlamında JavaScript ifadeleri yürüterek web sayfasıyla etkileşim kurmanıza da olanak tanır. Temel olarak konsol, JavaScript kodu yazma ve gerektiği gibi değiştirme yeteneği sağlar.

Bu kılavuz size tarayıcınızda JavaScript konsolunu nasıl kullanacağınızı öğretecek ve faydalı bulabileceğiniz diğer yerleşik geliştirme araçlarını tanıtacaktır.

Tarayıcıda JavaScript konsolu ile çalışma

HTML ve XHTML'yi destekleyen çoğu modern web tarayıcısı, varsayılan olarak, JavaScript ile terminal kabuğu benzeri bir arayüzde çalışabileceğiniz geliştirici konsoluna erişim sağlar. Bu bölümde, Firefox ve Chrome'da konsola nasıl erişeceğinizi öğreneceksiniz.

Firefox tarayıcısı

Bu araçlar, DOM öğelerini incelemenize ve düzenlemenize ve ayrıca belirli bir sayfayla ilişkili HTML nesnelerini aramanıza olanak tanır. DOM, bir metin parçasının veya bir görüntünün ID özniteliğine sahip olup olmadığını belirtebilir ve bu özniteliğin değerini belirleyebilir.

Ek olarak, kenar çubuğunda veya DOM panelinin altında, bir HTML belgesinde veya stil sayfasında kullanılan CSS stillerini bulabilirsiniz.

DOM'yi gerçek zamanlı olarak düzenlemek için seçilen öğeye çift tıklayın. Örneğin, etiketi çevirmeyi deneyebilirsiniz

v

.

Yine yenilemeden sonra sayfa önceki görünümüne dönecektir.

Ağ sekmesi

Ağ sekmesi, ağ isteklerini izlemenizi ve kaydetmenizi sağlar. Bu sekme, sayfayı yükleme istekleri, isteklerin sunulması için geçen süre ve her biri hakkında ayrıntılar dahil olmak üzere tarayıcının ağ isteklerini gösterir. Bu veriler, sayfa yükleme performansını optimize etmek ve sorgularda hata ayıklamak için kullanılabilir.

Ağ sekmesini JavaScript Konsolu ile birlikte kullanabilirsiniz. Örneğin, konsolu kullanarak bir sayfada hata ayıklamaya başlayabilir ve ardından Ağ sekmesini açabilir ve sayfayı yeniden yüklemeden ağ etkinliğini görüntüleyebilirsiniz.

Sorumlu tasarım

Duyarlı web siteleri, çeşitli cihazlarda görünümlerini ve hislerini hızla uyarlar: cep telefonları, tabletler, masaüstü bilgisayarlar ve dizüstü bilgisayarlar. Ekran boyutu, piksel yoğunluğu ve dokunma tepkisi, duyarlı web siteleri tasarlarken göz önünde bulundurulması gereken faktörlerdir. Ayrıca, web sitesinin hangi cihazda açılır olursa olsun erişilebilir ve verimli olması için responsive tasarım ilkelerinin dikkate alınması önemlidir.

Modern tarayıcılar (Firefox ve Chrome dahil), web siteleri ve uygulamalar geliştirirken duyarlı tasarım ilkelerine bağlı kalmak için modeller sağlar. Bu modeller, sitenin tüm işlevlerini test etmenize ve analiz etmenize olanak tanıyan belirli bir cihazın davranışını taklit eder.

Bununla ilgili daha fazla bilgiyi tarayıcı kılavuzlarında okuyabilirsiniz:

• Firefox'ta Duyarlı Tasarım Modu

Çözüm

Bu eğitici, modern web tarayıcılarında JavaScript konsoluyla çalışmaya hızlı bir genel bakış sağlar. Diğer faydalı geliştirme araçları hakkında da burada bilgi bulabilirsiniz.

Sitemizde yayınlanan sosyal ağlar için birçok farklı Java scripti bulunmaktadır. Ve her komut dosyasının açıklamasında, bunları başlatmak için ayrıntılı talimatları açıklayın ... Bu işe yaramaz. Tüm tarayıcılarda komut dosyalarının kurulumunu açıklayan tam teşekküllü bir kılavuz yazmaya ve belirli bir tarayıcı için çeşitli kurulum yöntemlerinin kullanılabilirliğini hesaba katmaya ve hepsini açıklamaya karar verdik.

Java komut dosyalarını tarayıcı konsolu üzerinden çalıştırma:

Bildiğiniz gibi, komut dosyalarını konsol üzerinden çalıştırmak, bunları kullanmanın en popüler ve en basit ve en önemlisi çalışma şeklidir. Bu nedenle, her tarayıcı için konsola girmenin yollarıyla başladığımız yer burasıdır.

Mozilla Firefox'ta Konsol:

Mozilla Firefox tarayıcısında web konsoluna ulaşmanın en kolay yolu klavye kısayolunu kullanmaktır. Ctrl + Vardiya + K... Tıklayın ve konsol görüntülenecektir.

Google Chrome ve diğer Chromium tabanlı tarayıcılarda konsol:

Google Chrome, Opera 15+, Amigo, Orbitum ve diğer Chromium tabanlı tarayıcılarda da web konsolunu başlatmak için bir kısayol tuşu yöntemi bulunur. Bunu yapmak için, aynı anda basmanız gerekir. Ctrl + Vardiya + J.

Opera 12'deki Konsol:

Web konsolunu eski nesil Opera tarayıcısında (sürüm 12'den eski olmayan) başlatmak için klavye kısayolunu kullanmanız gerekir. Ctrl + Vardiya + ben... Bu, geliştirici için bir araç çubuğu olan Opera Dragonfly'ı başlatacak. Açtıktan sonra sekmeye gidin Konsol.

Internet Explorer'da Konsol:

Konsolu Internet Explorer web tarayıcısında açmak için önce düğmesine tıklamanız gerekir. F12 ve ardından kombinasyona basın Ctrl + 2 (iki tanesi orta panelde, Num bölümünde değil).

Safari Konsolu:

Safari'de konsolu açmadan önce tarayıcı ayarlarını girdiğinizden emin olun ( vites sağ üst köşede " Ayarlar… » Takviyeler) ve seçeneği bağlayın Menü çubuğunda Geliştirme menüsünü göster... Bundan sonra konsol, klavye kısayoluyla çağrılabilir. Ctrl + alt + C.

Tüm komut dosyaları konsolda ok simgesinin yanında özel olarak belirlenmiş bir alana girilir (ekran görüntülerine bakın, komut dosyası girme alanları kırmızı bir çerçeveyle vurgulanmıştır). Komut dosyaları düğmeye basılarak başlatılır Girmek... Herhangi bir betiği girip çalıştırdıktan sonra, yürütme sırasında herhangi bir yorum veya hata göreceksiniz.

Java komut dosyalarını tarayıcı adres çubuğundan çalıştırma:

Tarayıcının adres çubuğundan komut dosyalarını başlatma yöntemi daha eski bir yöntemdir, ancak oldukça gelenekseldir. Başlangıçta, tüm komut dosyaları bu şekilde çalıştırıldı. Ancak trendler değişiyor, dünya gelişiyor. Çoğu tarayıcıda, komut dosyası kodunu adres çubuğuna ekledikten sonra, başlatmak için kodu manuel olarak eklemeniz gerekir ve bazı tarayıcılarda adres çubuğu java komut dosyalarını hiç işlemez.

Mozilla Firefox'ta adres çubuğu:

Ne yazık ki, Mozilla Firefox tarayıcısının en son sürümlerinden hiçbiri adres çubuğu komut dosyası oluşturmayı desteklemiyor. Bu seçenek önceki sürümlerde mevcut olmasına rağmen, modern Firefox'ta geliştiriciler onu terk etmeye karar verdiler.

Google Chrome ve diğer Chromium tabanlı tarayıcılarda adres çubuğu:

Google Chrome tarayıcısında ve Opera 15+, Amigo, Orbitum ve diğerleri gibi kaynak kodlarına dayalı diğer tarayıcılarda, adres çubuğunda komut dosyaları çalıştırabilirsiniz. Fakat! Komut dosyasını ekledikten sonra, önce kelimeyi eklemelisiniz javascript:(iki nokta üst üste ile birlikte), aksi takdirde (çok amaçlı adres çubuğu gibi bir fenomen nedeniyle), komut dosyasını çalıştırmak yerine arama motoruna bir yönlendirme gerçekleşir.

Opera 12'deki adres çubuğu:

Opera 12'de işler çok daha iyi. Komut dosyasını çalıştırmak için adres çubuğuna ekleyin ve çalıştırın. Bu herhangi bir soruna neden olmamalıdır.

Internet Explorer'da adres çubuğu:

Bu tarayıcıda, Google Chrome ve benzerlerinde olduğu gibi, komut dosyasını adres çubuğuna ekledikten sonra, en baştan eklemeniz gerekir. javascript:(iki nokta üst üste ile birlikte), aksi takdirde komut dosyası çalışmayacaktır.

Safari'deki adres çubuğu:

Safari'de işler Opera 12'deki kadar iyi. Mevcut betiği adres çubuğuna yapıştırmanız ve çalıştırmanız yeterli.

Komut dosyalarını depolamak ve çalıştırmak için tarayıcı eklentilerini kullanma:

Komut dosyalarının sürekli kullanılması gerekiyorsa, bunlarla uğraşmanız, bir web sitesinden veya metin dosyasından kopyalamanız, her seferinde adres çubuğuna veya konsola yapıştırmanız gerekir. Katılıyorum - uygun değil. Bu nedenle, komut dosyalarını depolamak ve çalıştırmak için tasarlanmış tarayıcılar için özel uzantılar (eklentiler) icat edildi. İki eklentiden bahsediyoruz: Mozilla Firefox için Greasemonkey ve Google Chrome için Tampermonkey.

Mozilla Firefox için Greasemonkey eklentisi:

Mozilla Firefox için Greasemonkey eklentisi, kullanıcılar tarafından eklenen komut dosyalarını oluşturmanıza, kaydetmenize ve çalıştırmanıza olanak tanır. Dikkat olmak! Bir şeyi silmek veya değiştirmek için komut dosyalarını kullanırken, eklentiye eklendikten hemen sonra otomatik olarak başlatılırlar. Eklentiye komut dosyaları eklemenizi kesinlikle önermiyoruz, örneğin VKontakte sayfası açıkken VKontakte duvarındaki girişleri silmek için (asla ne olduğunu bilemezsiniz).

Kullanım kılavuzu:

Google Chrome için Tampermonkey eklentisi:

Tampermonkey eklentisi, Firefox için Greasemonkey eklentisine benzer ve ayrıca özel komut dosyaları oluşturmanıza, kaydetmenize ve çalıştırmanıza olanak tanır. Dikkat olmak! Bir şeyi silmek veya değiştirmek için komut dosyalarını kullanırken, eklentiye eklendikten hemen sonra otomatik olarak başlatılırlar. Eklentiye komut dosyaları eklemenizi kesinlikle önermiyoruz, örneğin VKontakte sayfası açıkken VKontakte duvarındaki girişleri silmek için (asla ne olduğunu bilemezsiniz).

Kullanım kılavuzu:


Greasemonkey ve Tampermonkey eklentileri bu şekilde çalışır. Her şey hızlı ve kolaydır. Eklenen komut dosyaları hiçbir yerde kaybolmaz, ayrıca uygun herhangi bir zamanda açılıp kapatılabilirler.

Çözüm:

Javascript'i çalıştırmak için açıklanan tüm yöntemler, popüler web tarayıcılarının en son sürümleri için açıklanmıştır. Farklı bir tarayıcı veya tarayıcının daha eski bir sürümünü kullanıyorsanız ve bu tarayıcıda komut dosyalarını çalıştırma yöntemleri bu makalede açıklananlardan farklıysa, lütfen yorumlarda bize bildirin.

Mozilla Tarayıcı, çalışmak ve performansını artırmak için birçok farklı araç sağlar. Böyle bir geliştirme, tarayıcı konsolunun tamamıyla çalışma yeteneğidir.

tarayıcı konsolu nedir

Bu öğe standart web konsolu ile aynıdır, ancak tek tek sekmelerle değil, bir bütün olarak arama motoruyla çalışmanıza izin verir. Yani hatalar, istekler ve diğer eylemler hakkındaki bilgiler burada günlüğe kaydedilir.

Araç, yalnızca ayrı bir sekmenin bilgilerini değil, aynı zamanda eklemelerin yanı sıra arama motorunun kodunu da günlüğe kaydeder. Standart web geliştirme kitlerinde bulunan diğer geliştirmeler için Araç Çubuğunu kullanmayı düşünmelisiniz. Konsol ayrıca çeşitli JavaScript ifadelerini yürütmek için de kullanılır.

30'dan başlayarak bu Firefox satırının devre dışı bırakıldığı unutulmamalıdır. Konsolu Mozilla'da başlatmak için, about: config - devtools.chrome.enabled satırına doğru kodu atamanız gerekir. İyileştirmeyi etkinleştirmek için başka bir yöntem de kullanabilirsiniz.

Firefox 40 için "Chrome Tarayıcı ve eklentiler için hata ayıklama araçlarını etkinleştir" kutusunun yanındaki kutuyu işaretlemeniz gerekir, önceki sürümlerde bu sütunun adı biraz farklı olabilir.

Geliştirici penceresini açtıktan sonra arayüzün 3 bölüme ayrıldığını görebilirsiniz:

Web geliştirici modunda çalışmanın özellikleri

Tüm iyileştirmelerden en iyi şekilde yararlanmak için yalnızca konsolu nasıl açacağınızı değil, aynı zamanda onunla çalışmanın bazı sırlarını da bilmeniz gerekir.

Çok kullanışlı bir araç konsol.log'dur. Çıktıda hata ayıklamaya hizmet eder, ancak ileri düzey kullanıcılar ayrıca bilgi ile çalışmak için başka yöntemlere de başvurur. Örneğin, console.log printf gibi çalışır.

Ayrıca Firefox'ta bir stili biçimlendirirken ikinci argümanı kullanmak için "% c" kalıbını kullanmak mümkündür. Mozilla, uyarılar veya hata mesajları gibi bilgilerin yanında küçük bir gri simge görüntüler. Bu, bu bildirimlerin dikkate alınması gerektiği anlamına gelir. Hata ayıklama mesajları bu arama motorunda gösterilmez, çünkü geliştiricilerin görüşüne göre bunlar eskidir ve bunun yerine console.log () kullanmanız gerekir.

Bu arama motorunda aynı anda birkaç değerin kullanılabileceğini belirtmekte fayda var. Bunu yapmak için, onları bir satıra eklerken çok uygun olan virgülle ayırmanız gerekir.

Bir zamanlayıcı kullanma ve durumu kaydetme

Etkin geliştirici modu, bir zamanlayıcı kullanma yeteneği anlamına gelir. Console.time aracılığıyla çalıştırılabilir. Zamanlayıcı, console.timeEnd kullanılarak durdurulur. Zaman milisaniye cinsinden görüntülenir.

Geri sayım, zamanlayıcının etkinleştirildiği andan itibaren başlar. İsteğe bağlı olarak zaman damgaları oluşturabilirsiniz. Bir kod parçasının yürütülmesi için geçen süreyi belirlemek için HTTP trafiğinin zamanlaması ile birlikte kullanılırlar.

Oldukça sık, referans veya izleme günlükleri için bilgileri kaydetmeniz gerekir. Sayfa açılışları arasında görüntülenen durumu veya verileri kaydetmek için herhangi bir şey yapmanız gerekmez. Firefox bu bilgileri otomatik olarak kaydedecektir. Hatta sağ üst köşedeki düğmeyi etkinleştirdikten veya paneli yeniden açtıktan sonra mesajı temizleyebilirsiniz.

Konsolu Mozilla Firefox'ta açmak oldukça basittir. Bunu yapmak için, tarayıcıyı kontrol etmeye ve hatta gerekirse onu geliştirmeye yardımcı olacak temel becerilere sahip olmanız gerekir.