код отстраняване на грешки с подпалвач

Отстраняване на грешки е процес на намиране на грешки в кода и коригиране нежелано поведение на елементите в браузъра. Като правило, отклонението от оригиналния дизайн оформление се наблюдава по време на оформлението, но това се случва и на няколко ситуации, в които трябва да бъдат поправени грешките вече на вашия сайт. Например, грешката може да бъде открит след добавянето на нов тест съдържание на сайта блок в различни браузъри, с различни резолюции на монитора и други условия. Също така, разработчикът трябва да е в състояние да разберат бързо код на някой друг, за да следите за определяне на причината за грешката и да го поправя. Разбирането на логиката на кода на някой друг се изисква, когато се работи в екип, или когато се завръщат в своята работа след известно време, когато тя вече се възприема като непознат.







На насипни сайтове с десетки хиляди реда HTML код, за да се изолират проблемните области е трудно, така че имате нужда от инструмент, като уеб разработчици и подпалвач, който ви позволява да се покаже HTML и CSS на избраните фрагменти и да провеждат експерименти върху него.

  • Apple Safari - Уеб инспектор.
  • Opera - Dragonfly.
  • Internet Explorer - Developer Tools.
  • Google Chrome - Developer Tools.

възможности Firebug

Особености достатъчно големи и обхващат няколко етапа на уеб развитие, по-специално, не само vorstku страници, но също така и програмиране. Тази тема, с оглед на друга тема на книгата, няма да бъдат взети под внимание.

източник

HTML Quick Edit

С Firebug, можете да направите промени директно в кода на документ и да видим резултата от тяхното мнение веднага. Можете да изтриете, добавите, редактирате тагове атрибути, като кликнете върху тях.

Инспекция на CSS код

За всеки избран елемент показва стила му, индивидуални качества, в същото време могат да бъдат изключени, да добавяте нови свойства, промяна на съществуващите стойности. Ефекти от промените в браузъра на секундата.

Търсене за всеки елемент с помощта на мишката

С функцията "Анализ на елемент" можете да изберете кой да е текст, изображение или обект, на страницата, просто като кликнете върху него. Това отваря HTML-кода на избрания елемент и неговия стил.

Монтаж и предизвикателство

и кликнете върху "Добави към Firefox» (фиг. 7.34).

Каква е Firebug

Фиг. 7.34. Добавяне на разширения

След това предупреждение прозорец ще се появи (фиг. 7.35), където трябва да кликнете "Install".

Каква е Firebug

Фиг. 7.35. Инсталиране на софтуера

Call Firebug идва по няколко начина:

  • Инструменти за меню> Firebug;
  • чрез горещ клавиш F12;
  • кликнете върху бръмбар картина в десния ъгъл на браузъра Firefox (Фигура 7.36.); Изображение налична само когато лентата на състоянието (View> Status Bar).

Фиг. 7.36. икона Firebug

Firebug отваря в долната част на прозореца на браузъра, и се състои от две основни панели и менюта. В левия панел показва HTML по подразбиране, така и в правилния стил на избрания елемент (фиг. 7.37).







Каква е Firebug

Фиг. 7.37. Firebug интерфейс

HTML кода който виждате в йерархична структура, ако елементът има дъщерни елементи до нея знак плюс се извежда. На плюс, и можете да кликнете, за да разкрие съдържанието на контейнера, както и това руло, като кликнете отново. Когато изберете даден елемент в десния панел показва стила му (фиг. 7.38). Всеки елемент може да бъде избран не само в HTML, но също така и директно на страницата с инструмент или чрез опцията в менюто Анализирайте (Ctrl + Shift + C).

Каква е Firebug

Фиг. 7.38. Стилът на избрания елемент

Списъкът показва селектори, които са от значение за избрания елемент, името на CSS-файл и на линията, в която са описани селектори. Ако някоя линия е зачеркната, това означава, че върху него, правилата на каскаден и селектор специфичност е по-ниска от тази на селектора по-горе. Фигурата показва, че селектора .front .info по-висока специфичност от .info за избор. така свойствата на фона и шрифта, размера не се прилагат. Забележка показва също стила не пасва на стила в CSS-файл, така че можете да откриете ценности като прозрачност. не се въвеждат в стила.

Всеки имот е лесно се изключва и включва отново, като кликнете върху празното поле в предната част на имота. Увреждания свойства са оцветени в сиво, с тях, червен кръг отбеляза-чрез, както е показано на фиг. 7.38. Освен да деактивирате свойства могат да бъдат променени. Това е достатъчно, за да кликнете върху имота и тя ще бъде редактирана (фиг. 7.39).

Фиг. 7.39. Промяна на свойства стил

Подобен ефект се получава и стойностите само в този случай вече изисква да кликне върху нея (фиг. 7.40).

Фиг. 7.40. Промяна на стойностите

Добавянето на нов имот, както и да редактирате съществуващи осъществява чрез контекстното меню (фиг. 7.41).

Каква е Firebug

Фиг. 7.41. контекстното меню

Редактиране на стила на елемент

За един елемент, за да зададете стил инлайн (тя е включена чрез атрибута стил).

нов имот

Добавяне на нов имот стил и неговата стойност.

Анализирайте раздел в CSS

Направо в раздела CSS.

Раздела Анализиране в DOM

Към раздела DOM.

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

компилиран стил

За всеки елемент от браузъра на документа автоматично генерира свой собствен стил, на базата на вътрешните стойности на браузъра и стила на елементи майки. В раздела "компилиран стил" е показано на фиг. 7.42 показва свойствата и техните стойности, които не са изрично определени от стилове.

Каква е Firebug

Фиг. 7.42. компилиран стил

Например, шрифт семейство стойност се наследява от тялото на селектор. размер на шрифта е посочено в ги преведе шрифт семейство в пикселите, стойността на браузъра шрифт тегло по подразбиране 400.

Съставител стил не може да се променя, и това е намалената ставка единствено за информация.

В този раздел, за избран елемент, показан му блок модел, включително и ширината и височината на елемента, стойността на маржа, граница, тапицерия, както и позициониране (фиг. 7.43).

Каква е Firebug

Фиг. 7.43. Блок модел елемент

Позиция показва класиране тип елемент компенсира от горния десен, дъното и левия край, Z - стойността на Z-индекс. По този начин, стилът ще бъде до тази подвеждаща картина.

Всеки брой на оформлението може директно да се променя чрез кликване върху тях (фиг. 7.44). След въвеждане на нова стойност на елемент от стила автоматично се добавя към въведения номер, а в раздела Стил, селектор oboznacheyutsya как element.style. За да го приложи същата процедура, както при всички други селектори.

Каква е Firebug

Фиг. 7.44. стойности за редактиране в оформлението