Як адладзіць вэб-прыкладанні з Firefox

  1. Ўручэнне CSS: Панэль інструментаў для вэб-распрацоўнікаў
  2. Захаванне Javascript ў радку: Firebug
  3. Акуніцеся ў дэталях: Live HTTP Headers
  4. Адладка IE: згубленая кіраўнік
  5. Працягвайце атрымліваць лепш
  6. Іншыя паведамленні ў гэтай серыі

Адладка - адна з самых хваравітых частак распрацоўкі вэб-прыкладанняў. Вы павінны мець справу з неадпаведнасцямі браўзэра з HTML, CSS і JavaScript, не кажучы ўжо пра цяжкасць адладкі JavaScript.

Вось шэраг пашырэнняў Firefox, якія я выкарыстоўваю для кіравання гэтым вар'яцтвам.

Ўручэнне CSS: Панэль інструментаў для вэб-распрацоўнікаў

Усталюйце панэль інструментаў вэб-распрацоўнікаў , Проста зрабі гэта ,

Адладка CSS можа быць вельмі непрыемнай. Панэль інструментаў распрацоўшчыка дазваляе правяраць і рэдагаваць (у рэжыме рэальнага часу) HTML і CSS вашай старонкі, так што вы можаце ўбачыць, што адбываецца, калі рэчы не выстройваюцца. Гэта можа зрабіць значна больш, але вось што я выкарыстоўваю для гэтага:

Ctrl + Shift + F : Адлюстраванне інфармацыі элемента. Гэта ставіць чырвоную скрынку пад мыш. Навядзіце курсор мышы на элемент, і яго атрыбуты з'явяцца ва ўсплывальным выглядзе: імя, клас, памеры пікселяў, шрыфты, усё. Вось што вы можаце зрабіць:

  • Высветліце, якія класы ствараюць стылі, якія вы бачыце
  • Лёгка атрымаць ідэнтыфікатар Div для выкарыстання з Firebug (ніжэй)
  • Высветліце, наколькі вялікая выява (вышыня і шырыня пікселяў)

Высветліце, якія класы ствараюць стылі, якія вы бачыце   Лёгка атрымаць ідэнтыфікатар Div для выкарыстання з Firebug (ніжэй)   Высветліце, наколькі вялікая выява (вышыня і шырыня пікселяў)

Ctrl + Shift + E : Рэдагаваць CSS. Гэта адкрывае ўкладку бакавой панэлі з бягучымі табліцамі стыляў. Вы можаце рэдагаваць любыя атрыбуты і ўбачыць эфект у рэжыме рэальнага часу (напрыклад, даючы Google чорны фон):

Вы можаце рэдагаваць любыя атрыбуты і ўбачыць эфект у рэжыме рэальнага часу (напрыклад, даючы Google чорны фон):

Мой любімы стыль CSS - гэта мяжа: 1px цвёрды чырвоны колер;

Я рабіў наступныя сотні разоў падчас вэб-распрацоўкі:

  • Знайдзіце div з дапамогай мышы (ctrl + shift + f)
  • Атрымаць яго ідэнтыфікатар
  • Рэдагаваць CSS (ctrl + shift + e)
  • Пакладзіце мяжу на div: #mydiv {border: 1px solid red;}
  • Гуляйце з шырынёй, вышынёй, палямі і абіўкамі, пакуль ён не выстройваецца
  • Зніміце мяжу

Але замест таго, каб выдаліць мяжу, паставіць "x" перад: "xborder: 1px solid red". CSS не будзе сапраўдным, таму што мяжа ігнаруецца, але захоўвае стыль у выпадку, калі вы хочаце ўключыць яго пазней.

Абярыце ўвесь тэкст у адрэдагаваным CSS-файле і ўстаўце яго ў сапраўдны файл CSS. Бэм, вашы змены зараз жывыя. Стварыць файл у DreamWeaver і праглядаць яго ў Firefox практычна наадварот. Вы праглядаеце жывы файл у Firefox, уносіць змены і капіруе іх у тэкставы рэдактар. Я знайшоў гэта вельмі эфектыўным для рэдагавання CSS, вы пазбягаеце пастаяннага пераключэння наперад, таму што Firefox зараз мае рэдактар ​​CSS.

Бонус : ColorZilla Выбірае Колеры

ColorZilla дае вам кропельнік, які можа знайсці шасціграннае значэнне RGB (# 123456) што-небудзь на старонцы. Гэта выдатна пры распрацоўцы, і вы хочаце, каб колер шрыфта адпавядаў колеру на старонцы. Гэта нашмат хутчэй, чым зрабіць скрыншот і адкрыць яго ў Photoshop.

Захаванне Javascript ў радку: Firebug

Firebug, як я кахаю цябе (або атрымаць Закладка для іншых браўзэраў). Калі вы любіце сябе, вы ўсталюеце яго неадкладна і зэканоміць незлічоныя гадзіны расчараванняў.

Firebug можа адладзіць JavaScript, вывучыць DOM і многае іншае (вы можаце і павінны прачытаць усё пра яго). Вось як я выкарыстоўваю:

F12: Адкрыйце Firebug. Магчыма, вам прыйдзецца ўключыць яго для старонкі.

Ўкладка "Кансоль": Запішыце хуткія каманды JavaScript - ён нават мае аўтазапаўненне імёнаў і ўласцівасцяў. Прагуляйцеся сваімі функцыямі, змяніце атрыбуты CSS, дадавайце элементы на старонку - усё, што трэба для праверкі.

Ўкладка сцэнарыя (Адладка): Лепш. Асаблівасць. Калі-небудзь. Націсніце на нумар лініі, каб усталяваць кропку супыну (чырвоную кропку) у вашым JavaScript. Перазагрузіце старонку, і яна зламаецца (прыпыняецца), калі сустрэнецца з радком.

На дадзены момант вы можаце пераключыцца на кансоль, каб вывучыць і змяняць зменныя, і высветліць, што адбываецца, калі ваш код не будзе працаваць. Затым вы можаце націснуць на сінюю кнопку «гуляць» і працягваць запуск прыкладання да наступнай кропкі супыну.

Net Tab: Знайдзіце спампаваць прадукцыйнасць вашай старонкі ,

Кнопка "Профіль" (на ўкладцы "Кансоль"): Знайсці прадукцыйнасць вашай старонкі. Націсніце кнопку "Профіль", каб пачаць зняць інфармацыю, зрабіць некаторыя каманды, а затым націсніце кнопку "Стоп". Вы атрымаеце справаздачу пра тое, дзе ваш код праводзіць свой час. Калі вы павінны аптымізаваць, спачатку аптымізуйце звычайны выпадак.

Калі вы больш візуальны чалавек, паспрабуйце гэты дзіўны калаж:

Не задаволены? Праверце прыклады на галоўнай старонцы ,

Акуніцеся ў дэталях: Live HTTP Headers

Часам вам трэба пагрузіцца ў шчупак. Якія загалоўкі кэша адпраўляе назад мой сайт? Мае старонкі сапраўды закадаваныя ў gzip?

Я ведаю, што гэтыя пытанні трымаюць вас у начны час, так што вы можаце зрабіць:

  1. Усталюйце Live HTTP загалоўкі
  2. Адкрыйце яго (Інструменты> Загаловак HTTP Live)
  3. Наведайце старонку / абнавіць прэс
  4. Радуйся

Усталюйце Live HTTP загалоўкі   Адкрыйце яго (Інструменты> Загаловак HTTP Live)   Наведайце старонку / абнавіць прэс   Радуйся

Калі вы наведваеце старонку, вы ўбачыце прапускныя загалоўкі HTTP, калі ваш браўзэр запытвае элементы. Калі элементы кэшуюцца, браўзэр не можа запытваць іх наогул (дзіўна!) Альбо можа запытаць элемент і атрымаць адказ "Не зменены" 304 (крыху менш дзіўны, вам усё роўна прыйшлося праверыць з серверам). Я напісаў больш пра паводзіны кэша , і Live HTTP Headers - гэта выдатны спосаб даведацца пра HTTP-кэш (пра што павінна быць зацікаўлена кожная вэб-прылада).

Яшчэ лепш, вы можаце "прайграць" любы загаловак, рэдагаваць адпраўленыя дадзеныя. Гэта карысна пры тэставанні або адладцы кэша ці gzip кадоўка паводзіны.

Адладка IE: згубленая кіраўнік

Argh, на жаль, IE не хапае гэтых цудоўных інструментаў. Гэта адладчык сцэнарыя , але гэта не мае свечкі для Firebug. На самай справе, я часта проста звяртаюся да папярэджанняў, якія прымушаюць вас дрыжаць пасля таго, як Firebug сапсаваны.

Яшчэ адзін балючы метад, які я выкарыстоўваю, заключаецца ў наступным:

У вашым HTML: <div id = "log"> </div> У вашым Javascript: log log (str) {var log = document.getElementById ("log") if (log) {// давайце бяспечна ... log.innerHTML + = str + "<br/>"; }} Выкарыстанне: log ("Прывітанне!"); Дадаткова: стварыце поле eval: <input name = "eval" id = "eval" /> <a href = "javascript: void (0);" onClick = "log (eval (document.getElementById ('eval'). value));"> перайсці </a>

Гэта нічога фантазіі, проста простая функцыя рэгістрацыі, якая дадае тэкст у Div. Так, гэта жорстка, але гэта лепш, чым выказванні папярэджання (), асабліва калі ў вас ёсць завеса (калі вам не падабаецца паўтарэнне траўмаў ад стрэсу ці вы не жадаеце, каб вы баіцеся дыялогавага акна). Калі хто-небудзь ведае добры спосаб адладкі JavaScript у IE, я хацеў бы ведаць. Інструменты, якія я спрабаваў, былі вельмі нязграбнымі і непарыўнымі, выводзячы вас з браўзэра.

Я спрабую зрабіць 95% маёй распрацоўкі ў Firefox і адладжваць праблемы, звязаныя з IE (напрыклад памылковае паводзіны субстра ) выкарыстоўваючы гэты метад.

Працягвайце атрымліваць лепш

Панэль інструментаў распрацоўнікаў і Firebug могуць зрабіць нашмат больш, чым я апісаў тут. Як правіла 80/20, гэта каманды, якія я выкарыстоўваю найбольш часта, якія даюць мне найлепшы ўдар. Вывучыце гэтыя інструменты, спатрэбіцца некалькі хвілін, і вы зэканоміць гадзіны . І вось яшчэ некалькі інструментаў для вэб-распрацоўкі ,

Гэтыя інструменты могуць не зэканоміць ад нервовага дрыготку ад аднаго стварэння вэб-прыкладанняў, і гэта нармальна. Яны пазбавяць вас ад атрымання гэтага дрыжэння ў абодвух.

Іншыя паведамленні ў гэтай серыі

  1. Як аптымізаваць ваш сайт з HTTP кэшавання
  2. Як аптымізаваць ваш сайт з дапамогай сціску GZIP
  3. Як адладзіць вэб-прыкладанні з Firefox
  4. Паскорыць час загрузкі Javascript
  5. Паскорыце Javascript, частка 2: загружаныя прыклады!

Якія загалоўкі кэша адпраўляе назад мой сайт?
Мае старонкі сапраўды закадаваныя ў gzip?