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 eklentilerin 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. Ayrıca konsol yürütmek için kullanılır farklı ifadeler JavaScript.

Unutulmamalıdır ki 30'dan itibaren bu Firefox dizesi engelli. Konsolun Mozilla'da başlaması 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.

"Hata ayıklama araçlarını etkinleştir" kutusunun yanına bir onay işareti koymanız gerekir. Tarayıcı Chrome ve eklentiler "Firefox 40 için, önceki versiyon bu sütunun adı biraz değişebilir.

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 yarar, 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" modelini kullanmak mümkündür. Mozilla'da küçük bir simge görünecek gri uyarılar veya hata mesajları gibi bilgilerin yanında. 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, bir satıra dahil edildiğinde çok uygun olan virgülle ayırın.

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. Sağdaki düğmeyi etkinleştirdikten sonra mesajı bile silebilirsiniz. üst köşe veya paneli yeniden açarak.

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.

Sitemizde halihazırda yayınlanmış birçok farklı Java betiği bulunmaktadır. sosyal ağlar... Ve her betiğin açıklamasında, detaylı talimatlar onların lansmanında ... Bu işe yaramaz. Tüm tarayıcılarda komut dosyalarının kurulumunu açıklayan tam teşekküllü bir kılavuz yazmaya karar verdik ve ayrıca bir tanesi için birkaç kurulum yönteminin kullanılabilirliğini dikkate aldık. belirli tarayıcı ve hepsini tarif et.

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.

konsol Mozilla Firefox:

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.

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

Google Chrome, Opera 15+, Amigo, Orbitum ve diğer Chromium tabanlı tarayıcılarda ayrıca 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 başlatmak için Opera tarayıcısı eski nesil (12. sürümden eski değil), 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.

konsol Internet Explorer:

Konsolu açmak için İnternet tarayıcısı Explorer, önce düğmeye tıklamanız gerekir F12 ve ardından kombinasyona basın Ctrl + 2 (İki 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… » Eklentiler) 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çeve ile 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.

Adres çubuğu Mozilla Firefox'ta:

Ne yazık ki, çoğu en son sürümler Mozilla tarayıcısı Firefox, adres çubuğu aracılığıyla komut dosyalarının işlenmesini desteklemez. Daha fazla olmasına rağmen önceki versiyonlar benzer bir seçenek modernde mevcuttu Firefox geliştiricileri reddetmeye karar verdi.

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

V Google tarayıcı Chrome ve bunun üzerine kurulu diğer tarayıcılar kaynak kodları Opera 15+, Amigo, Orbitum ve diğerleri gibi, adres çubuğunda komut dosyalarını ç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 motoru.

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:

V bu tarayıcı, 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ırın ve çalıştırın.

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, siteden kopyalamanız veya Metin dosyası, her seferinde adres çubuğuna veya konsola yapıştırın. Katılıyorum - uygun değil. Bu yüzden icat edildiler özel uzantılar(eklentiler) komut dosyalarını depolamak ve çalıştırmak üzere tasarlanmış tarayıcılar için. İ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. Örneğin, VKontakte duvarındaki girişleri silmek için eklentiye komut dosyaları eklemenizi kesinlikle önermiyoruz. sayfayı aç VKontakte (ne olduğunu asla 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 herhangi bir zamanda açılıp kapatılabilirler. uygun zaman.

Çö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 daha fazlasını kullanıyorsanız eski versiyon tarayıcı ve içindeki komut dosyalarını çalıştırma yöntemleri bu makalede açıklananlardan farklıdır, lütfen yorumlarda bize bildirin. |

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 aşağıdakileri yürüterek web sayfasıyla etkileşime girmenizi sağlar. JavaScript ifadeleri sayfa bağlamında. Temel olarak, konsol yazma yeteneği sağlar JavaScript kodu ve gerekirse yönetin.

Bu eğitim 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, arama yapmanın yanı sıra DOM öğelerini incelemenize ve düzenlemenize olanak tanır. HTML varlıkları, İlgili belirli sayfa... 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.

Ayrıca, kenar çubuğunda veya DOM panelinin altında CSS stilleri kullanılan HTML belgesi veya stil sayfası.

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 bunların her biri hakkında bilgiler 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 kılavuz kısa inceleme JavaScript konsolu ile çalışmak modern web tarayıcıları... Ayrıca burada diğer hakkında bilgi bulabilirsiniz kullanışlı araçlar gelişim.