Sazlamaq üçün veb səhifə xətası. Internet Explorer-də skript səhvləri. Səbəbləri və aradan qaldırılması üsulları. SQL sorğularının profilləşdirilməsi Veb səhifəni sazlayın
İnternetə baxarkən İnternet brauzeri Explorer səhifədə səhvlər olduğu və düzgün göstərilmədiyi barədə mesajlar göstərə bilər. Bu problemi həll etməyin bir neçə yoluna baxaq.
Təlimat
Təbii ki, başqaları da var - onları mütləq qeyd edəcəm.
Firefox üçün firebug
olub olmadığını dəqiq bilmirəm yanğın böcəyi digər inkişaf etdirici alətlərin əcdadı, lakin bu günə qədər mütləq ən populyar, rahat və funksionaldır.
Firebug Firefox üçün əlavədir, yəni Firefox əlavələri saytından endirilməli və quraşdırılmalıdır.
Yanğın böcəyi çağırmaq üçün F12 düyməsini sıxmaq kifayətdir.
Bu əlavənin xüsusiyyətləri:
- Dinamik olaraq dəyişən HTML-nin yoxlanılması və redaktəsi;
- Tez CSS redaktəsi;
- JavaScript-in sazlanması komanda xətti skriptləri icra etmək;
- Şəbəkə sorğularının monitorinqi - faylların və skriptlərin, sorğu başlıqlarının ölçüsünü və yükləmə vaxtını görə bilərsiniz;
- DOM analizatoru.
Bu xüsusiyyətlər haqqında uzun müddət ətraflı danışa bilərsiniz, amma düşünürəm ki, onlar bütün oxucularımıza məlumdur, yoxsa - ətraflı məlumat Firebug-un ana səhifəsində və ya İlya Kantorun tərcüməsində eynidir.
Firebug-un özünə əlavə olaraq, sizə lazım ola bilər faydalı losyon ona - odlu peçenye, onunla (sürpriz:-) kukilərə baxa və dəyişdirə bilərsiniz.
Firefox üçün WEB Developer Toolbar
Ognelisə başqa bir faydalı əlavə. Bu belə görünür:
Nöqtələrdən keçək.
Deaktiv edin
JavaScript-i söndürməyə, inkişaf etdirərkən çox faydalı olan keşdən istifadəni dayandırmağa imkan verir (səhifənin yükləndiyinə əmin olmaq imkanı verir) son yeniləmələr), səhifədə istifadə olunan rəngləri ləğv edin və onları standart rənglərlə əvəz edin, istinad başlığında (keçidin edildiyi səhifə) göndərilməsini söndürün.
Peçenyelər
Kukilərlə işləmək üçün faydalı seçim: onlara baxmaq, silmək, bloklamaq və əlavə etmək olar.
css
Bu menyuda Tərtibatçı Alətlər Panelinin ən maraqlı xüsusiyyəti var - on-the-fly CSS redaktə. Bundan əlavə, css-ə baxmaq, söndürmək və sair və s. mümkündür. Fikrimcə, klaviatura qısa yollarının olması burada çox faydalıdır (məsələn, CTRL + SHIFT + C dərhal səhifə üslublarına baxmağa imkan verir)
Formalar
Formalarla işləmək üçün hər şey: parolları göstərin, formalar haqqında məlumatı göstərin, forma metodlarını çevirin (GET » POST və əksinə) və s. Forma sahələrinin avtomatik doldurulması üçün faydalı "Forma sahələrini doldurun" funksiyası (məsələn, parol yadda saxlama funksiyası deaktiv olduqda saytı sınaqdan keçirərkən. Əks halda, mən bu paraqrafda faydalı heç nə görmürəm.
şəkillər
Şəkilləri söndürmək üçün faydalı funksiya var - saytınızın şəkillərsiz necə göründüyünü görmək. Şəkillər dairəyə alına, ölçülərini göstərə, alt-atributları göstərə bilər.
məlumat
Bu menyuda bir çox seçim var. Səhifədə sinif və id atributlarını göstərmək faydalı ola bilər. Bundan əlavə, "Rəng Məlumatına Bax" maddəsi maraqlıdır - səhifədə istifadə olunan rənglər haqqında tez məlumat əldə etmək. "Sənəd ölçüsünə bax" - səhifənin ölçüsünə baxın. "Cavab Başlıqlarına Baxın" - səhifə başlıqlarına baxın.
Müxtəlif
Ən çox istifadə edilən xüsusiyyət önbelleği təmizləməkdir. Bundan əlavə, burada "Səhifə hökmdarı" - hökmdar, "Səhifə böyüdücü" - böyüdücü şüşə və "Xətt bələdçiləri" - şablonu kəsmək üçün faydalı ola biləcək bir neçə xətt mövcuddur.
kontur
Müxtəlif səhifə elementlərinin seçimi - cədvəllər, başlıqlar, keçidlər, çərçivələr, bloklar. Ölçü dəyişdirmə hər hansı standart ekran uzantılarına uyğun olaraq brauzer pəncərəsinin ölçüsünü dəyişməyə imkan verir. Buradakı alətlər səhifənin yoxlanılması üçün saxlanılan xüsusiyyətlərdir. Həm yerli, həm də xarici. Rahat və sürətli giriş HTML, CSS və s. HTML-i təsdiqləmək üçün CTRL+SHIFT+H klaviatura qısa yolundan istifadə edə bilərsiniz.
mənbəyə bax
Baxın mənbə kodu. Xarici proqramda baxmaq, yaradılan kodu görmək imkanı.
Sağdakı mənim sevimlidir. Bu sürətli HTML, CSS təsdiqləyicisi və JavaScript səhv göstəricisidir. Heç bir problem yoxdursa, simge yaşıl, problem varsa, qırmızıdır.
Internet Explorer Developer Toolbar
8.0-dan başlayaraq xəta debug artıq bu brauzerdə quraşdırılıb. Asanlıqla çağırılır F12 düyməsi. Düzdür, 90-cı illərin proqramı kimi yazıqdır.
Ancaq bu brauzer üçün daha sərin alət var, sözdə Internet Explorer Developer Toolbar linkdən endirilə bilər.
Görünüşdə, bu alətlər paneli, əlbəttə ki, yanğın böcəklərinə bənzəyir, amma təəssüf ki, hələ də yetişməyib. Baxmayaraq ki, digər tərəfdən, o, yanğınsöndürəndə olmayan bəzi xüsusiyyətlərə malikdir. Mən Internet Explorer Developer Alətlər Panelini Firebug və bəzi hibridləri adlandırardım firefox veb tərtibatçısı Alətlər paneli.
Firebug-da olduğu kimi, elementi yoxlamaq üçün bir seçim var sadə bir klik ilə. Ancaq dərhal paddings və kənarları görə bilsək, burada belə bir imkan yoxdur.
Həmçinin, Internet Explorer Developer Toolbar element ağacını Firebug kimi dinamik olaraq yeniləmir. Yəni js istifadə edərək səhifədə nəyisə dəyişsək, bu alətlər panelini istifadə edərək heç nə görməyəcəyik.
Zövq ala biləcəyiniz şeylərdən - CSS-nin tez dəyişdirilməsi (nəyi sındıracağınızı tapmaq üçün asan yol :), CSS və şəkilləri söndürmək imkanı, keşi tez təmizləmək və kukilərlə oynamaq imkanı, doğrulamaya sürətli giriş.
Ən dadlısı: damcıdan istifadə edərək səhifədən istənilən rəng əldə etməyə imkan verən daxili rəng seçicisi var. (ff üçün ayrıca ColorZilla plagini var).
Internet Explorer üçün Debug Debug Bar
Siz verilmiş linkdən Internet Explorer üçün DebugBar proqramını yükləyə bilərsiniz.
Maraqlı bir uzantı. Brauzerə əlavə panel kimi quraşdırılmışdır:
Nədənsə daxili axtarış sistemi, damcı damcısı, pəncərənin ölçüsünü dəyişmək imkanı və yenə də nədənsə sabun üçün dostuna səhifə göndərmək imkanı var. Baxmayaraq ki, faydalı ola bilər. Amma bu fürsətdən yararlana bilmədim.
Bundan əlavə, bir müfəttiş var:
Tıklama və ya işarə ilə yoxlama üsulu tərtibatçılara uyğun gəlmədi: daha maraqlı bir şeylə gəldilər. DebugBar-da hədəfi ağacda görmək üçün onu istədiyiniz elementə sürükləməlisiniz. CSS-ni redaktə etmək üçün heç bir seçim yoxdur. Ancaq təsdiqləyici və quraşdırılmış js konsolu var.
Parametrləri araşdırsanız, bunu tapa bilərsiniz:
Həm gülməli, həm də kədərli.
Məlumdur ki, Developer Toolbar səkkizinci kəşfiyyatçıda qurulacaq. Üçüncü abzasda təsvir edilənə bənzəyəcək, amma ümid edirik ki, daha yaxşı olacaq.
Opera üçün DragonFly-də debug edin
DragonFly 9.5 versiyasından etibarən Opera-da qurulub, ona görə də onu quraşdırmaq lazım deyil. Dragonfly-i aktivləşdirmək üçün Alətlər → Qabaqcıl → Tərtibatçı Alətləri bölməsinə keçin. İngilis dilindədirsə, Alətlər → Qabaqcıl → Tərtibatçı Alətləri.
Dərhal sizə xəbərdarlıq edəcəyəm ki, DragonFly Alpha2 mərhələsindədir, bu, onun bir çox qüsurlarını izah edir.
Xüsusiyyətlər siyahısı:
- DOM müfəttişi;
- Təftiş düyməsini basın (yenidən FireFox-da olduğu kimi padding görməyəcəyik);
- Redaktə;
- Səhv konsoluna sürətli giriş.
DF, çərçivədəki ayrı bir səhifə kimi bir şeydir. Onu açsanız, bütün tablar üçün açıq olacaq (yanğından fərqli olaraq). Ona görə də elementi yoxlamadan əvvəl siyahıdan baxmaq istədiyimiz səhifəni seçməliyik.
Təəssüf ki, burada, Internet Explorer-də olduğu kimi, Dav Toolbar dinamik şəkildə yaradılmış elementləri göstərmir. Və ümumiyyətlə, biz səhifəni yoxlayanda heç bir JavaScript işləmir: keçidlər və düymələr kliklənmir. Ümid edək ki, DragonFly buraxılışa yaxınlaşanda bütün bu xüsusiyyətləri görəcəyik.
Safari-də WEB Müfəttişinin Debug
Brauzer haqqında dərhal deyəcəyəm safari Məlumatı fit çaldım, ona görə də, necə deyərlər, materialın adekvatlığına cavabdeh deyiləm.
Safari menyusunda "İnkişaf" maddəsini aktivləşdirmək üçün parametrlərdə müvafiq elementi aktivləşdirməlisiniz ("Qabaqcıl" nişanı):
"İnkişaf" menyusunda aşağıdakı funksiyalar mövcuddur:
WEB müfəttişinə daha yaxından nəzər salaq:
Varsayılan olaraq, müfəttiş HTML görünüş rejimində açılır. Lakin onu DOM baxış rejiminə keçirmək olar. Bunu etmək üçün, üst boşqabda bir keçid var. Müfəttişdəki elementin üzərinə sürüşdürdükdə, o, səhifənin özündə vurğulanacaq. Siz FireBug-da edə bilmədiyiniz kimi tez bir zamanda doldurma görə bilməz, işarələmə və ya CSS-i dəyişə bilməzsiniz və ya DOME-da dinamik dəyişiklikləri görə bilməzsiniz. Ancaq görürsən, çox gözəl görünür.
Bir brauzer pəncərəsində müfəttişlə işləmək istəyirsinizsə, aşağı sol küncdəki düyməni vura bilərsiniz.
Safaridə belə, "Şəbəkə qrafiki" kimi bir funksiya mövcuddur (müfəttişdəki "Şəbəkə" düyməsi):
Faylların nə vaxt və nə qədər müddətə yükləndiyini aydın görə bilərsiniz. Siz həmçinin sorğu başlıqlarına baxa bilərsiniz, lakin təəssüf ki, məzmunun özünə baxa bilməzsiniz.
Google Chrome-da Tərtibatçılar üçün Debug
Lame inkişaf etmiş bir formada doğuldu və o, dərhal əyri olsa da, inkişaf etdiricilər üçün alətlərə sahibdir.
- DOM Müfəttişi;
- javascript debugger;
- JavaScript Konsolu.
Elementi yoxlamaq üçün üzərinə sağ klikləyin və kontekst menyusu"Element koduna bax" seçin:
Funksionallıq Safari-də olduğu kimidir: elementlər hoverdə vurğulanır, lakin CSS və HTML redaktəsi mövcud deyil, DOM-da dəyişikliklər izlənilmir. Yalnız, inspektoru brauzer pəncərəsinə əlavə etməli olan sol alt küncdəki düymə işləmir.
"Resurslar" sekmesinde aşağıdakıları görə bilərik:
Safaridəki miqyasdan bir qədər fərqlidir. Bu diaqramdakı şəffaflar nisbi fayl ölçüləridir və tam rəng yükləmə vaxtıdır. Bu və ya digər şəkildə, Chrome-un bu hissəsinin hələ tamamlanmaqdan uzaq olduğu açıq-aydın görünür.
Bu yazıda brauzerlər üçün ən məşhur uzantıları və quraşdırılmış alətləri nəzərdən keçirdim.
Başqaları var, məsələn:
- Internet Explorer WEB İnkişaf Köməkçisi ASP.NET tərtibatçıları üçün yaxşı köməkçidir (Internet Explorer);
- WEB Developer Toolbar - Internet Explorer və FireFox üçün alətlər paneli. Bir neçə faydalı xüsusiyyət var;
- WEB Accessibility Toolbar - Internet Explorer üçün alətlər paneli. Maraqlı heç nə yoxdur.
Əgər qeyd etmədiyim, lakin buna dəyər olan əlavələr varsa və ya qeyd olunan genişləndirmələr üçün əldən verdiyim funksiyalar varsa, yazın.
Sağlamlıq üçün istifadə edin!
HTML yazmaq əladır, lakin bir şey işləmədikdə xətanın harada olduğunu necə bilirsiniz? Bu məqalə HTML-də səhvləri tapmağa və düzəltməyə kömək edən bir neçə aləti təsvir edir.
Sazlama qorxulu deyil
Bəzi kod yazarkən, səhv etdiyiniz ana qədər hər şey adətən yaxşı gedir. Beləliklə, kodunuz işləmir və ya nəzərdə tutduğunuz şəkildə işləmir. Əgər siz işləməyən Rust proqramını tərtib etməyə cəhd etsəniz, kompilyator xəta barədə məlumat verəcək:
Bu halda, səhv mesajını başa düşmək nisbətən asandır - "sonsuz cüt dırnaq sətri". Diqqətlə println!(Salam, dünya!"); -ə baxsanız, orada olmadığını görəcəksiniz ikiqat sitat. Əlbəttə ki, kodunuz böyüdükcə səhv mesajlarını başa düşmək çox çətinləşə bilər və hətta ən sadə hallar belə Rust haqqında heç nə bilməyənlər üçün qorxulu ola bilər.
Ancaq sazlamaqdan qorxma! İstənilən kodu rahat şəkildə yazmaq və sazlamaq üçün dili və onun alətlərini başa düşməlisiniz.
HTML və Sazlama
HTML dilini başa düşmək Rust qədər çətin deyil. Brauzer onu təhlil etməzdən və nəticəni göstərməzdən əvvəl HTML hər hansı digər formada tərtib edilmir (təfsir olunur, tərtib edilmir). Sintaksis HTML elementləri Rust, JavaScript və ya Python kimi "real proqramlaşdırma dillərindən" daha aydındır. Brauzerlərin HTML oxuma üsulu daha çoxdur dözümlü kodlarını daha ciddi şəkildə şərh edən proqramlaşdırma dillərindən daha çox. Bu, eyni zamanda həm pis, həm də yaxşıdır.
tolerant kod
Bəs tolerantlıq nə deməkdir? Ümumiyyətlə, kodu qarışdırdığınız zaman iki növ səhvlə qarşılaşacaqsınız:
- Sintaksis səhvləri: Bunlar yuxarıda Rust nümunəsində olduğu kimi orfoqrafik səhvlərdir. Dilin sintaksisi ilə tanış olduğunuz və səhv mesajlarının nə demək olduğunu bildiyiniz müddətcə bunları düzəltmək adətən asandır.
- Məntiq səhvləri: Bunlar sintaksis düzgün olduqda, lakin kod öz məqsədini yerinə yetirmədikdə, yəni proqram düzgün yerinə yetirilmədikdə yaranan xətalardır. Bunları düzəltmək sintaktik olanlardan daha çətindir, çünki səhv etdiyiniz yeri göstərən heç bir mesaj göstərilmir.
HTML sintaksis xətalarından əziyyət çəkmir, çünki brauzer kodu dözümlü şəkildə oxuyur, yəni sintaksis xətaları mövcud olsa belə, səhifələr göstərilə bilər. Brauzerlərdə pis yazılmış işarələməni şərh etmək üçün daxili qaydalar var və siz başqa bir şeyi nəzərdə tutsanız belə, bir şey işlədə bilərsiniz. Bu əsl problem ola bilər!
Qeyddə: HTML oxunaqlıdır, çünki veb ilk dəfə yarandıqda, hətta kod səhv olsa belə, insanlara məzmun dərc etməyə icazə vermək qərara alındı, çünki bu, sintaksisin tamamilə düzgün olduğuna əmin olmaqdan daha vacibdir. İnternet yeni başlayanlar üçün sərt olsaydı, indi bu qədər məşhur olmazdı.
Aktiv Öyrənmə: Tolerant Kodeksin Təqdim edilməsi
HTML-də tolerant kodun təbiətini araşdırmağın vaxtı gəldi.
HTML Təsdiqləmə
Yuxarıdakı nümunədən aydın olur ki, HTML-nin etibarlılığını yoxlamağa dəyər. Yuxarıdakı sadə nümunədə siz sadəcə olaraq bütün kodu keçib səhvləri tapa bilərsiniz, bəs nə böyük, mürəkkəb səhifələr?
İşarələmə doğrulama xidmətində səhifəni yoxlamaq yaxşıdır. O, HTML, CSS və digər veb texnologiyalarının spesifikasiyasına cavabdeh olan W3C təşkilatı tərəfindən yaradılmış və saxlanılmışdır. Xidmət HTML-nizi yoxlayacaq və oradakı səhvlər barədə məlumat verəcək.
HTML faylı yükləmək və ya sadəcə səhifəyə köçürməklə ünvanda yoxlanıla bilər.
Aktiv Öyrənmə: HTML Sənədinin Təsdiqlənməsi
- Brauzerinizdə işarələmə doğrulama xidmətini açın.
- Birbaşa Giriş rejimi ilə Doğrulama rejiminə keçin.
- Sənədin bütün kodunu (yalnız gövdəsini deyil) kopyalayın və onu giriş sahəsinə yapışdırın.
- üzərinə basın Yoxlayın (yoxlayın).
Səhvlərin və digər məlumatların siyahısını görəcəksiniz.
Səhv Mesajları ilə İş
Adətən mesajların nə demək olduğu dərhal aydın olur, lakin bəzən bunun nə olduğunu anlamağa çalışmaq lazımdır. İndi bütün səhvləri nəzərdən keçirəcəyik və onların nə demək olduğunu təhlil edəcəyik. Nəzərə alın ki, xətaların tapılmasını asanlaşdırmaq üçün mesajlara bir sıra və kod sütunu daxildir.
- "End tag li nəzərdə tutulur, lakin açıq elementlər var idi" (2 instansiya): Brauzer onun harada olması lazım olduğunu təxmin etsə də, açıq-aşkar son teq yoxdur. Mesaj son etiketin gözlənildiyi sətirdən sonrakı sətri göstərir, lakin siz doğru yeri tapacaqsınız.
- "Qapalı olmayan element güclü": Bu çox sadə səhv- element) onun məzmununun böyük əhəmiyyət kəsb etdiyini, ciddiliyini və ya aktuallığını göstərir. Brauzerlər adətən məzmun verir qalın hərflərlə."> bağlanmır və mesaj birbaşa başlanğıc etiketinə işarə edir.
- "Son teq yuvalama qaydalarını güclü şəkildə pozur": Element səhv daxil edilib - bu səviyyədə uyğun açılış teqi yoxdur.
- "Faylın sonuna atribut dəyəri daxil olduqda çatıldı. Teq nəzərə alınmır": Sirli mesaj. Məsələ ondadır ki, haradasa (çox güman ki, sənədin sonunda) elementin xassəsi səhv qeydə alınıb və faylın sonu bu xassədə peyda olub. Bağlantı brauzerdə görünmür - çox güman ki, problem onun yanındadır.
- "Faylın sonu göründü və açıq elementlər var idi": Fayl bitdi, lakin bəzi elementlər bağlanmayıb. Mesaj faylın sonunu göstərir, bu halda element bağlanmır misal: Mozilla ana səhifəsinə keçid ↩
Çox vaxt istifadəçilər brauzerdə (IE) skript səhv mesajının göründüyü bir vəziyyəti müşahidə edə bilərlər. Vəziyyət təcrid olunarsa, narahat olmayın, ancaq bu cür səhvlər müntəzəm olduqda, bu problemin təbiəti barədə düşünməlisiniz.
Internet Explorer-də skript xətası adətən brauzerin HTML səhifə kodu ilə düzgün işləməməsi, müvəqqəti İnternet fayllarının olması, hesab parametrləri və bir çox başqa səbəblərdən qaynaqlanır. müzakirə olunacaq bu materialda. Bu problemin həlli üsulları da nəzərdən keçiriləcək.
Internet Explorer-də skript xətalarına səbəb olan problemlərin diaqnostikası üçün ümumi metodlara keçməzdən əvvəl, səhvin yalnız müəyyən bir saytda deyil, eyni anda bir neçə veb-səhifədə baş verdiyinə əmin olmalısınız. Problemin başqa bir altında meydana gəldiyi veb səhifəni də yoxlamaq lazımdır hesab, fərqli brauzerdə və başqa kompüterdə. Bu, səhvin səbəbinin axtarışını daraldacaq və mesajların kompüterdə müəyyən faylların və ya parametrlərin olması nəticəsində göründüyü fərziyyəsini istisna edəcək və ya təsdiq edəcəkdir.
Internet Explorer aktiv skriptlərinin, ActiveX və Java-nın bloklanması
Aktiv skript, ActiveX nəzarətləri və Java məlumatların yaradılması və saytda göstərilməsi üsuluna təsir edir və istifadəçinin fərdi kompüterində bloklanırsa, əvvəllər təsvir edilmiş problemin əsl səbəbi ola bilər. Bu səbəbdən skript xətalarının baş verdiyinə əmin olmaq üçün sadəcə olaraq brauzerin təhlükəsizlik parametrlərini sıfırlamalısınız. Bunu etmək üçün aşağıdakı təlimatlara əməl edin.
- Internet Explorer 11-i açın
- Xidmət
- Pəncərədə nişana keçin Təhlükəsizlik
- Sonra düyməni basın Defolt və sonra düymə tamam
Internet Explorer müvəqqəti faylları
Siz hər dəfə veb səhifəni açdığınız zaman, Internet Explorer bu veb-səhifənin yerli surətini kompüterinizdə müvəqqəti fayllarda saxlayır. Belə fayllar çox olduqda və onları ehtiva edən qovluğun ölçüsü bir neçə giqabayta çatdıqda, veb səhifənin göstərilməsi ilə bağlı problemlər yarana bilər, yəni skript xətası mesajı görünəcək. Müvəqqəti fayllar qovluğunun müntəzəm təmizlənməsi bu problemi həll etməyə kömək edə bilər.
Müvəqqəti İnternet fayllarını silmək üçün aşağıdakı addımları yerinə yetirin.
- Internet Explorer 11-i açın
- Xidmət
- Pəncərədə nişana keçin Ümumidir
- Fəsildə Brauzer tarixçəsi Düyməyə bas Sil...
- Pəncərədə Baxış tarixçəsini silin maddələrin yanındakı qutuları yoxlayın İnternet və veb saytların müvəqqəti faylları, Peçenyelər və veb sayt məlumatları, Jurnal
- düyməni basın Sil
Antivirus proqram təminatının işləməsi
Skript səhvləri iş vasitəsilə mümkündür antivirus proqramı aktiv skriptləri, səhifədəki ActiveX və Java nəzarətlərini və ya müvəqqəti brauzer fayllarını saxlamaq üçün qovluqları bloklayanda. Bu halda, siz quraşdırılmış antivirus məhsulunun sənədlərinə müraciət etməli və müvəqqəti İnternet fayllarını saxlamaq üçün qovluqların skan edilməsini, həmçinin interaktiv obyektlərin bloklanmasını deaktiv etməlisiniz.
HTML səhifə kodunun səhv işlənməsi
Bir qayda olaraq, müəyyən bir saytda görünür və səhifə kodunun Internet Explorer ilə işləmək üçün tam uyğunlaşdırılmadığını göstərir. Bu halda, brauzerdə skript ayıklamasını söndürmək daha yaxşıdır. Bunu etmək üçün bu addımları izləyin.
- Internet Explorer 11-i açın
- Brauzerin yuxarı sağ küncündə simgesini basın Xidmət dişli şəklində (və ya Alt + X düymələri birləşməsi). Sonra açılan menyuda seçin
- Pəncərədə nişana keçin əlavə olaraq
- Sonra, qutunun işarəsini çıxarın Hər skript xətası üçün bildiriş göstərin və düyməni basın tamam.
Bu, ən çoxunun siyahısıdır ümumi səbəblər, Internet Explorer-də skript səhvlərinə səbəb olur, buna görə də belə mesajlardan bezmisinizsə, bir az diqqət yetirin və problemi birdəfəlik həll edin.
Aktiv Bu an mövcud HTML standartlarını müəyyən dərəcədə dəstəkləyən çoxlu sayda müxtəlif brauzerlər var. Şəxsən mən Mozilla Korporasiyasının brauzerinə üstünlük verirəm. Bu brauzer uzun tarixə malikdir (məşhur Netscape Navigator brauzerinə əsaslanır). Bu brauzeri də bəyənirəm, çünki o, plaginlər sistemini dəstəkləyir - ayrıca paylanmış əlavələr, qoşulduqda funksionallığı dəyişdirə və ehtiyaclarınıza uyğunlaşdıra bilərsiniz. Və nəhayət, bu brauzer açıq mənbə kodları ilə sərbəst şəkildə paylanır, bu da vacibdir. Buna görə də, mən bu brauzerin təkcə istifadəçiyə deyil, həm də veb səhifələrin tərtibatçısına təqdim etdiyi imkanları təsvir etmək qərarına gəldim, yazılı məhsulların sazlanması prosesinin nə qədər asan və rahat ola biləcəyi.
Mozilla Firefox tərtibatçılar və veb tərtibatçıları arasında ən populyar brauzerlərdən biridir. Bu brauzerin yaradılmış layihələri aradan qaldırmaq, səhvləri düzəltmək və təkmilləşdirmək üçün təqdim etdiyi imkanlara görə onların diqqətini cəlb edir. Brauzer standart olaraq java konsolu (və ya "səhv konsolu") ilə təchiz edilmişdir. Bu yardım proqramı quraşdırılmış java-skriptləri sazlamağa imkan verir. Ancaq üçüncü tərəf plaginləri brauzerə daha çox funksionallıq verir, onu Mozilla Fondunun rəsmi saytından yükləmək və quraşdırmaq olar. İndi bu plaginlərdən ikisinə baxmaq istəyirəm - Web Developer və Firebug . Bu əlavələrin hər ikisi yuxarıdakı linklərdən rəsmi əlavə saytından endirilə bilər. Onları quraşdırdıqdan və brauzeri yenidən başlatdıqdan sonra, tərtibatçının geniş imkanları var, mən bunları aşağıda öz növbəsində plaginlərin hər biri üçün təsvir edəcəyəm.
firebug plagini
Rəsmi səhifədə deyildiyi kimi: “Firebug, developer alət dəstini xeyli zənginləşdirmək üçün Firefox brauzeri ilə inteqrasiya edir. İstənilən veb səhifəsində CSS, HTML və Javascript-i canlı olaraq redaktə edə, sazlaya və araşdıra biləcəksiniz.” Və həqiqətən də belədir. Bu plaginin bəzi funksiyalarını nəzərdən keçirin, yəni:
- HTML-ə baxın və redaktə edin.
- CSS qurmaq.
- Şəbəkə sorğularının monitorinqi
- JavaScript-in sazlanması
- JavaScript tədqiqatı
- JavaScript üçün giriş
Bu, onun bütün xüsusiyyətlərinin tam siyahısı deyil. Layihə açıq mənbə olduğundan, hər kəs funksionallığı dəyişdirə və əlavə edə bilər.
Plugin ilə işləmək üçün F12 düyməsini basmalısınız (ayrı bir pəncərədə onunla işləmək üçün Ctrl-F12). Uğurlu işə salındıqdan sonra aşağıdakıları alırıq - Şəkil 1a, 1b.
Şəkil 1a. Firebug plagininin ilkin pəncərəsi.
Şəkil 1b. Firebug plagininin ilkin pəncərəsi.
Sonra, plugin ilə faktiki iş başlayır. Tutaq ki, HTML kodunda bu və ya digər obyekti tapmaq və ya onun necə dəqiqliklə həyata keçirildiyini müəyyən etmək lazımdır CSS istifadə edərək cari fraqment. Bunun üçün sadəcə siçan ilə plug-in pəncərə menyusunda lazımi variantları seçmək lazımdır. Aşağıdakı nümunədə bu, Təftiş rejimində olan HTML-dir. İndi sənədin səhifəsinə keçərək, siçan kursorunun altında işlədiyimiz sahəni təsvir edən düzbucaqlı bir sahə görəcəyik. Plugin pəncərəsində istifadə olunan HTML və CSS parametrlərini görəcəyik. Həmçinin, onların hər birinə klikləməklə siz dəyişikliklər edə və dinamikada izləyə bilərsiniz. Təsvir edilən hərəkətlər 2,3,4-də təsvir edilmişdir.
Bu layihənin hazırlanmasında yuxarıda təsvir edilən plagin məhz bu məqsədlər üçün istifadə edilmişdir. Bununla belə, burada heç bir java-skript istifadə edilməsə də, firebug plaqini onu sazlamaq üçün də istifadə edilə bilər. Sazlama nümunəsi Şəkil 5-də göstərilmişdir.
Bununla əlaqədar, yuxarıda göstərildiyi kimi, bu uzantının funksionallığı məhdud deyil. Mozilla Firefox-u quraşdırdıqdan sonra təqdim olunan linklərdən yükləyərək onu tam öyrənə və ehtiyaclarınız üçün istifadə edə bilərsiniz.
veb tərtibatçı plagini
Veb Developer - üçün ikinci genişləndirmə Mozilla brauzeri Firefox, çox güclü və funksionaldır ki, bu da sürətli və səmərəli hataları aradan qaldırmağa imkan verir. Onu quraşdırdıqdan sonra brauzer pəncərəsində Şəkil 6-da göstərilən əlavə alətlər paneli görünəcək.Plugin ilə sonrakı iş intuitivdir. Məsələn, CSS işlərini yerinə yetirməli olsaq (Firebug plaginindəki kimi tam funksional olmasa da), biz CSS menyusuna klikləyib söndürə, aktivləşdirə və ya söndürə bilərik.
Tərtibatçının öz layihəsinin müxtəlif qətnamələrə malik monitorlarda necə görünəcəyini görə bilməsi çox rahatdır. Bunu etmək üçün Ölçüsü dəyişdir tabından istifadə edin. Burada əl ilə təyin edə bilərsiniz lazımi icazələr ekran (800x600, 1024x768 və s.) və sonra onlar arasında sərbəst keçid, məzmunu böyütmək və ya kiçiltmək. Bu funksionallıq Şəkil 7-də göstərilmişdir.
Bu genişləndirmə həm də bütün təsvir olunan və rəsmi saytlarda mövcud olan zəngin funksionallığa malikdir.
İstifadə olunan mənbələrin siyahısı
- 1. www.getfirebug.com
Əlavənin rəsmi saytı. - 2. http://addons.mozilla.org
Mozilla-nın rəsmi veb-saytı üçün plaginlər Firefox brauzeri, tərtibatçılar üçün məlumat, plaginlərdən istifadə haqqında məlumat. - 3. http://chrispederick.com/work/web-developer/
WebDeveloper plagin tərtibatçısının rəsmi saytı.
İnternetə baxarkən, Internet Explorer səhifədə səhvlər olduğu və düzgün göstərilməməsi ilə bağlı mesajlar göstərə bilər. Bu problemi həll etməyin bir neçə yoluna baxaq.
Təlimat
Çox vaxt istifadəçilər Internet Explorer (IE) brauzerində skript səhv mesajının göründüyü bir vəziyyəti müşahidə edə bilərlər. Vəziyyət təcrid olunarsa, narahat olmayın, ancaq bu cür səhvlər müntəzəm olduqda, bu problemin təbiəti barədə düşünməlisiniz.
Internet Explorer-də skript xətası adətən brauzerin HTML səhifə kodunu düzgün emal etməməsi, müvəqqəti İnternet fayllarının olması, hesab parametrləri və bu materialda müzakirə ediləcək bir çox başqa səbəblərdən qaynaqlanır. Bu problemin həlli üsulları da nəzərdən keçiriləcək.
Internet Explorer-də skript xətalarına səbəb olan problemlərin diaqnostikası üçün ümumi metodlara keçməzdən əvvəl, səhvin yalnız müəyyən bir saytda deyil, eyni anda bir neçə veb-səhifədə baş verdiyinə əmin olmalısınız. Siz həmçinin fərqli hesabda, başqa brauzerdə və başqa kompüterdə bu problemlə üzləşən veb səhifəni yoxlamaq lazımdır. Bu, səhvin səbəbinin axtarışını daraldacaq və mesajların kompüterdə müəyyən faylların və ya parametrlərin olması nəticəsində göründüyü fərziyyəsini istisna edəcək və ya təsdiq edəcəkdir.
Internet Explorer aktiv skriptlərinin, ActiveX və Java-nın bloklanması
Aktiv skript, ActiveX nəzarətləri və Java məlumatların yaradılması və saytda göstərilməsi üsuluna təsir edir və istifadəçinin fərdi kompüterində bloklanırsa, əvvəllər təsvir edilmiş problemin əsl səbəbi ola bilər. Bu səbəbdən skript xətalarının baş verdiyinə əmin olmaq üçün sadəcə olaraq brauzerin təhlükəsizlik parametrlərini sıfırlamalısınız. Bunu etmək üçün aşağıdakı təlimatlara əməl edin.
- Internet Explorer 11-i açın
- Xidmət
- Pəncərədə nişana keçin Təhlükəsizlik
- Sonra düyməni basın Defolt və sonra düymə tamam
Internet Explorer müvəqqəti faylları
Siz hər dəfə veb səhifəni açdığınız zaman, Internet Explorer bu veb-səhifənin yerli surətini kompüterinizdə müvəqqəti fayllarda saxlayır. Belə fayllar çox olduqda və onları ehtiva edən qovluğun ölçüsü bir neçə giqabayta çatdıqda, veb səhifənin göstərilməsi ilə bağlı problemlər yarana bilər, yəni skript xətası mesajı görünəcək. Müvəqqəti fayllar qovluğunun müntəzəm təmizlənməsi bu problemi həll etməyə kömək edə bilər.
Müvəqqəti İnternet fayllarını silmək üçün aşağıdakı addımları yerinə yetirin.
- Internet Explorer 11-i açın
- Brauzerin yuxarı sağ küncündə simgesini basın Xidmət dişli şəklində (və ya Alt + X düymələri birləşməsi). Sonra açılan menyuda seçin
- Pəncərədə nişana keçin Ümumidir
- Fəsildə Brauzer tarixçəsi Düyməyə bas Sil...
- Pəncərədə Baxış tarixçəsini silin maddələrin yanındakı qutuları yoxlayın İnternet və veb saytların müvəqqəti faylları, Kukilər və vebsayt məlumatları, Jurnal
- düyməni basın Sil
Antivirus proqram təminatının işləməsi
Skript səhvləri antivirus proqramı aktiv skriptləri, səhifədəki ActiveX və Java nəzarətlərini və ya müvəqqəti brauzer fayllarını saxlamaq üçün qovluqları bloklayanda onun işləməsi ilə mümkündür. Bu halda, siz quraşdırılmış antivirus məhsulunun sənədlərinə müraciət etməli və müvəqqəti İnternet fayllarını saxlamaq üçün qovluqların skan edilməsini, həmçinin interaktiv obyektlərin bloklanmasını deaktiv etməlisiniz.
HTML səhifə kodunun səhv işlənməsi
Bir qayda olaraq, müəyyən bir saytda görünür və səhifə kodunun Internet Explorer ilə işləmək üçün tam uyğunlaşdırılmadığını göstərir. Bu halda, brauzerdə skript ayıklamasını söndürmək daha yaxşıdır. Bunu etmək üçün bu addımları izləyin.
- Internet Explorer 11-i açın
- Brauzerin yuxarı sağ küncündə simgesini basın Xidmət dişli şəklində (və ya Alt + X düymələri birləşməsi). Sonra açılan menyuda seçin
- Pəncərədə nişana keçin əlavə olaraq
- Sonra, qutunun işarəsini çıxarın Hər skript xətası üçün bildiriş göstərin və düyməni basın tamam.
Bu, Internet Explorer-də skript səhvlərinə səbəb olan ən ümumi səbəblərin siyahısıdır, buna görə də belə mesajlardan bezmisinizsə, bir az diqqət yetirin və problemi birdəfəlik həll edin.
Təbii ki, başqaları da var - onları mütləq qeyd edəcəm.
Firefox üçün firebug
olub olmadığını dəqiq bilmirəm yanğın böcəyi digər developer alətlərinin əcdadı, lakin o, mütləq ən populyar, istifadəçi dostu və xüsusiyyətlərlə doludur.
Firebug Firefox üçün əlavədir, yəni Firefox əlavələri saytından endirilməli və quraşdırılmalıdır.
Yanğın böcəyi çağırmaq üçün F12 düyməsini sıxmaq kifayətdir.
Bu əlavənin xüsusiyyətləri:
- Dinamik olaraq dəyişən HTML-nin yoxlanılması və redaktəsi;
- Tez CSS redaktəsi;
- JavaScript-in sazlanması, skriptlərin icrası üçün əmr xətti;
- Şəbəkə sorğularının monitorinqi - faylların və skriptlərin, sorğu başlıqlarının ölçüsünü və yükləmə vaxtını görə bilərsiniz;
- DOM analizatoru.
Bu xüsusiyyətlər haqqında uzun müddət ətraflı danışa bilərsiniz, amma düşünürəm ki, onlar bütün oxucularımıza məlumdur və əgər belə deyilsə, ətraflı məlumat Firebug ana səhifəsində və ya eyni şəkildə İlya Kantor tərəfindən tərcümə olunur.
Firebug-dan əlavə, bunun üçün faydalı bir losyona ehtiyacınız ola bilər - odlu peçenye, onunla (sürpriz:-) kukilərə baxa və dəyişdirə bilərsiniz.
Firefox üçün WEB Developer Toolbar
Ognelisə başqa bir faydalı əlavə. Bu belə görünür:
Nöqtələrdən keçək.
Deaktiv edin
JavaScript-i söndürməyə, inkişafda çox faydalı olan keşdən istifadəni dayandırmağa (səhifənin ən son yeniləmələrlə yükləndiyinə əmin olmağa imkan verir), səhifədə istifadə olunan rəngləri ləğv etməyə və standart rənglərlə əvəz etməyə imkan verir, yönləndiricinin başlığında göndərilməsini söndürün (keçidin olduğu səhifə).
Peçenyelər
Kukilərlə işləmək üçün faydalı seçim: onlara baxmaq, silmək, bloklamaq və əlavə etmək olar.
css
Bu menyuda Tərtibatçı Alətlər Panelinin ən maraqlı xüsusiyyəti var - on-the-fly CSS redaktə. Bundan əlavə, css-ə baxmaq, söndürmək və sair və s. mümkündür. Fikrimcə, klaviatura qısa yollarının olması burada çox faydalıdır (məsələn, CTRL + SHIFT + C dərhal səhifə üslublarına baxmağa imkan verir)
Formalar
Formalarla işləmək üçün hər şey: parolları göstərin, formalar haqqında məlumatı göstərin, forma metodlarını çevirin (GET » POST və əksinə) və s. Forma sahələrinin avtomatik doldurulması üçün faydalı "Forma sahələrini doldurun" funksiyası (məsələn, parol yadda saxlama funksiyası deaktiv olduqda saytı sınaqdan keçirərkən. Əks halda, mən bu paraqrafda faydalı heç nə görmürəm.
şəkillər
Şəkilləri söndürmək üçün faydalı funksiya var - saytınızın şəkillərsiz necə göründüyünü görmək. Şəkillər dairəyə alına, ölçülərini göstərə, alt-atributları göstərə bilər.
məlumat
Bu menyuda bir çox seçim var. Səhifədə sinif və id atributlarını göstərmək faydalı ola bilər. Bundan əlavə, "Rəng Məlumatına Bax" maddəsi maraqlıdır - səhifədə istifadə olunan rənglər haqqında tez məlumat əldə etmək. "Sənəd ölçüsünə bax" - səhifənin ölçüsünə baxın. "Cavab Başlıqlarına Baxın" - səhifə başlıqlarına baxın.
Müxtəlif
Ən çox istifadə edilən xüsusiyyət önbelleği təmizləməkdir. Bundan əlavə, burada "Səhifə hökmdarı" - hökmdar, "Səhifə böyüdücü" - böyüdücü şüşə və "Xətt bələdçiləri" - şablonu kəsmək üçün faydalı ola biləcək bir neçə xətt mövcuddur.
kontur
Müxtəlif səhifə elementlərinin seçimi - cədvəllər, başlıqlar, keçidlər, çərçivələr, bloklar. Ölçü dəyişdirmə hər hansı standart ekran uzantılarına uyğun olaraq brauzer pəncərəsinin ölçüsünü dəyişməyə imkan verir. Buradakı alətlər səhifənin yoxlanılması üçün saxlanılan xüsusiyyətlərdir. Həm yerli, həm də xarici. HTML, CSS və daha çoxunu doğrulamaq üçün rahat və sürətli çıxış. HTML-i təsdiqləmək üçün CTRL+SHIFT+H klaviatura qısa yolundan istifadə edə bilərsiniz.
mənbəyə bax
Mənbə koduna baxın. Xarici proqramda baxmaq, yaradılan kodu görmək imkanı.
Sağdakı mənim sevimlidir. Bu sürətli HTML, CSS təsdiqləyicisi və JavaScript səhv göstəricisidir. Heç bir problem yoxdursa, simge yaşıl, problem varsa, qırmızıdır.
Internet Explorer Developer Toolbar
8.0-dan başlayaraq xəta debug artıq bu brauzerdə quraşdırılıb. Asanlıqla çağırılır F12 düyməsi. Düzdür, 90-cı illərin proqramı kimi yazıqdır.
Ancaq bu brauzer üçün daha sərin alət var, sözdə Internet Explorer Developer Toolbar linkdən endirilə bilər.
Görünüşdə, bu alətlər paneli, əlbəttə ki, yanğın böcəklərinə bənzəyir, amma təəssüf ki, hələ də yetişməyib. Baxmayaraq ki, digər tərəfdən, o, yanğınsöndürəndə olmayan bəzi xüsusiyyətlərə malikdir. Mən Internet Explorer Developer Alətlər Panelini Firebug və bəzi hibridləri adlandırardım firefox veb tərtibatçısı Alətlər paneli.
Firebug-da olduğu kimi, elementi sadə bir kliklə yoxlamaq mümkündür. Ancaq dərhal paddings və kənarları görə bilsək, burada belə bir imkan yoxdur.
Həmçinin, Internet Explorer Developer Toolbar element ağacını Firebug kimi dinamik olaraq yeniləmir. Yəni js istifadə edərək səhifədə nəyisə dəyişsək, bu alətlər panelini istifadə edərək heç nə görməyəcəyik.
Zövq ala biləcəyiniz şeylərdən - CSS-nin tez dəyişdirilməsi (nəyi sındıracağınızı tapmaq üçün asan yol :), CSS və şəkilləri söndürmək imkanı, keşi tez təmizləmək və kukilərlə oynamaq imkanı, doğrulamaya sürətli giriş.
Ən dadlısı: damcıdan istifadə edərək səhifədən istənilən rəng əldə etməyə imkan verən daxili rəng seçicisi var. (ff üçün ayrıca ColorZilla plagini var).
Internet Explorer üçün Debug Debug Bar
Siz verilmiş linkdən Internet Explorer üçün DebugBar proqramını yükləyə bilərsiniz.
Maraqlı bir uzantı. Brauzerə əlavə panel kimi quraşdırılmışdır:
Nədənsə daxili axtarış sistemi, damcı damcısı, pəncərənin ölçüsünü dəyişmək imkanı və yenə də nədənsə sabun üçün dostuna səhifə göndərmək imkanı var. Baxmayaraq ki, faydalı ola bilər. Amma bu fürsətdən yararlana bilmədim.
Bundan əlavə, bir müfəttiş var:
Tıklama və ya işarə ilə yoxlama üsulu tərtibatçılara uyğun gəlmədi: daha maraqlı bir şeylə gəldilər. DebugBar-da hədəfi ağacda görmək üçün onu istədiyiniz elementə sürükləməlisiniz. CSS-ni redaktə etmək üçün heç bir seçim yoxdur. Ancaq təsdiqləyici və quraşdırılmış js konsolu var.
Parametrləri araşdırsanız, bunu tapa bilərsiniz:
Həm gülməli, həm də kədərli.
Məlumdur ki, Developer Toolbar səkkizinci kəşfiyyatçıda qurulacaq. Üçüncü abzasda təsvir edilənə bənzəyəcək, amma ümid edirik ki, daha yaxşı olacaq.
Opera üçün DragonFly-də debug edin
DragonFly 9.5 versiyasından etibarən Opera-da qurulub, ona görə də onu quraşdırmaq lazım deyil. Dragonfly-i aktivləşdirmək üçün Alətlər → Qabaqcıl → Tərtibatçı Alətləri bölməsinə keçin. İngilis dilindədirsə, Alətlər → Qabaqcıl → Tərtibatçı Alətləri.
Dərhal sizə xəbərdarlıq edəcəyəm ki, DragonFly Alpha2 mərhələsindədir, bu, onun bir çox qüsurlarını izah edir.
Xüsusiyyətlər siyahısı:
- DOM müfəttişi;
- Təftiş düyməsini basın (yenidən FireFox-da olduğu kimi padding görməyəcəyik);
- Redaktə etmək;
- Səhv konsoluna sürətli giriş.
DF, çərçivədəki ayrı bir səhifə kimi bir şeydir. Onu açsanız, bütün tablar üçün açıq olacaq (yanğından fərqli olaraq). Ona görə də elementi yoxlamadan əvvəl siyahıdan baxmaq istədiyimiz səhifəni seçməliyik.
Təəssüf ki, burada, Internet Explorer-də olduğu kimi, Dav Toolbar dinamik şəkildə yaradılmış elementləri göstərmir. Və ümumiyyətlə, biz səhifəni yoxlayanda heç bir JavaScript işləmir: keçidlər və düymələr kliklənmir. Ümid edək ki, DragonFly buraxılışa yaxınlaşanda bütün bu xüsusiyyətləri görəcəyik.
Safari-də WEB Müfəttişinin Debug
Brauzer haqqında dərhal deyəcəyəm safari Məlumatı fit çaldım, ona görə də, necə deyərlər, materialın adekvatlığına cavabdeh deyiləm.
Safari menyusunda "İnkişaf" maddəsini aktivləşdirmək üçün parametrlərdə müvafiq elementi aktivləşdirməlisiniz ("Qabaqcıl" nişanı):
"İnkişaf" menyusunda aşağıdakı funksiyalar mövcuddur:
WEB müfəttişinə daha yaxından nəzər salaq:
Varsayılan olaraq, müfəttiş HTML görünüş rejimində açılır. Lakin onu DOM baxış rejiminə keçirmək olar. Bunu etmək üçün, üst boşqabda bir keçid var. Müfəttişdəki elementin üzərinə sürüşdürdükdə, o, səhifənin özündə vurğulanacaq. Siz FireBug-da edə bilmədiyiniz kimi tez bir zamanda doldurma görə bilməz, işarələmə və ya CSS-i dəyişə bilməzsiniz və ya DOME-da dinamik dəyişiklikləri görə bilməzsiniz. Ancaq görürsən, çox gözəl görünür.
Bir brauzer pəncərəsində müfəttişlə işləmək istəyirsinizsə, aşağı sol küncdəki düyməni vura bilərsiniz.
Safaridə belə, "Şəbəkə qrafiki" kimi bir funksiya mövcuddur (müfəttişdəki "Şəbəkə" düyməsi):
Faylların nə vaxt və nə qədər müddətə yükləndiyini aydın görə bilərsiniz. Siz həmçinin sorğu başlıqlarına baxa bilərsiniz, lakin təəssüf ki, məzmunun özünə baxa bilməzsiniz.
Google Chrome-da Tərtibatçılar üçün Debug
Lame inkişaf etmiş bir formada doğuldu və o, dərhal əyri olsa da, inkişaf etdiricilər üçün alətlərə sahibdir.
- DOM Müfəttişi;
- javascript debugger;
- JavaScript Konsolu.
Elementi yoxlamaq üçün üzərinə sağ klikləyin və kontekst menyusunda "Element koduna bax" seçin:
Funksionallıq Safari-də olduğu kimidir: elementlər hoverdə vurğulanır, lakin CSS və HTML redaktəsi mövcud deyil, DOM-da dəyişikliklər izlənilmir. Yalnız, inspektoru brauzer pəncərəsinə əlavə etməli olan sol alt küncdəki düymə işləmir.
"Resurslar" sekmesinde aşağıdakıları görə bilərik:
Safaridəki miqyasdan bir qədər fərqlidir. Bu diaqramdakı şəffaflar nisbi fayl ölçüləridir və tam rəng yükləmə vaxtıdır. Bu və ya digər şəkildə, Chrome-un bu hissəsinin hələ tamamlanmaqdan uzaq olduğu açıq-aydın görünür.
Bu yazıda brauzerlər üçün ən məşhur uzantıları və quraşdırılmış alətləri nəzərdən keçirdim.
Başqaları var, məsələn:
- Internet Explorer WEB İnkişaf Köməkçisi ASP.NET tərtibatçıları üçün yaxşı köməkçidir (Internet Explorer);
- WEB Developer Toolbar - Internet Explorer və FireFox üçün alətlər paneli. Bir neçə faydalı xüsusiyyət var;
- WEB Accessibility Toolbar - Internet Explorer üçün alətlər paneli. Maraqlı heç nə yoxdur.
Əgər qeyd etmədiyim, lakin buna dəyər olan əlavələr varsa və ya qeyd olunan genişləndirmələr üçün əldən verdiyim funksiyalar varsa, yazın.
Sağlamlıq üçün istifadə edin!
Windows 8.1 və Windows 7-də Internet Explorer 11, tərtibatçılara bir çox cihazlarda müasir veb-saytlar və proqramlar yaratmağa, diaqnostika etməyə və optimallaşdırmağa kömək etmək üçün brauzerə daxil edilmiş tamamilə yenidən işlənmiş və təkmil tərtibatçı alətləri dəsti ilə gəlir. Qısalıq üçün sadəcə olaraq F12 adlandırdığımız yeni alətlər veb tərtibatçılarına tez və səmərəli işləməyə imkan verir.
Visual Studio və Internet Explorer işçi qrupları F12 alətlərini yaratmaq üçün birlikdə işləmişlər, bu alətlər tərtibatçılara mənalı məlumatlardan istifadə edərək problemdən həllə sürətlə keçməyə kömək etmək prinsipinə əsaslanır. Yeni F12 paketi performans problemlərinin diaqnostikası və həlli üçün alətlər, həmçinin Internet Explorer-in veb proqramları necə tərtib etdiyini və göstərdiyini daha yaxşı başa düşməyə kömək edəcək alətlərlə sürətli və çevik veb təcrübəsi təqdim edir. F12 alətləri müasir veb tərtibatçıları tərəfindən istifadə edilən sürətli, interaktiv iş axınını dəstəkləyir.
Universal alətlər dəsti
Yeni F12 dəsti tərtibatçılara problemdən həllə sürətlə keçməyə kömək edir. Maraqlı yeni xüsusiyyətlərdən bəziləri bunlardır:
- Tərtibatçılara sürətli və çevik veb proqramlar yaratmağa kömək etmək üçün UI cavab təhlili və yaddaş profili alətləri.
- Canlı DOM Explorer və CSS yoxlayıcı səhifə ilə yeniləndi, beləliklə tərtibatçılar dinamik məzmunun tərtibata və üsluba necə təsir etdiyini interaktiv şəkildə araşdıra bilsinlər.
- Səhifəni yeniləmədən tez işə salınan JavaScript-i sazlamaq bacarığı, beləliklə tərtibatçılar daha tez işə başlaya bilsinlər
F12 alətlərindən istifadə etdikcə sürətli, interaktiv iş axınına nail olmaq üçün bir çox digər təkmilləşdirmələri görəcəksiniz:
- "Yoxlama elementi" ilə menyu elementini sağ klikləməklə bu alətlərə sürətli giriş
- Effektiv klaviatura qarşılıqlı əlaqəsi
- Elementləri və komponentləri alətlərdən köçürmək üçün geniş imkan, beləliklə, əlavə formatlaşdırmadan istənilən redaktora yapışdırıla bilər.
Ən əsası odur ki, bu alətlər indi DOM Explorer-də @media və!vacib qaydalardan tutmuş UI Cavab Profilerində hər bir element üzrə xərc strukturuna qədər mövcud olan ən tam və dəqiq məlumatları göstərir. Bu alətlər həmçinin birbaşa mənalı məlumatları təmin edir; məsələn, yaddaş profilləşdiricisi "canlı" olan, lakin işarələmə və ya göstərmə ağacından istinad edilməyən DOM qovşaqlarını müəyyən edir.
Yeni F12 paketinin imkanları Visual Studio-da da mövcuddur, ona görə də tərtibatçılar bütün veb inkişaf alətlərimiz və platformalarımızda ardıcıl və qüsursuz təcrübəyə malikdirlər.
İndi bu alətlərə qısaca nəzər salaq.
UI Cavab Analizatoru ilə Tətbiqlərin Profilləşdirilməsi
UI cavab vermə aləti sizə CPU vaxtının hara xərcləndiyini anlamağa kömək edir ki, tətbiqiniz tam performans potensialına nail ola bilsin. Bu alət sizə HTML, CSS və JavaScript kodunun iş vaxtının vizuallaşdırılmasını, həmçinin işarələmə və zibil toplama kimi vacib yan təsirləri təmin edərək, Internet Explorer-in daxili işini başa düşmək üçün lazım olan məlumatları verir. Bir baxışda tətbiqinizin nə qədər sürətli cavab verdiyini və necə göstərdiyini dəqiq görə bilərsiniz. Bu, xüsusi mənbələri müəyyən etməyə imkan verəcəkdir darboğazlar və onun optimallaşdırılmasına daha ağıllı yanaşma.
Veb sayt profili
Tətbiq Yaddaş İstifadəsini Yaddaş Profileri ilə təhlil edin
Bu yaddaş analizatoru sizə yaddaş sızmalarından və ya həddindən artıq yaddaş istehlakından qaçmağa kömək edəcək. Müştərilər üçün gecə-gündüz işləyən veb proqramların yaradılması və ya kompleks interaktiv proqramlar tez-tez onların tərtibatçısının yaddaşdan istifadə məsələlərinə xüsusi diqqət yetirməli olduğunu bildirir.
JavaScript zibil toplayan mühit olsa da, proqramlar adətən daha çox yaddaş sərf edir, çünki obyekt istinadları boşalmır (və mümkün deyil). Yaddaş analizatoru JavaScript obyekti və ya DOM olmasından asılı olmayaraq səhifədəki hər bir obyekt haqqında məlumat verməklə bu problemləri müəyyən etməyə kömək edir. Bu məlumatla siz, məsələn, elementin nə qədər yaddaş saxladığını görə bilərsiniz və onun davamlılığını hansı obyektlər dəstəkləyir. Ancaq ən əsası, iki anlıq şəkli müqayisə edə və nəyin dəyişdiyini görə bilərsiniz. Bu, tətbiqinizin niyə daha çox yaddaş istifadə etdiyini anlamağa və bu vəziyyəti düzəltməyə imkan verəcək.
Deaktiv edilmiş DOM elementlərini göstərən yığın snapşot
Performans İdarəetmə Paneli ilə tətbiqin performansını tez anlayın
Səhifənizin performansına təsir edən problemləri tez bir zamanda müəyyən etməyə kömək etmək üçün Internet Explorer 11 Performans İdarəetmə Paneli adlanan "səhifə" vidcetini təmin edir, ona Ctrl+Shift+U klaviatura qısayolu və ya müvafiq Alətlər menyu elementi (Alt+T) vasitəsilə daxil olursunuz. ). Bu panel göstərmə vaxtı, yaddaş, saniyədə kadrlar (fps) və CPU istifadəsi kimi əsas performans göstəriciləri üçün Internet Explorer-də statistik məlumatları dinamik şəkildə göstərir. Performans Paneli F12 alətlərinin istifadəsini tələb etmir və müasir brauzerlərdə də istifadə oluna bilər.
Performans İdarəetmə Paneli ilə siz kadr sürətinin azalmasına və ya yüksək CPU istifadəsinə səbəb olan səhifə qarşılıqlı əlaqəsini tez müəyyən edə bilərsiniz. Daha sonra problemi yenidən yaratmaq və həllini tapmaq üçün F12-yə keçə bilərsiniz.
DOM Explorer istifadə edərək elementləri yoxlayın və işarələmə və üslubları dəyişdirin
DOM Explorer @media sorğularını və CSS qaydalarını və onların xassələrini interaktiv şəkildə qurmağı asanlaşdırır. buna görə də istifadəçi interfeysi tətbiqiniz yüksək həssas çoxlu cihaz interfeysinə çevrilir. İstədiyiniz elementi sağ klikləyərək və yoxlayaraq veb-səhifəyə tez başlaya bilərsiniz, bu da DOM Explorer-də seçilmiş elementlə birlikdə F12 alətlərini işə salacaq, DOM və tətbiq olunan CSS qaydalarını dinamik şəkildə nümayiş etdirəcək. Göstərilən DOM və CSS cədvəlləri dinamikdir və Internet Explorer-in işarələmə, CSS üslubları və qaydaların xüsusiyyətlərini necə şərh etdiyini anlamağa imkan verir. DOM Explorer-dən istifadə edərək səhifə ilə əlaqə saxladığınız və ya dəyişdirdiyiniz zaman etdiyiniz dəyişikliklər dərhal göstəriləcək.
İşarələmə və üslubları yoxlayın
DOM Explorer CSS cədvəlində dəyişiklik edərkən IntelliSense-dən istifadə edərək əmlakın və ya xassələrin düzgün dəyərini əldə etməyi asanlaşdırır. Siz asanlıqla hansı xassələrin səhv və ya tanınmadığını görə bilərsiniz və sonra mənbənizə yenidən tətbiq etmək üçün qaydanı kopyalaya bilərsiniz.
Debugger və Console ilə JavaScript-in sazlanması
Yeni JavaScript sazlayıcısı sizə etibarsız kodu tapmaq və tez bir zamanda düzəltmək üçün alətlər verir. JavaScript sazlayıcısı hətta skript kitabxananız kiçildilmiş olsa belə, çoxsaylı faylları aça və baxa bilər, kəsmə nöqtələri və izləmə nöqtələri təyin edə, JavaScript obyektlərini, dəyərlərini, əhatə dairəsi zəncirlərini yoxlaya və yığının məzmununa baxa bilər. F12 alətlərinin işə salınması JavaScript sazlayıcısını da dərhal işə salacaq, beləliklə siz dərhal işə başlaya bilərsiniz
Sazlama zamanı, ehtimal ki, veb saytınızla əlaqə qurmaq istəyəcəksiniz. Konsol bu iş üçün əsas vasitədir. Siz istənilən vaxt konsola daxil ola bilərsiniz ki, bu da IntelliSense və obyekt rendererləri ilə bu interaktiv mühitdən səmərəli istifadə edir. Konsol həmçinin, çıxışı qeyd etməyə, xüsusi kodda sərf olunan vaxtın miqdarını təhlil etməyə və JavaScript obyektlərini dərindən yoxlamaq lazım olduqda obyekt rendererləri təqdim etməyə imkan verən geniş çeşidli ixtisaslaşmış API təmin edir.
Xülasə
Bu bloq yazısı sadəcə olaraq F12 alətlərindəki yeni elementlərin təsvirinin eskizini ehtiva edir. Sən tapa bilərsən tam siyahı yeni funksionallıq"F12 Alətlərində Yeniliklər" məqaləsində və "Internet Explorer 11 Preview Developer Bələdçisi"ndə Internet Explorer 11-də tərtibatçılar üçün əlçatandır. Siz həmçinin "F12 Adventure" Internet Explorer test demosunda daha çox öyrənə bilərsiniz.
Rəyinizi səbirsizliklə gözləyirik və tərtibatçı icması ilə uzunmüddətli əməkdaşlığı səbirsizliklə gözləyirik. Təkliflərinizi Internet Explorer 11-də və ya Connect saytındakı Əlaqə və Təklif aləti vasitəsilə paylaşın.
P. J. Hough
, Vitse-prezident, Visual Studio
