|

Modern tarayıcılar JavaScript ve diğer teknolojiler için yerleşik geliştirme araçları sağlar. Bu araçlar, kabuk arabirimine benzeyen bir konsolun yanı sıra DOM'yi denetleme, hata ayıklama ve ağ etkinliğini analiz etme araçlarını içerir.

Konsol, JavaScript geliştirme sürecinin bir parçası olarak bilgileri günlüğe kaydetmek için kullanılabilir. Konsol aynı zamanda yürüterek bir web sayfasıyla etkileşime girmenizi sağlar. JavaScript ifadeleri sayfa bağlamında. Aslında konsol, yazma yeteneği sağlar. JavaScript kodu ve gerekirse yönetin.

Bu kılavuz size nasıl çalışacağınızı öğretecektir. JavaScript konsolu ve size yararlı bulabileceğiniz diğer yerleşik geliştirme araçlarını tanıtın.

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 arama yapmanıza olanak tanır. HTML nesneleri ile bağlantılı belirli sayfa. DOM, bir metin parçasının veya görüntünün bir kimlik ö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

içinde

.

Yine yenilemeden sonra sayfa eski haline dönecektir.

Ağ sekmesi

Ağ sekmesi, ağ isteklerini izlemenizi ve kaydetmenizi sağlar. Bu sekme, bir sayfa yükleme istekleri, istek hizmet süreleri ve her istekle ilgili ayrıntılar dahil olmak üzere tarayıcının ağ isteklerini gösterir. Bu verileri, sayfa yükleme performansını optimize etmek ve sorgularda hata ayıklamak için kullanabilirsiniz.

JavaScript konsolu ile birlikte Ağ sekmesini 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, görünümlerini ve hislerini farklı cihazlara 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 dikkate alınması gereken faktörlerdir. Web sitesinin açıldığı cihazdan bağımsız olarak erişilebilir ve verimli olması için responsive tasarım ilkelerinin dikkate alınması da ö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ından edinebilirsiniz:

• 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 diğer hakkında bilgi bulabilirsiniz kullanışlı araçlar gelişim.

Sitemizde halihazırda yayınlanmış birçok farklı Java betiği bulunmaktadır. sosyal ağlar. Ve her betiğin açıklamasında açıklayın 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 taneye kurmanın birkaç yolunun varlığını 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 en popüler ve basit ve en önemlisi bunları kullanmanın çalışan bir yoludur. Bu nedenle, başlayacağımız yer burasıdır - her tarayıcı için konsola girmenin yolları.

konsol Mozilla Firefox:

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

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

Google Chrome, Opera 15+, Amigo, Orbitum ve diğer Chromium tabanlı tarayıcıların da kısayol tuşlarını kullanarak web konsolunu başlatmanın bir yolu vardır. Bunu yapmak için, aynı anda basın Ctrl + Vardiya + J.

Opera 12'deki Konsol:

Web konsolunu bir tarayıcıda başlatmak için eski opera nesil (12. sürümden daha eski değil), bir klavye kısayolu kullanmanız gerekir Ctrl + Vardiya + i. Bu, bir geliştirici 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'deki Konsol:

Safari'de konsolu açmadan önce tarayıcı ayarlarını girdiğinizden emin olun ( vites sağda üst köşe » Ayarlar… » Eklentiler) ve seçeneği bağlayın Menü çubuğunda Geliştirme menüsünü göster. Bundan sonra konsol bir klavye kısayolu ile ç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ı ile vurgulanmıştır). Komut dosyaları bir düğmeye basılarak başlatılır Giriş. Herhangi bir komut dosyasını girip çalıştırdıktan sonra, çalışırken tüm yorumları veya hataları göreceksiniz.

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

Tarayıcının adres çubuğundan komut dosyalarını başlatma yöntemi daha eski bir yöntemdir, ancak daha çok geleneksel bir yöntemdir. Başlangıçta, tüm komut dosyaları bu şekilde başlatıldı. Ancak trendler değişiyor, dünya gelişiyor. Çoğu tarayıcıda, komut dosyası kodunu yapıştırdıktan sonra adres çubuğu kodu çalıştırmak için 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, çoğu en son sürümler Mozilla tarayıcısı Firefox, adres çubuğu aracılığıyla komut dosyası oluşturmayı desteklemez. Daha fazla olmasına rağmen erken sürümler benzer bir seçenek mevcuttu, modern Firefox Geliştiricileri vazgeçmeye karar verdi.

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

İÇİNDE 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. Ancak! Komut dosyasını ekledikten sonra, kelimeyi önüne eklemelisiniz. javascript:(bir iki nokta üst üste ile birlikte), aksi takdirde (çok amaçlı adres çubuğu gibi bir fenomen sayesinde) komut dosyasını çalıştırmak yerine, arama motoru.

Opera 12'deki adres çubuğu:

İÇİNDE Opera tarayıcısı 12 çok daha iyi. Komut dosyasını çalıştırmak için adres çubuğuna yapıştırın ve çalıştırın. Bununla ilgili herhangi bir sorun olmamalıdır.

Internet Explorer'da adres çubuğu:

İÇİNDE 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ı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, onlarla oynamanız, siteden kopyalamanız veya Metin dosyası, her seferinde adres çubuğuna veya konsola yapıştırın. Kabul et, 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ı tarafından eklenen komut dosyaları oluşturmanıza, kaydetmenize ve çalıştırmanıza olanak tanır. Dikkat olmak! Bir şeyi kaldırmak veya değiştirmek için komut dosyalarını kullanırken, bunları eklentiye ekledikten hemen sonra otomatik olarak başlatılırlar. Örneğin, VKontakte duvarındaki gönderileri silmek için eklentiye komut dosyaları eklemenizi kesinlikle önermiyoruz. sayfayı aç VKontakte (asla bilemezsiniz).

Kullanım kılavuzu:

Google Chrome için Tampermonkey Eklentisi:

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

Kullanım kılavuzu:


Greasemonkey ve Tampermonkey eklentileri bu şekilde çalışır. Her şey hızlı ve basit. Eklenen scriptler hiçbir yerde kaybolmazlar, ayrıca istenildiği zaman 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ümlerine dayanmaktadır. Başka bir tarayıcı veya daha fazlasını kullanıyorsanız eski versiyon tarayıcı ve içindeki komut dosyalarını çalıştırma yolları bu makalede açıklananlardan farklıdır, lütfen bunu yorumlarda bildirin.

Her yerde ara Başlık başlıklarında ara Bölüm metninde ara

» » »

Tarayıcı Hatası Konsolu

1. Menü çubuğunda "Araçlar" → "Hata Konsolu"nu seçin (Ctrl+Shift+J).

2. Görünen pencerede "Hatalar" sekmesine geçin.

3. Hata metnine sağ tıklayın, bağlam menüsü"Kopyala"yı seçin ve metni bir e-postaya veya forum gönderisine yapıştırın.

Hata ayıklayıcıyı açmak için menü simgesine tıklayın → " Ek araçlar» → «Geliştirici Araçları» (Ctrl+Shift+I).

Hata metnini kopyalayın veya ekran görüntüsünü alın.

1. Opera tarayıcısında hata konsoluna erişmek için önce araç çubuğuna erişmeniz gerekir. Bunu yapmak için tarayıcının sol üst köşesindeki kırmızı "Menü" düğmesine tıklayın ve beliren listeden "Menüyü göster" öğesini seçin.

2. Tarayıcının üst kısmında "Araçlar" → "Gelişmiş" → "Hata Konsolu"nu seçmeniz gereken bir araç çubuğu belirecektir.

3. Açılan pencerede, sayfaların yüklenmesiyle ilgili sorunlarla ilgili tüm bilgiler görünecektir. Genel listeden yalnızca hataları seçmek için pencerenin altındaki "Mesajlar" kelimesine tıklayın ve açılır listeden "Hatalar"ı seçin.

4. Hata metnini seçin - sol fare tuşuyla hatanın ilk satırına tıklayın, basılı tutun Shift düğmesi ve üzerine tıklayın Sonuç olarak hatalar. Ardından, metni kopyalayın ve bir e-postaya veya forum gönderisine yapıştırın.

Hata ayıklayıcıyı Safari'de başlatmak iki adıma bölünmüştür: geliştirme menüsünü etkinleştirme ve web denetçisini başlatma.

Geliştirici menüsünü etkinleştirme

1. Tarayıcının sağ üst köşesindeki dişli simgesine tıklayarak "Ayarlar"ı seçin (Ctrl + b).

2. "Eklentiler" sekmesine gidin, "Menü çubuğunda Geliştirme menüsünü göster"in yanındaki kutuyu işaretleyin.

3. Eklentiler sekmesini kapatın.

Web Denetçisini Başlatma

1. "Geliştirme" → "Web Denetçisini Göster" menü öğesini seçin (Ctrl+Alt+w).

2. "Komut Dosyaları" sekmesini seçin, "Hata Ayıklamayı Etkinleştir" düğmesine tıklayın.

3. Sağ alt köşedeki simge, hata sayısını gösterir. Simgeye tıklayarak, oluşan hatalar hakkında bilgi içeren konsolu açacaksınız. Konsolda vurgulayın tam hata metni(bunu aşağıdan yukarıya doğru farenin sol tuşuyla yapın). Arka plan metnine sağ tıklayarak (bağlantı değil!), metni kopyalayıp bir e-postaya veya forum gönderisine yapıştırın.

1. Bir hata oluştuğunda, tarayıcının sol alt köşesinde bir uyarı simgesi belirir veya açılan pencerede aynı uyarı görüntülenir.

2. "Araçlar" → "Geliştirici Araçları" (F12) menü öğesini seçin ve "Komut Dosyası" sekmesine gidin.

3. Komut Dosyası sekmesinde, Hata Ayıklamayı Başlat düğmesini tıklayın.

4. Tüm hatalar konsol penceresinin sağ tarafında görüntülenir. Hatanın metnini vurgulayın ve kopyalayın ve bir e-postaya veya forum gönderisine yapıştırın.

Kullanıcı, tarayıcıdaki konsolu kullanarak, sayfaları yüklerken oluşan hataları görüntüler. Üzerinde çeşitli komut eylemlerinin yürütülmesini içeren bu sayfa ile çalışabilir.

Tarayıcıdaki böyle bir "araç" yardımıyla, bir web sayfasındaki komut dosyalarının çalışmasındaki başarısızlıklardan zamanla kurtulabilirsiniz. Bu, kullanıcı için çok zaman kazandırır.

Tarayıcı aracını kullanabilmek için yapılacak ilk şey onu başlatmaktır. Opera'da konsol nasıl açılır?

Hata türleri

Artık web programcıları, tarayıcıda ne tür bir sorun ortaya çıktığı konusunda kafalarını meşgul etmek zorunda değiller. "Araç" yardımıyla onunla ilgili tüm bilgileri görüntüleyebilirsiniz.

Konsolu açtığınızda, sayfa analizinin görüntüleneceği bir pencere açılacaktır. Açılan pencerede beş sekme bulunur: JS, HTTP, CSS, Hakkında, DOM.

Talimat

sıralama:

• Opera tarayıcısını açın ve ekranın sol üst köşesinde bulunan Menüye gidin.
• "Araçlar" bölümünü arıyoruz, üzerine tıklayın.
• "Gelişmiş"i seçin, "Konsol"u açın.

Bu adımları tamamladıktan sonra, tarayıcıda, siteleri başlatırken meydana gelen tüm hataların açılacağı bir pencere görünecektir.

Fazlası var hızlı yol Opera'da hatalara neden olur. "Ctrl + Shift + I" tuş bileşimine basmalısınız. "Konsol" bölümüne tıklamanız gereken bir pencere açılacaktır.