Отстранување грешки на веб-страница. Грешки во скрипта во Internet Explorer. Причини и решенија. Профилирање на SQL прашања Дебагирајте веб-страница

Додека сурфате на Интернет Интернет прелистувач Explorer може да ви даде пораки кои укажуваат дека страницата содржи грешки и може да не се прикажува правилно. Ајде да погледнеме неколку начини да го решиме овој проблем.

Инструкции

Ако нема видливи потешкотии во работењето на прелистувачот, освен грешка што се појавува периодично, можете да се обидете да го оневозможите отстранувањето грешки на скриптата, така што пораката повеќе не се појавува (ако грешката се појави на повеќе од една локација одеднаш, продолжете на следната чекор). Од менито Алатки, отворете Интернет Опции, изберете го табот Напредно и проверете го полето за избор „Оневозможи дебагирање скрипта“. Ако сакате да го исклучите известувањето за сите грешки, отштиклирајте го полето за избор „Прикажи известување за секоја грешка во скрипта“.

Обидете се да ја отворите страницата што ја предизвикува грешката кога ја гледате од друга сметка или од друг компјутер за да видите дали проблемот е локален. Ако се појави грешката, најверојатно е предизвикана од неточен код на веб-страницата. Во овој случај, можете да го оневозможите дебагирањето на скриптата следејќи ги упатствата во претходниот чекор. Ако проблемот исчезне кога ја прелистувате страницата користејќи друг компјутер или сметка, продолжете на следниот чекор.

Можеби прелистувачот Internet Explorerво моментот на гледање страници, не ги блокира активните скрипти, Java и ActiveX, кои го одредуваат прикажувањето на информациите на страницата. За да го решите проблемот, треба да ги ресетирате безбедносните поставки на прелистувачот. За да го направите ова, во менито „Алатки“, изберете „Интернет опции“ и одете на табулаторот „Безбедност“. Кликнете на копчето „Стандардно“, а потоа „OK“. Ако проблемот продолжи откако повторно ќе ја стартувате страницата каде што се појави грешката, обидете се со следниот метод.

Како што знаете, прелистувачот складира привремени датотеки и копии од страници во посебна папка за подоцнежен пристап. Ако големината на папката стане преголема, некои страници може да не се прикажуваат правилно. Проблемот може да се реши со периодично празнење на папката со привремени датотеки. За да го направите ова, отворете го прозорецот за дијалог Интернет опции од менито Алатки. На јазичето Општо, во групата Историја, кликнете на копчето Избриши. Проверете ги полињата за привремени интернет-датотеки, колачиња, дневник и податоци за веб-форма и кликнете OK.

Има, се разбира, и други - дефинитивно ќе ги спомнам.

Firebug за Firefox

Не знам со сигурност дали е FireBugпредок на други алатки за програмери, но дефинитивно е најпопуларен, удобен и функционален денес.

Firebug е додаток за Firefox, што значи дека треба да го преземете од веб-локацијата за додатоци на Firefox и да го инсталирате.

За да активирате пожар, само притиснете F12.

Карактеристики на овој додаток:

• Увид и уредување на динамички променлив HTML;
• Уредување CSS при летот;
• Дебагирање JavaScript, командна линијада се извршуваат скрипти;
• Следење на мрежни барања - можете да ги видите големините и времето на преземање на датотеките и скриптите, заглавијата на барањата;
• DOM парсер.

За овие можности можеме долго да зборуваме детално, но мислам дека сите наши читатели ги знаат, а ако не - детални информациие на почетната страница на Firebug или истото во преводот на Илја Кантор.

Во прилог на самиот firebug, можеби ќе ви биде корисен корисен лосиондо него - FireCookie, со кој (изненадување:-) можете да гледате и менувате колачиња.

Лента со алатки за WEB програмери за Firefox

Уште еден корисен додаток на Огнелис. Изгледа вака:

Ајде да погледнеме точка по точка.

Оневозможи

Ви овозможува да го исклучите JavaScript и да ја оневозможите употребата на кешот, што е многу корисно за време на развојот (ви овозможува да бидете сигурни дека страницата е вчитана заедно со најновите ажурирања), откажете ги боите користени на страницата и заменете ги со стандардни, забранете испраќање во заглавието на упатувачот (страницата од која е направен упатувањето).

Колачиња

Корисна опција за работа со колачиња: можете да ги гледате, бришете, одбивате и додавате.

CSS

Ова мени ја складира најкул функцијата на лентата со алатки за програмери - уредување на CSS во лет. Покрај тоа, можно е да се гледа css, оневозможи, и така натаму и така натаму. Според мое мислење, присуството на копчиња за кратенки е многу корисно овде (CTRL+SHIFT+C, на пример, ви овозможува директно да одите на стилови на гледање страници)

Форми

Сè за работа со формулари: прикажување лозинки, прикажување информации за формулари, конвертирање на методи на формулари (GET »POST и обратно) и многу повеќе. Корисна функција е „Пополни ги полињата со формулари“ за автоматско пополнување на полињата со формулари (на пример, при тестирање на страница, кога функцијата за запомнување лозинки е оневозможена. Инаку, не гледам ништо корисно во оваа ставка.

Слики

Постои корисна функција за оневозможување на слики - да видите како изгледа вашата страница без слики. Можете да заокружувате слики, да ги прикажете нивните големини и да прикажете алт атрибути.

Информации

Има многу опции во ова мени. Може да биде корисна функцијата за прикажување на атрибутите на класа и id на страницата. Покрај тоа, интересна е ставката „Прикажи информации за бојата“ - брзо да се добијат информации за боите што се користат на страницата. „Прикажи ја големината на документот“ - погледнете ја големината на страницата. „Прикажи ги заглавијата на одговорот“ - прегледајте ги заглавијата на страниците.

Разно

Најчесто користената функција е чистење на кешот. Дополнително, функциите што се достапни овде се „Владетел на страница“ - линијар, „Лупа на страници“ - лупа и „Водичи за линии“ - неколку линии што можат да бидат корисни за отсекување на шаблон.

Преглед

Истакнување на различни елементи на страницата - табели, наслови, врски, рамки, блокови. Промената на големината ви овозможува да ја промените големината на прозорецот на прелистувачот за да одговара на сите стандардни екстензии на екранот. Функциите на алатките за валидација на страницата се зачувани овде. И локални и надворешни. Практично и брз пристапдо валидација на HTML, CSS, итн. За да го потврдите HTML, можете да ја користите кратенката на тастатурата CTRL+SHIFT+H.

Погледнете го изворот

Прикажи изворен код. Можност за гледање во надворешна апликација, прегледување на генерираниот код.

Најмногу ми се допаѓа онаа во десниот агол. Тоа е брз HTML, CSS валидатор и индикатор за грешка во JavaScript. Ако нема проблеми, иконата е зелена, а ако има проблеми, иконата е црвена.

Лента со алатки за програмери на Internet Explorer

Почнувајќи од 8.0, отстранувањето грешки веќе е вградено во овој прелистувач. Лесно може да се нарече Копче F12. Точно, лоша е како програма од 90-тите.

Но, постои многу поладна алатка за овој прелистувач, таканаречената лента со алатки за програмери на Internet Explorer, која може да се преземе од врската.

Во изгледот, оваа лента со алатки, се разбира, изгледа како огнена бубачка, но, за жал, сè уште не созреала за неа. Иако, од друга страна, има некои способности кои firebug ги нема. Јас би го нарекол Internet Explorer Developer Toolbar еден вид хибрид на Firebug и FireFox WEB програмерЛента со алатки.

Како и во firebug, можно е да се прегледа елемент со едноставен клик. Но, ако во веднаш можеме да видиме баласт и маргини, тука нема таква можност.

Дополнително, лентата со алатки за програмери на Internet Explorer не го ажурира динамично дрвото на елементите како што тоа го прави Firebug. Односно, ако промениме нешто на страницата користејќи js, нема да видиме ништо користејќи ја оваа лента со алатки.

Она во што можете да уживате е менување на CSS во лет (лесен начин да најдете што да хакирате :), можност за оневозможување на CSS и слики, можност за брзо чистење на кешот и играње со колачиња, брз пристап до валидација.

Најдобриот дел: има вграден избирач на бои, кој ви овозможува да добиете која било боја од страницата со помош на пипета. (постои посебен додаток ColorZilla за ff).

Debug DebugBar за Internet Explorer

DebugBar за Internet Explorer може да се преземе од дадената врска.

Интересна екстензија сама по себе. Инсталиран како дополнителен панел на прелистувачот:

Поради некоја причина има вграден пребарувач, капалка за очи, можност за промена на големината на прозорецот и, повторно, поради некоја причина можност за испраќање страница на пријател за сапун. Иако ова може да биде корисно. Но, не успеав да ја искористам оваа можност.

Покрај тоа, постои инспектор:

Програмерите не беа задоволни со методот на проверка со кликнување или покажување: дојдоа до поинтересна работа. Во DebugBar треба да го повлечете вкрстувањето на саканиот елемент за да го видите на дрвото. Нема можност за уредување на CSS. Но, има валидатор и вградена js конзола.

И ако копате во поставките, можете да го најдете ова:

И смешно и тажно.

Познато е дека лентата со алатки за програмери ќе биде вградена во осмиот истражувач. Ќе биде слично на она што е опишано во третиот пасус, но се надеваме дека ќе биде подобро.

Отстранете грешки DragonFly за Opera

DragonFly е вграден во Opera почнувајќи од верзијата 9.5, така што нема потреба да го инсталирате. За да го активирате Dragonfly, одете во Алатки → Напредно → Алатки за програмери. И ако на англиски, тогаш Алатки → Напредно → Алатки за програмери.

Веднаш ќе ве предупредам дека DragonFly е во фазата Алфа2, ова објаснува многу од неговите пропусти.

Список на карактеристики:

• инспектор на ДОМ;
• Проверете со кликнување (повторно, нема да видиме вовлекување како во FireFox);
• Уредување;
• Брз пристап до конзолата за грешки.

DF е нешто како посебна страница во рамка. Ако го отворите, ќе биде отворен за сите јазичиња (за разлика од firebug). Затоа, пред да провериме некој елемент, мораме од списокот да ја избереме страницата што сакаме да ја прикажеме.

За жал, овде, како и во Internet Explorer Dav Toolbar, динамички креираните елементи не се прикажуваат. И воопшто, кога ја прегледуваме страницата, не се активира JavaScript: врските и копчињата не се кликнуваат. Да се ​​надеваме дека ќе ги видиме сите овие карактеристики кога DragonFly ќе се приближи до објавувањето.

Дебагирајте го ВЕБ-инспекторот во Safari

Веднаш ќе кажам дека се работи за прелистувачот СафариЈа пропуштив информацијата, па не одговарам за адекватноста на материјалот, како што велат.

За да ја овозможите ставката „Развој“ во менито Safari, треба да ја овозможите соодветната ставка во поставките (табулаторот „Напредно“):

Во менито „Развој“ ни се достапни следните функции:

Ајде внимателно да го разгледаме ВЕБ-инспекторот:

Стандардно, инспекторот се отвора во режим на HTML преглед. Но, може да се префрли во режим на преглед DOM. За таа цел, на горната плоча има прекинувач. Кога лебдите над некој елемент во инспекторот, тој ќе биде означен на самата страница. Не можете да гледате пополнување, да менувате обележување или CSS во лет, или да гледате динамички промени во DOMe во лет, како што можете во FireBug. Но, мора да признаете, изгледа многу слатко.

Ако сакате да работите со инспекторот во прозорец на прелистувачот, можете да кликнете на копчето во долниот лев агол.

Дури и во Safari, достапна е функција како што е „Мрежна временска линија“ (копчето „Мрежа“ во инспекторот):

Можете јасно да видите кога и колку време е потребно за преземање датотеки. Можете исто така да ги видите заглавијата на барањата, но, за жал, не можете да ја видите самата содржина.

Отстранување грешки за програмери во Google Chrome

Ламе е роден во напредна форма и веднаш има, иако засега криво, но сепак алатки за програмерите.

• Инспектор на ДОМ;
• javascript дебагер;
• JavaScript конзола.

За да проверите кој било елемент, треба да кликнете со десното копче на него и контекстното мениизберете „Прикажи го кодот на елементот“:

Функционалноста е иста како и во Safari: елементите се означени кога лебдат, но CSS и HTML уредувањето не е достапно, а промените во DOM не се следат. Но, копчето во долниот лев агол, кое треба да го прикачи инспекторот на прозорецот на прелистувачот, не работи.

Во табулаторот „Ресурси“ можеме да го видиме следново:

Малку поинаку од скалата во сафари. Проѕирното на овој дијаграм ги прикажува релативните големини на датотеките, а целосната боја го покажува времето на вчитување. Вака или онака, очигледно е дека овој дел од Chrome е далеку од завршен.

Во оваа статија, ги разгледав најпознатите екстензии и вградени прелистувачи.

Има и други, на пример:

• Internet Explorer WEB Development Helper - добар асистент за развивачите на ASP.NET (Internet Explorer);
• WEB Developer Toolbar - лента со алатки за Internet Explorer и FireFox. Постојат неколку корисни карактеристики;
• WEB Accessibility Toolbar - лента со алатки за Internet Explorer. Ништо интересно.

Ако има додатоци што не ги спомнав, но треба, или има функции за споменатите екстензии што ги пропуштив, пишете.

Уживајте во тоа за вашето здравје!

Пишувањето HTML е одлично, но како да знаете каде е грешката кога нешто не работи? Оваа статија опишува неколку алатки кои можат да ви помогнат да пронајдете и поправите грешки во HTML.

Дебагирањето не е страшно

Кога пишувате некој код, обично сè оди добро додека не направите грешка. Значи, вашиот код не работи или не работи како што сте замислиле. Ако се обидете да компајлирате скршена програма Rust, компајлерот ќе покаже грешка:

Во овој случај, пораката за грешка е релативно едноставна за разбирање - „незавршена низа со двојни цитати“. Ако внимателно го погледнете println!(Здраво, свето!“); ќе забележите дека недостасува двоен цитат. Се разбира, пораките за грешка може да станат многу потешки за разбирање како што расте вашиот код, а дури и наједноставните случаи може да изгледаат застрашувачки за оние кои не знаат ништо за Rust.

Но, не плашете се да дебагирате! За удобно пишување и дебагирање на кој било код, треба да го разберете јазикот и неговите алатки.

HTML и дебагирање

HTML не е толку тешко да се разбере како Rust. HTML не се компајлира во која било друга форма пред прелистувачот да го анализира и да го прикаже резултатот (тој се толкува, не се компајлира). Синтаксата на HTML елементите е многу појасна од онаа на „вистинските програмски јазици“ како што се Rust, JavaScript или Python. Начинот на кој прелистувачите читаат HTML е повеќе толерантниотколку програмските јазици кои построго го толкуваат нивниот код. Ова е и лошо и добро.

Толерантен код

Значи, што значи толерантен? Општо земено, кога ќе го расипете вашиот код, ќе наидете на два типа на грешки:

• Синтаксни грешки: Ова се правописни грешки, како што беше случајот погоре во примерот Руст. Тие обично се лесно да се поправат, се додека сте запознаени со синтаксата на јазикот и што значат пораките за грешка.
• Логички грешки: Тоа се грешки кои се појавуваат кога синтаксата е точна, но кодот не ја исполнува својата цел, односно програмата не се извршува правилно. Потешко е да се поправат од синтаксните бидејќи нема пораки што укажуваат каде сте направиле грешка.

HTML не страда од синтаксички грешки бидејќи прелистувачот толерантно го чита кодот, во смисла дека страниците може да се прикажуваат дури и ако се присутни синтаксички грешки. Прелистувачите имаат вградени правила за толкување на погрешно напишаното обележување и можете да извршите нешто дури и ако мислевте на нешто друго. Ова може да биде вистински проблем!

На забелешка: HTML е читлив бидејќи кога за прв пат се појави веб, беше одлучено да им се дозволи на луѓето да објавуваат содржина дури и ако кодот е неточен, бидејќи ова е многу поважно отколку да се осигураме дека синтаксата е апсолутно точна. Интернетот немаше да биде толку популарен денес ако беше строг кон новодојденците.

Активно учење: Воведување на толерантен код

Време е да се истражи природата на толерантен код во HTML.

HTML валидација

Од примерот погоре е јасно дека вреди да се провери валидноста на HTML. Во едноставниот пример погоре, можете едноставно да го поминете целиот код и да пронајдете грешки, но што е со огромните сложени страници?

Најдобро е да ја проверите страницата во услуга за валидација на обележување. Беше создаден и одржуван од W3C, организација која се занимава со спецификациите на HTML, CSS и други веб технологии. Услугата ќе го провери вашиот HTML и ќе генерира извештај за грешки во него.

HTML може да се провери на адресата со преземање на датотеката или едноставно копирање на страницата.

Активно учење: Потврдување на HTML документ

1. Отворете ја услугата за валидација на обележување во вашиот прелистувач.
2. Префрлете се на режимот Потврди со директен внес.
3. Копирајте го целиот код на документот (не само телото) и залепете го во влезниот простор.
4. Притиснете Проверете.

Ќе видите листа на грешки и други информации.

Работа со пораки за грешка

Обично веднаш е јасно што значат пораките, но понекогаш треба да работите напорно за да сфатите што се случува. Сега ќе ги разгледаме сите грешки и ќе откриеме што значат. Ве молиме имајте предвид дека пораките ја означуваат линијата и колоната на кодот за полесно да се пронајдат грешките.

• „Крајната ознака беше имплицирана, но имаше отворени елементи“ (2 примери): Нема експлицитна ознака за затворање, иако прелистувачот може да погоди каде треба да биде. Пораката укажува на линијата по онаа каде што се очекуваше ознаката за затворање, но ќе го најдете вистинското место.
• „Незатворен елемент силен“: Ова е многу едноставна грешка- елемент) укажува дека неговата содржина е од големо значење, сериозност или итност. Прелистувачите обично прикажуваат содржина со задебелени букви."> не е затворена и пораката укажува директно на ознаката за отворање.
• „Крајната ознака силно ги прекршува правилата за вгнездување“: Елементот е вгнезден погрешно - нема соодветна крајна ознака на ова ниво.
• "Крајот на датотеката е постигнат кога е внатре во вредност на атрибутот. Игнорирачка ознака": Мистериозна порака. Факт е дека некаде (најверојатно, на крајот од документот) својството на елементот е напишано погрешно, а крајот на датотеката завршил во овој имот. Врската не е видлива во прелистувачот - најверојатно проблемот е во негова близина.
• „Виден е крајот на датотеката и има отворени елементи“: Датотеката е завршена, но некои елементи не се затворени. Пораката го означува крајот на датотеката, во овој случај елементот не е затворен пример: врска до почетната страница на Mozilla ↩

↩ ↩

Доста често, корисниците може да забележат ситуација кога се појавува порака за грешка во скриптата во прелистувачот (IE). Ако ситуацијата е изолирана, тогаш нема потреба да се грижите, но кога таквите грешки стануваат редовни, тогаш вреди да се размислува за природата на проблемот.

Грешка во скрипта во Internet Explorer обично е предизвикана од тоа што прелистувачот не го обработува правилно кодот на страницата HTML, присуството на привремени интернет-датотеки, поставките на сметката и многу други причини, кои ќе разговарамево овој материјал. Ќе се разговара и за методите за решавање на овој проблем.

Пред да започнете со вообичаените методи за дијагностицирање на проблемите на Internet Explorer кои предизвикуваат грешки во скриптата, треба да бидете сигурни дека грешката не се појавува само на една специфична локација, туку на повеќе веб-страници одеднаш. Исто така, треба да ја проверите веб-страницата каде што се појави овој проблем под друга сметка, на друг прелистувач и на друг компјутер. Ова ќе ви овозможи да го стесните пребарувањето за причината за грешката и да ја исклучите или потврдите хипотезата дека пораките се појавуваат како резултат на присуството на одредени датотеки или поставки на компјутерот

Блокирање на активни скрипти на Internet Explorer, ActiveX и Java

Активните скрипти, контролите ActiveX и Java влијаат на начинот на кој информациите се генерираат и прикажуваат на страницата и може да бидат вистинска причина за претходно опишаниот проблем доколку се блокирани на компјутерот на корисникот. За да се осигурате дека се појавуваат грешки во скриптата поради оваа причина, едноставно треба да ги ресетирате безбедносните поставки на вашиот прелистувач. За да го направите ова, следете ги следните препораки.

• Отворете го Internet Explorer 11
• Сервис

• Во прозорецот, одете на јазичето Безбедност
• Следно, кликнете на копчето Стандардно, а потоа копчето добро

Привремени датотеки на Internet Explorer

Секогаш кога отворате веб-страница, прелистувачот Internet Explorer зачувува локална копија од оваа веб-страница на вашиот компјутер во таканаречените привремени датотеки. Кога има премногу такви датотеки и големината на папката што ги содржи достигне неколку гигабајти, може да се појават проблеми со прикажувањето на веб-страницата, имено, може да се појави порака за грешка во скриптата. Редовното чистење на папката со привремени датотеки може да помогне да се реши овој проблем.
За да избришете привремени интернет-датотеки, следете ги овие чекори.

• Отворете го Internet Explorer 11
• Сервис
• Во прозорецот, одете на јазичето Се чести
• Во поглавјето Историја на прелистувачоткликнете на копчето Избриши…

• Во прозорецот Се брише историјата на прегледипроверете ги полињата до ставките Привремени датотеки на Интернет и веб-страници, Колачињаи податоци за веб-страницата, Списание
• Кликнете на копчето Избриши

Работење на антивирусен софтвер

Можни се грешки во скриптата преку операција антивирусна програмакога блокира активни скрипти, контроли ActiveX и Java на страница или привремени папки на прелистувачот. Во овој случај, треба да се повикате на документацијата за инсталираниот антивирусен производ и да го оневозможите скенирањето на папките за зачувување на привремени интернет-датотеки, како и блокирање на интерактивни објекти.

Неправилна обработка на кодот на страницата HTML

Обично се појавува на една специфична локација и покажува дека кодот на страницата не е целосно приспособен за работа со Internet Explorer. Во овој случај, најдобро е да го оневозможите дебагирањето на скрипта во прелистувачот. За да го направите ова, следете ги овие чекори:

• Отворете го Internet Explorer 11
• Во горниот агол на прелистувачот (десно), кликнете на иконата Сервисво форма на запчаник (или комбинација на копчиња Alt+X). Потоа во менито што се отвора, изберете
• Во прозорецот, одете на јазичето дополнително
• Следно, отштиклирајте го полето Прикажи известување за секоја грешка во скриптатаи притиснете го копчето добро.

Ова е листа на најмногу заеднички причини, кои предизвикуваат грешки во скриптата во Internet Explorer, па доколку ви е доста од вакви пораки, обрнете малку внимание и решете го проблемот еднаш засекогаш.

На овој моментИма голем број на различни прелистувачи кои ги поддржуваат постоечките HTML стандарди во различен степен. Лично, го претпочитам прелистувачот од Mozilla Corporation. Овој прелистувач има долга историја (се базира на познатиот прелистувач Netscape Navigator). Исто така, ми се допаѓа овој прелистувач бидејќи поддржува систем на приклучоци - одделно дистрибуирани додатоци, кога сте поврзани, можете да ја промените функционалноста и да ја прилагодите за да одговара на вашите потреби. И конечно, овој прелистувач е слободно дистрибуиран и со отворен код, што е исто така важно. Затоа, решив да ги опишам можностите што овој прелистувач ги обезбедува не само на корисникот, туку и на развивачот на веб-страници, колку е лесен и удобен процесот на дебагирање пишани производи.

Mozilla Firefoxе еден од најпопуларните прелистувачи меѓу програмерите и веб-програмерите. Тоа им го привлекува вниманието поради можностите што ги дава овој прелистувач за дебагирање креирани проекти, поправка на грешки и нивно подобрување. Стандардниот пакет на прелистувач вклучува java конзола (или „конзола за грешки“). Оваа алатка ви овозможува да дебагирате вградени скрипти со Java-script. Но, многу повеќе функционалност е обезбедена на прелистувачот со додатоци од трети страни, кои може да се преземат и инсталираат од официјалната веб-страница на Фондацијата Mozilla. Сега сакам да погледнам два од овие приклучоци - Web Developer и Firebug. И двата од овие додатоци може да се преземат од горенаведените врски од официјалната веб-страница за додатоци. По нивното инсталирање и рестартирање на прелистувачот, развивачот има широк опсег на можности, кои ќе ги опишам подолу, за возврат за секој од приклучоците.

Приклучок Firebug

Како што е наведено на официјалната страница: „Firebug се интегрира со прелистувачот Firefox за значително да го збогати комплетот алатки за програмери. Ќе можете да уредувате, дебагирате и испитувате CSS, HTML и Javascript во живо на која било веб-страница“. И навистина е така. Ајде да погледнеме некои од функциите на овој приклучок, имено:

• Преглед и уредување на HTML.
• Градење на CSS.
• Мониторинг на мрежни барања
• Дебагирање JavaScript
• Истражување на JavaScript
• Пријавување за JavaScript

Ова не е целосен список на сите негови способности. Бидејќи проектот е со отворен код, секој може да менува и додава функционалност.

За да работите со приклучокот, мора да го притиснете копчето F12 (Ctrl-F12 за да работите со него во посебен прозорец). По успешното лансирање, го добиваме следново - Слика 1а, 1б.

Слика 1а. Почетниот прозорец на приклучокот firebug.

Слика 1б. Почетниот прозорец на приклучокот firebug.

Следно, започнува вистинската работа со приклучокот. Да речеме дека треба да го најдеме овој или оној објект во HTML кодот или да одредиме како точно се имплементира користејќи CSSтековен мирисна. За да го направите ова, едноставно треба да ги изберете потребните опции во менито на прозорецот на приклучокот со глувчето. Примерот подолу е HTML во режим на проверка. Сега, одејќи на страницата со документот, под курсорот на глувчето ќе забележиме правоаголна област, што ја илустрира областа со која работиме. Во прозорецот на приклучокот ќе ги видиме HTML и CSS параметрите што се користат. Исто така, со кликнување на секоја од нив, можете да направите промени и да ги следите со текот на времето. Опишаните дејства се илустрирани на сликите 2,3,4.

За време на развојот на овој проект, додатокот опишан погоре се користеше токму за овие цели. Сепак, иако овде не се користеше скрипта за Java, додатокот firebug може да се користи и за негово дебагирање. Пример за дебагирање е прикажан на Слика 5.

Како што е опишано погоре, функционалноста на оваа екстензија не е ограничена на ова. Можете да го проучите во целост и да го користите за вашите потреби со преземање од дадените линкови, откако ќе го инсталирате Mozilla Firefox.

Приклучок за веб програмери

Web Developer е втората екстензија за Мозила прелистувач Firefox е многу моќен и функционален, што овозможува брзо и ефикасно отстранување грешки. Откако ќе го инсталирате, во прозорецот на прелистувачот ќе се појави дополнителна лента со алатки, прикажана на Слика 6.

Понатамошната работа со приклучокот е интуитивна. На пример, ако треба да направиме некоја работа со CSS (иако не е целосно функционална како приклучокот Firebug), можеме да кликнете на менито CSS и да го заклучиме, овозможиме или оневозможиме.

Многу е погодно за развивачот да може да види како неговиот проект ќе изгледа на монитори со различна резолуција. За да го направите ова, треба да го користите табот Промена на големина. Овде можете рачно да поставите потребни дозволиекран (800x600, 1024x768, итн.), а потоа слободно префрлајте се меѓу нив, зумирате или одзумирате содржина. Оваа функционалност е прикажана на Слика 7.

Оваа екстензија има и богата функционалност, која е опишана и достапна на официјалните веб-страници.

Список на користени извори

• 1. www.getfirebug.com
  Официјална веб-страница на додатокот.
• 2. http://addons.mozilla.org
  Официјалната веб-страница на Mozilla, каде што се приклучоците за Прелистувач Firefox, информации за програмери, информации за користење на приклучоци.
• 3. http://chrispederick.com/work/web-developer/
  Официјална веб-страница на развивачот на приклучоци WebDeveloper.

Додека пребарувате на Интернет, Internet Explorer може да прикаже пораки што укажуваат дека страницата содржи грешки и дека можеби нема да се прикаже правилно. Ајде да погледнеме неколку начини да го решиме овој проблем.

Инструкции

Ако нема видливи потешкотии во работењето на прелистувачот, освен грешка што се појавува периодично, можете да се обидете да го оневозможите отстранувањето грешки на скриптата, така што пораката повеќе не се појавува (ако грешката се појави на повеќе од една локација одеднаш, продолжете на следната чекор). Од менито Алатки, отворете Интернет Опции, изберете го табот Напредно и проверете го полето за избор „Оневозможи дебагирање скрипта“. Ако сакате да го исклучите известувањето за сите грешки, отштиклирајте го полето за избор „Прикажи известување за секоја грешка во скрипта“.

Обидете се да ја отворите страницата што ја предизвикува грешката кога ја гледате од друга сметка или од друг компјутер за да видите дали проблемот е локален. Ако се појави грешката, најверојатно е предизвикана од неточен код на веб-страницата. Во овој случај, можете да го оневозможите дебагирањето на скриптата следејќи ги упатствата во претходниот чекор. Ако проблемот исчезне кога ја прелистувате страницата користејќи друг компјутер или сметка, продолжете на следниот чекор.

Internet Explorer можеби не ги блокира активните скрипти, Java и ActiveX кои контролираат како информациите се прикажуваат на страницата кога гледате страници. За да го решите проблемот, треба да ги ресетирате безбедносните поставки на прелистувачот. За да го направите ова, во менито „Алатки“, изберете „Интернет опции“ и одете на табулаторот „Безбедност“. Кликнете на копчето „Стандардно“, а потоа „OK“. Ако проблемот продолжи откако повторно ќе ја стартувате страницата каде што се појави грешката, обидете се со следниот метод.

Како што знаете, прелистувачот складира привремени датотеки и копии од страници во посебна папка за подоцнежен пристап. Ако големината на папката стане преголема, некои страници може да не се прикажуваат правилно. Проблемот може да се реши со периодично празнење на папката со привремени датотеки. За да го направите ова, отворете го прозорецот за дијалог Интернет опции од менито Алатки. На јазичето Општо, во групата Историја, кликнете на копчето Избриши. Проверете ги полињата за привремени интернет-датотеки, колачиња, дневник и податоци за веб-форма и кликнете OK.

Доста често, корисниците може да доживеат ситуација кога се појавува порака за грешка во скриптата во прелистувачот Internet Explorer (IE). Ако ситуацијата е изолирана, тогаш нема потреба да се грижите, но кога таквите грешки стануваат редовни, тогаш вреди да се размислува за природата на проблемот.

Грешка во скриптата во Internet Explorer обично е предизвикана од неправилно обработување на кодот на страницата HTML од прелистувачот, присуството на привремени интернет-датотеки, поставки на сметката и многу други причини, за кои ќе се дискутира во овој материјал. Ќе се разговара и за методите за решавање на овој проблем.

Пред да започнете со вообичаените методи за дијагностицирање на проблемите на Internet Explorer кои предизвикуваат грешки во скриптата, треба да бидете сигурни дека грешката не се појавува само на една специфична локација, туку на повеќе веб-страници одеднаш. Исто така, треба да ја проверите веб-страницата на која се појави овој проблем под друга сметка, на друг прелистувач и на друг компјутер. Ова ќе ви овозможи да го стесните пребарувањето за причината за грешката и да ја исклучите или потврдите хипотезата дека пораките се појавуваат како резултат на присуството на одредени датотеки или поставки на компјутерот

Блокирање на активни скрипти на Internet Explorer, ActiveX и Java

Активните скрипти, контролите ActiveX и Java влијаат на начинот на кој информациите се генерираат и прикажуваат на страницата и може да бидат вистинска причина за претходно опишаниот проблем доколку се блокирани на компјутерот на корисникот. За да се осигурате дека се појавуваат грешки во скриптата поради оваа причина, едноставно треба да ги ресетирате безбедносните поставки на вашиот прелистувач. За да го направите ова, следете ги следните препораки.

• Отворете го Internet Explorer 11
• Сервис

• Во прозорецот, одете на јазичето Безбедност
• Следно, кликнете на копчето Стандардно, а потоа копчето добро

Привремени датотеки на Internet Explorer

Секогаш кога отворате веб-страница, прелистувачот Internet Explorer зачувува локална копија од оваа веб-страница на вашиот компјутер во таканаречените привремени датотеки. Кога има премногу такви датотеки и големината на папката што ги содржи достигне неколку гигабајти, може да се појават проблеми со прикажувањето на веб-страницата, имено, може да се појави порака за грешка во скриптата. Редовното чистење на папката со привремени датотеки може да помогне да се реши овој проблем.
За да избришете привремени интернет-датотеки, следете ги овие чекори.

• Отворете го Internet Explorer 11
• Во горниот агол на прелистувачот (десно), кликнете на иконата Сервисво форма на запчаник (или комбинација на копчиња Alt+X). Потоа во менито што се отвора, изберете
• Во прозорецот, одете на јазичето Се чести
• Во поглавјето Историја на прелистувачоткликнете на копчето Избриши…

• Во прозорецот Се брише историјата на прегледипроверете ги полињата до ставките Привремени датотеки на Интернет и веб-страници, Колачиња и податоци за веб-страниците, Списание
• Кликнете на копчето Избриши

Работење на антивирусен софтвер

Можни се грешки во скриптата преку работењето на антивирусната програма кога таа ги блокира активните скрипти, контролите ActiveX и Java на страницата или папките за зачувување на привремените датотеки на прелистувачот. Во овој случај, треба да се повикате на документацијата за инсталираниот антивирусен производ и да го оневозможите скенирањето на папките за зачувување на привремени интернет-датотеки, како и блокирање на интерактивни објекти.

Неправилна обработка на кодот на страницата HTML

Обично се појавува на една специфична локација и покажува дека кодот на страницата не е целосно приспособен за работа со Internet Explorer. Во овој случај, најдобро е да го оневозможите дебагирањето на скрипта во прелистувачот. За да го направите ова, следете ги овие чекори:

• Отворете го Internet Explorer 11
• Во горниот агол на прелистувачот (десно), кликнете на иконата Сервисво форма на запчаник (или комбинација на копчиња Alt+X). Потоа во менито што се отвора, изберете
• Во прозорецот, одете на јазичето дополнително
• Следно, отштиклирајте го полето Прикажи известување за секоја грешка во скриптатаи притиснете го копчето добро.

Ова е список на најчестите причини кои предизвикуваат грешки во скриптата во Internet Explorer, па доколку ви е доста од вакви пораки, обрнете малку внимание и решете го проблемот еднаш засекогаш.

Има, се разбира, и други - дефинитивно ќе ги спомнам.

Firebug за Firefox

Не знам со сигурност дали е FireBugПредок на други алатки за програмери, но дефинитивно е најпопуларен, удобен и функционален во.

Firebug е додаток за Firefox, што значи дека треба да го преземете од веб-локацијата за додатоци на Firefox и да го инсталирате.

За да активирате пожар, само притиснете F12.

Карактеристики на овој додаток:

• Увид и уредување на динамички променлив HTML;
• Уредување CSS при летот;
• Дебагирање JavaScript, командна линија за извршување на скрипти;
• Следење на мрежни барања - можете да ги видите големините и времето на преземање на датотеките и скриптите, заглавијата на барањата;
• DOM парсер.

Можете да зборувате долго за овие можности во детали, но мислам дека сите наши читатели ги знаат, а ако не, деталните информации се на почетната страница на Firebug или истото во преводот на Илја Кантор.

Покрај самиот firebug, можеби ќе ви треба корисен додаток за него - FireCookie, со кој (изненадување:-) можете да гледате и менувате колачиња.

Лента со алатки за WEB програмери за Firefox

Уште еден корисен додаток на Огнелис. Изгледа вака:

Ајде да погледнеме точка по точка.

Оневозможи

Ви овозможува да го исклучите JavaScript, да ја оневозможите употребата на кешот, што е многу корисно за време на развојот (ви овозможува да бидете сигурни дека страницата е вчитана со најновите ажурирања), да ги откажете боите што се користат на страницата и да ги замените со стандардни , оневозможи испраќање во заглавието на упатувачот (страницата од која е направено упатувањето) ).

Колачиња

Корисна опција за работа со колачиња: можете да ги гледате, бришете, одбивате и додавате.

CSS

Ова мени ја складира најкул функцијата на лентата со алатки за програмери - уредување на CSS во лет. Покрај тоа, можно е да се гледа css, оневозможи, и така натаму и така натаму. Според мое мислење, присуството на копчиња за кратенки е многу корисно овде (CTRL+SHIFT+C, на пример, ви овозможува директно да одите на стилови на гледање страници)

Форми

Сè за работа со формулари: прикажување лозинки, прикажување информации за формулари, конвертирање на методи на формулари (GET »POST и обратно) и многу повеќе. Корисна функција е „Пополни ги полињата со формулари“ за автоматско пополнување на полињата со формулари (на пример, при тестирање на страница, кога функцијата за запомнување лозинки е оневозможена. Инаку, не гледам ништо корисно во оваа ставка.

Слики

Постои корисна функција за оневозможување на слики - да видите како изгледа вашата страница без слики. Можете да заокружувате слики, да ги прикажете нивните големини и да прикажете алт атрибути.

Информации

Има многу опции во ова мени. Може да биде корисна функцијата за прикажување на атрибутите на класа и id на страницата. Покрај тоа, интересна е ставката „Прикажи информации за бојата“ - брзо да се добијат информации за боите што се користат на страницата. „Прикажи ја големината на документот“ - погледнете ја големината на страницата. „Прикажи ги заглавијата на одговорот“ - прегледајте ги заглавијата на страниците.

Разно

Најчесто користената функција е чистење на кешот. Дополнително, функциите што се достапни овде се „Владетел на страница“ - линијар, „Лупа на страници“ - лупа и „Водичи за линии“ - неколку линии што можат да бидат корисни за отсекување на шаблон.

Преглед

Истакнување на различни елементи на страницата - табели, наслови, врски, рамки, блокови. Промената на големината ви овозможува да ја промените големината на прозорецот на прелистувачот за да одговара на сите стандардни екстензии на екранот. Функциите на алатките за валидација на страницата се зачувани овде. И локални и надворешни. Практичен и брз пристап до валидација на HTML, CSS и многу повеќе. За да го потврдите HTML, можете да ја користите кратенката на тастатурата CTRL+SHIFT+H.

Погледнете го изворот

Погледнете го изворниот код. Можност за гледање во надворешна апликација, прегледување на генерираниот код.

Најмногу ми се допаѓа онаа во десниот агол. Тоа е брз HTML, CSS валидатор и индикатор за грешка во JavaScript. Ако нема проблеми, иконата е зелена, а ако има проблеми, иконата е црвена.

Лента со алатки за програмери на Internet Explorer

Почнувајќи од 8.0, отстранувањето грешки веќе е вградено во овој прелистувач. Лесно може да се нарече Копче F12. Точно, лоша е како програма од 90-тите.

Но, постои многу поладна алатка за овој прелистувач, таканаречената лента со алатки за програмери на Internet Explorer, која може да се преземе од врската.

Во изгледот, оваа лента со алатки, се разбира, изгледа како огнена бубачка, но, за жал, сè уште не созреала за неа. Иако, од друга страна, има некои способности кои firebug ги нема. Јас би го нарекол Internet Explorer Developer Toolbar еден вид хибрид на Firebug и FireFox WEB програмерЛента со алатки.

Како и во firebug, можно е да се прегледа елемент со едноставен клик. Но, ако во веднаш можеме да видиме баласт и маргини, тука нема таква можност.

Дополнително, лентата со алатки за програмери на Internet Explorer не го ажурира динамично дрвото на елементите како што тоа го прави Firebug. Односно, ако промениме нешто на страницата користејќи js, нема да видиме ништо користејќи ја оваа лента со алатки.

Она во што можете да уживате е менување на CSS во лет (лесен начин да најдете што да хакирате :), можност за оневозможување на CSS и слики, можност за брзо чистење на кешот и играње со колачиња, брз пристап до валидација.

Најдобриот дел: има вграден избирач на бои, кој ви овозможува да добиете која било боја од страницата со помош на пипета. (постои посебен додаток ColorZilla за ff).

Debug DebugBar за Internet Explorer

DebugBar за Internet Explorer може да се преземе од дадената врска.

Интересна екстензија сама по себе. Инсталиран како дополнителен панел на прелистувачот:

Поради некоја причина има вграден пребарувач, капалка за очи, можност за промена на големината на прозорецот и, повторно, поради некоја причина можност за испраќање страница на пријател за сапун. Иако ова може да биде корисно. Но, не успеав да ја искористам оваа можност.

Покрај тоа, постои инспектор:

Програмерите не беа задоволни со методот на проверка со кликнување или покажување: дојдоа до поинтересна работа. Во DebugBar треба да го повлечете вкрстувањето на саканиот елемент за да го видите на дрвото. Нема можност за уредување на CSS. Но, има валидатор и вградена js конзола.

И ако копате во поставките, можете да го најдете ова:

И смешно и тажно.

Познато е дека лентата со алатки за програмери ќе биде вградена во осмиот истражувач. Ќе биде слично на она што е опишано во третиот пасус, но се надеваме дека ќе биде подобро.

Отстранете грешки DragonFly за Opera

DragonFly е вграден во Opera почнувајќи од верзијата 9.5, така што нема потреба да го инсталирате. За да го активирате Dragonfly, одете во Алатки → Напредно → Алатки за програмери. И ако на англиски, тогаш Алатки → Напредно → Алатки за програмери.

Веднаш ќе ве предупредам дека DragonFly е во фазата Алфа2, ова објаснува многу од неговите пропусти.

Список на карактеристики:

• инспектор на ДОМ;
• Проверете со кликнување (повторно, нема да видиме вовлекување како во FireFox);
• Уредување;
• Брз пристап до конзолата за грешки.

DF е нешто како посебна страница во рамка. Ако го отворите, ќе биде отворен за сите јазичиња (за разлика од firebug). Затоа, пред да провериме некој елемент, мораме од списокот да ја избереме страницата што сакаме да ја прикажеме.

За жал, овде, како и во Internet Explorer Dav Toolbar, динамички креираните елементи не се прикажуваат. И воопшто, кога ја прегледуваме страницата, не се активира JavaScript: врските и копчињата не се кликнуваат. Да се ​​надеваме дека ќе ги видиме сите овие карактеристики кога DragonFly ќе се приближи до објавувањето.

Дебагирајте го ВЕБ-инспекторот во Safari

Веднаш ќе кажам дека се работи за прелистувачот СафариЈа пропуштив информацијата, па не одговарам за адекватноста на материјалот, како што велат.

За да ја овозможите ставката „Развој“ во менито Safari, треба да ја овозможите соодветната ставка во поставките (табулаторот „Напредно“):

Во менито „Развој“ ни се достапни следните функции:

Ајде внимателно да го разгледаме ВЕБ-инспекторот:

Стандардно, инспекторот се отвора во режим на HTML преглед. Но, може да се префрли во режим на преглед DOM. За таа цел, на горната плоча има прекинувач. Кога лебдите над некој елемент во инспекторот, тој ќе биде означен на самата страница. Не можете да гледате пополнување, да менувате обележување или CSS во лет, или да гледате динамички промени во DOMe во лет, како што можете во FireBug. Но, мора да признаете, изгледа многу слатко.

Ако сакате да работите со инспекторот во прозорец на прелистувачот, можете да кликнете на копчето во долниот лев агол.

Дури и во Safari, достапна е функција како што е „Мрежна временска линија“ (копчето „Мрежа“ во инспекторот):

Можете јасно да видите кога и колку време е потребно за преземање датотеки. Можете исто така да ги видите заглавијата на барањата, но, за жал, не можете да ја видите самата содржина.

Отстранување грешки за програмери во Google Chrome

Ламе е роден во напредна форма и веднаш има, иако засега криво, но сепак алатки за програмерите.

• Инспектор на ДОМ;
• javascript дебагер;
• JavaScript конзола.

За да проверите кој било елемент, треба да кликнете со десното копче на него и да изберете „Прикажи го кодот на елементот“ во контекстното мени:

Функционалноста е иста како и во Safari: елементите се означени кога лебдат, но CSS и HTML уредувањето не е достапно, а промените во DOM не се следат. Но, копчето во долниот лев агол, кое треба да го прикачи инспекторот на прозорецот на прелистувачот, не работи.

Во табулаторот „Ресурси“ можеме да го видиме следново:

Малку поинаку од скалата во сафари. Проѕирното на овој дијаграм ги прикажува релативните големини на датотеките, а целосната боја го покажува времето на вчитување. Вака или онака, очигледно е дека овој дел од Chrome е далеку од завршен.

Во оваа статија, ги разгледав најпознатите екстензии и вградени прелистувачи.

Има и други, на пример:

• Internet Explorer WEB Development Helper - добар асистент за развивачите на ASP.NET (Internet Explorer);
• WEB Developer Toolbar - лента со алатки за Internet Explorer и FireFox. Постојат неколку корисни карактеристики;
• WEB Accessibility Toolbar - лента со алатки за Internet Explorer. Ништо интересно.

Ако има додатоци што не ги спомнав, но треба, или има функции за споменатите екстензии што ги пропуштив, пишете.

Уживајте во тоа за вашето здравје!

Internet Explorer 11 на Windows 8.1 и Windows 7 доаѓа со целосно редизајниран и подобрен сет на алатки за програмери вградени во прелистувачот за да им помогне на програмерите да градат, да решаваат проблеми и да го оптимизираат искуството на модерните веб-локации и апликации на повеќе уреди. Новите алатки, кои едноставно ги нарекуваме F12 за кратко, им овозможуваат на веб-програмерите да работат брзо и ефикасно.

Тимовите на Visual Studio и Internet Explorer работеа заедно за да создадат алатки F12, кои се изградени на принципот да им помогнат на програмерите брзо да се движат од проблем до решение користејќи значајни податоци. Новиот пакет F12 обезбедува брзо, флексибилно веб-искуство со алатки за дијагностицирање и поправка на проблеми со перформансите, како и алатки кои ќе ви помогнат подобро да разберете како Internet Explorer ги распоредува и прикажува веб-апликациите. Алатките F12 го поддржуваат брзиот, интерактивен работен тек што го користат современите веб-програмери.

Универзален сет на алатки

Новиот комплет F12 им помага на програмерите брзо да се движат од проблем до решение. Некои нови возбудливи карактеристики вклучуваат:

• Алатки за одговор на интерфејсот и профилирање на меморијата кои ќе им помогнат на програмерите да креираат брзи, одговорни веб-апликации.
• Проверка на DOM Explorer и CSS во живо што се ажурираат со страницата за програмерите да можат интерактивно да истражуваат како динамичната содржина влијае на обележувањето и стилизирањето
• Овозможете дебагирање на JavaScript да работи брзо без освежување на страницата, за програмерите да можат побрзо да започнат

Додека ги користите алатките F12, ќе забележите многу други подобрувања кои ќе ви помогнат да постигнете брз, интерактивен работен тек:

• Брзо пристапете до овие алатки со десен клик на ставка од менито користејќи ја ставката „проверете“
• Ефективна интеракција со тастатурата
• Широка можност за копирање елементи и компоненти од алатки, за да може да се залепат во кој било уредник без дополнително форматирање

Најважно е што овие алатки сега ги прикажуваат најцелосните и најточните информации - од @media и!важните правила во DOM Explorer до елементарната структура на трошоците во UI Response Profiler. Овие алатки обезбедуваат и директно релевантни податоци; на пример, меморискиот профил ги идентификува DOM јазлите кои се „во живо“, но не се референцирани од дрвото за означување или рендерирање.

Новиот пакет F12 ги проширува можностите на Visual Studio за да им обезбеди на програмерите доследно, беспрекорно искуство во сите наши алатки и рамки за веб развој.

Ајде сега набрзина да ги погледнеме овие алатки во акција.

Профилирање на апликации со анализатор на одговор на интерфејсот

UI Response Analyzer ви помага да разберете каде точно се троши времето на процесорот за да може вашата апликација да го достигне својот целосен потенцијал за перформанси. Оваа алатка ви дава суштински увид во внатрешната работа на Internet Explorer, обезбедувајќи визуелизација на HTML, CSS и JavaScript код за време на извршување, како и важни поврзани ефекти како што се означување и собирање ѓубре. На прв поглед, можете да видите колку точно вашата апликација реагира и прикажува. Ова ќе ви овозможи да идентификувате одредени извори тесни грлаи земете позначаен пристап кон неговата оптимизација.

Профилирање на веб-страница

Анализирајте ја употребата на меморијата на апликацијата со Memory Profiler

Овој мемориски анализатор ќе ви помогне да избегнете протекување на меморијата или прекумерна потрошувачка на меморија. Креирање на веб-апликации кои работат за клиенти деноноќно, или сложени интерактивни апликациичесто значи дека нивниот дизајнер мора да посвети посебно внимание на проблемите со користењето на меморијата.

Иако JavaScript е опкружување собрано ѓубре, апликациите обично трошат повеќе меморија едноставно затоа што референците на објектот не биле (и не можат да бидат) распоредени. Меморискиот анализатор може да ви помогне да ги идентификувате овие проблеми со обезбедување информации за секој објект на страницата, без разлика дали тоа е објект JavaScript или објект DOM. Со оваа информација можете, на пример, да видите колку меморија држи некој елемент и кои предмети го поддржуваат неговото зачувување. Но, што е најважно, можете да споредите две снимки и да видите што се променило. Ова ќе ви овозможи да разберете зошто вашата апликација користи повеќе меморија и да ја поправите.

Снимка од меморијата на купот што прикажува оневозможени DOM елементи

Брзо разберете ги проблемите со перформансите на апликацијата со контролната табла за перформанси

За да ви помогне брзо да ги идентификувате проблемите кои влијаат на перформансите на вашата страница, Internet Explorer 11 вклучува графичка контрола на страницата наречена Контролна табла за перформанси, до која може да се пристапи со помош на Ctrl+Shift+U или ставката од менито Алатки (Alt+T). Овој панел динамично прикажува статистика во Internet Explorer за клучните показатели за перформансите, како што се времето на прикажување, меморијата, рамки во секунда (fps) и користењето на процесорот. Контролната табла за перформанси не бара употреба на алатки F12 и може да се користи и во современи прелистувачи.

Со контролната табла за изведба, можете брзо да ги идентификувате интеракциите на страниците што предизвикуваат пелтечење на стапката на слики или висока употреба на процесорот. Потоа можете да се префрлите на алатките F12 за да го репродуцирате проблемот и да пронајдете решение за него.

Проверка на елементите и менување на ознаките и стиловите со помош на DOM Explorer

DOM Explorer го олеснува интерактивно конфигурирање на @media пребарувања и CSS правилаи нивните својства. Затоа кориснички интерфејсвашата апликација станува високо ефикасно, одговорно искуство со повеќе уреди. Можете брзо да започнете со веб-страница со десен клик и проверка на елементот што го сакате, што ги активира алатките F12 заедно со тој елемент избран во DOM Explorer, динамично прикажувајќи ги применетите правила на DOM и CSS. Презентираните табели DOM и CSS се динамични, што ви овозможуваат да разберете како Internet Explorer ги толкува вашите правила за обележување, стил и CSS. Како што комуницирате со страницата или ја менувате користејќи DOM Explorer, промените што ги правите ќе се одразат веднаш.

Проверка на обележување и стилови

Кога правите промени на табела CSS, DOM Explorer го олеснува добивањето на точната вредност на имотот или својствата користејќи IntelliSense. Можете лесно да видите кои својства се погрешни или непризнаени, а потоа да го копирате правилото за повторно да го примените на вашиот извор.

Дебагирање на JavaScript со помош на дебагер и конзола

Новиот JavaScript дебагер ви дава алатки за лоцирање и брзо поправање на скршениот код. Дебагерот на JavaScript може да отвори и прегледува повеќе датотеки, дури и ако вашата библиотека со скрипти е минимизирана, да поставува точки на прекин и траги, да ги проверува објектите на JavaScript, вредностите, синџирите на опсегот и да ја прегледува содржината на оџакот. Кога ќе ги стартувате алатките F12, веднаш ќе се стартува и JavaScript дебагерот, за да можете веднаш да започнете

При дебагирање, веројатно ќе сакате да имате некаква интеракција со вашата веб-страница. Конзолата е клучната алатка за да се постигне оваа задача. Можете да пристапите до конзолата во секое време, што го прави ефикасно користењето на оваа интерактивна средина со IntelliSense и визуелизатори на објекти. Конзолата, исто така, обезбедува широк опсег на специјализирани API-а, овозможувајќи ви да евидентирате излез, да го анализирате времето поминато во одреден код и да обезбедите прикажувачи на објекти кога треба да извршите длабинска проверка на објектите на JavaScript.

Сумирање

Овој блог пост едноставно дава скица на новите елементи во алатките F12. Можеш да најдеш целосна листанов функционалност, достапно за програмерите во Internet Explorer 11 во написот „Што има ново во алатките F12“ и во „Internet Explorer 11 Preview Developer Guide“. Можете исто така да дознаете повеќе во демото за тестирање на Internet Explorer, „F12 Adventure“.

Со нетрпение ги очекуваме вашите повратни информации и со нетрпение очекуваме долга врска со заедницата на програмери. Споделете ги вашите предлози преку алатката за повратни информации и предлози на Internet Explorer 11 или на страницата Connect.

Пи Џеј Хоф
, потпретседател, Visual Studio