ДевТоолс Сховдовн Едге Ф12 вс Фирефок вс Цхроме

Девелопер Тоолс оф Мицрософт Едге, нови подразумевани претраживач за Виндовс 10, добио је модеран дизајн и неколико нових функција у поређењу са његовим претходником..

Питање да ли су алатке за развој Мицрософт Едге-а прилагођене њиховим популарним конкурентима - дев алатима у другим модерним претраживачима као што су Мозилла Фирефок и Гоогле Цхроме - природно се јављају у главама многих програмера.

У овом посту покушавамо да одговоримо на ово питање и утврдимо да ли је Едгеов Ф12 Дев Тоолс заиста вредан употребе. Ми ћемо упоредити његове карактеристике са онима у Фирефоковим Девелопер Тоолс и Гоогле Цхроме ДевТоолс.

Отворите Дев Тоолс

Притиском на Ф12 отварају се алати за развој у сва три случаја: развојни алати у Фирефоку, ДевТоолс у Цхромеу и Ф12 Дев Тоолс у Мицрософт Едге-у. Ово је пречица на тастатури где се налази званично име Едге'с Ф12 Дев Тоолс долази из.

Када отворите Едге-ове Дев алате можете одмах искусити један од његових најпознатијих недостатака: тренутно је немогуће је закачити алате на постојећи прозор. Иако можете пратити шта се дешава на екрану алата за развојне програмере за Фирефок и Цхроме ДевТоолс тако што ћете прозор алатки за уређаје прикачити на дно екрана, ви (тренутно) не можете да урадите исто са Едге.

Мицрософтови програмери тврде да ће поправити овај проблем у будућем ажурирању.

Прегледајте ДОМ

Тхе ДОМ Екплорер тоол (Пречица: ЦТРЛ + 1) је прва картица програма Мицрософт Едге Ф12 Дев Тоолс. Њен распоред и укупни дизајн су прилично слични Елемент на картици Цхроме и Инспекторе у Фирефоку, међутим, могућности се разликују.

У Едге-у можете погледати рендеровани ХТМЛ документ, повезане ЦСС стилове и руковатеље догађајима који су регистровани на сваком елементу. Такође можете пронаћи малу графику о ЦСС бок моделу са израчунатим вредностима, које су већ познате из два конкурентска претраживача..

Можете експеримент с ЦСС правилима тако што ћете обрисати тренутне и додати нове, и моћи ћете да видите свој резимиране промјене на засебној подкартици “Промене” (налази се са леве стране). Ово је функција која није уграђена у Фирефок Девелопер нити у Цхроме ДевТоолс. Кориснику се може дати брз резиме, тако да је то заиста корисна опција.

Постоје неке функције у Фирефок Девелопер Тоолс које ни Едге, нити Гоогле Цхроме тренутно не нуде, али могу значајно помоћи животу дизајнера: Алат за анализу фонта и анимације.

У Едге-у постоји цоол цолор пицкер иако то може донекле да компензује корисника.

Интеракција са ЈаваСцрипт-ом

Тхе Конзола Картица (Пречица: ЦТРЛ + 2) у програму Мицрософт Едге омогућава интеракцију са ЈаваСцрипт-ом вашег сајта, као у Фирефок и Цхроме Дев Тоолс. Сва три омогућују да пратите ЈаваСцрипт грешке у реалном времену и можете их анализирати уносом властитог уноса.

Алат за конзоле Едге-ових Ф12 Дев алата има леп функција аутоматског довршавања то вам помаже са командама, како год да се чини мање знања у односу на ону у Фирефок и Цхроме Дев Тоолс.

Ивица раздваја грешке, упозорења и поруке што је велика помоћ, али не нешто што друга два алата немају.

Изгледа да је Фирефокова конзола најпрофесионалнија од три дев алата, као што је то такође случај одвојено показује друге врсте проблема: мрежне, ЦСС, сигурносне грешке и логовање порука, и омогућава вам интеракцију са њима преко Интерфејс конзоле, не само са ЈаваСцрипт грешкама.

Схватите шта ваш код ради

Тхе Дебуггер алат (пречица: ЦТРЛ + 3) помаже вам да разумете шта се дешава са вашим кодом док проналазите потенцијалне грешке. Можете подесити сатове и тачке прекида, као и прегледати скупове позива.

Окно Сатови приказује вредности променљивих, режим позива позива приказује ланац позива функција који су довели до тренутног стања, а режим тачака прекида приказује листу тачака прекида које сте поставили.

Едге Ф12 Дев Тоолс вам омогућава паузирајте код у сред извршења, и прођите кроз њега ред по ред. Такође имате опцију да побољшати читљивост компилираног или умањеног ЈаваСцрипт датотеке, и можете дебуг разних ресурса (ЈаваСцрипт, екстензије, итд.) Један по један.

Фирефок и Цхроме ДевТоолс пружају све ове функционалности, тако да Едге не нуди изванредно искуство уклањања грешака, али пружа кориснику солидан и поуздан алат који је у складу са својим конкурентима.

Погледајте поглед на комуникацију између сервера и претраживача

Тхе Мрежа алат (пречица: ЦТРЛ + 4) је у потпуности редизајниран за Мицрософт Едге од Интернет Екплорера 11. Уз помоћ овог практичног алата можете пратите комуникацију између сервера и претраживача, и прегледати појединачне захтјеве.

Можете филтрирајте резултате према врсти садржаја као што су стилови, слике, медији, фонтови, КСХР и многи други. Можете такође дебуг АЈАКС уз помоћ мрежног алата.

Едге и Фирефок мрежна картица нуде прилично сличне могућности и кориснички интерфејс. Оба имају корисно окно за помоћну траку које вам омогућава да погледате ХТТП заглавље изабраног ресурса, ХТТП тело, параметре, повезане колачиће и временске ставке по ставку.

Цхроме ДевТоолс 'мрежна картица нема овакво окно, али ако кликнете на захтјеве један по један, можете видјети исте информације. То је мање интуитивно рјешење.

Трацк Довн Слов Пагес

Тхе Перформансе Картица (Пречица: ЦТРЛ + 5) помаже вам да разумете разлоге који стоје иза споре веб странице. Са алатком за перформансе, Мицрософт је направио огроман корак напред комбинацијом претходног УИ Респонсивенесс и Профилер алате за креирање потпуног приказа свих ваших скрипти и визуализацију перформанси.

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

Током процеса тестирања открили смо да нам је алат за перформансе у Едгеу пружио више информација о проблемима брзине него Фирефок Девелопер или Цхроме ДевТоолс. Кориснички интерфејс картице за перформансе у Едге-у је прилично добро дизајниран, што нам помаже са многим визуелним знаковима, и релативно је једноставан за употребу. Ако желите да сазнате више о томе како да га користите, прочитајте детаљне документе.

Диагносе Мемори Иссуес

Тхе Меморија алат (Пречица: ЦТРЛ + 6) омогућава пронађите цурење меморије који такође може успорити вашу веб страницу, штовише може утиче на стабилност вашег сајта.

Уз помоћ лијепог графикона можете лако разумјети гдје ваше меморије расте, а можете направити снимке у одређеним точкама које омогућују анализу кориштења меморије. Можете такође упоредите два снимка направљена у различитим тачкама животног циклуса странице да бисте разумели разлику између њих.

Цхроме ДевТоолс такође има леп профилер у оквиру Профили, док Фирефок Девелопер не обезбеђује ову функцију по подразумеваној вредности, али можете да преузмете и инсталирате овакве додатке ако желите. Профилер меморије за Цхроме ДевТоолс је прилично напредан и нуди више могућности од Едге-а, на пример то вам омогућава снимите доделе ЈаваСцрипт објеката током времена који вам могу помоћи да изолујете цурење меморије.

Тестирајте Ваш сајт на различитим величинама екрана

Тхе Емулатион тоол (Схортцут: ЦТРЛ + 7) вам омогућава да тестирате ваш сајт под различитим околностима. Можете изабрати између два профила претраживача, Десктоп и Виндовс 10 Мобиле, као и од различитих корисничких агената, укључујући све десктоп и мобилне верзије Интернет Екплорера, назад на ИЕ6, уз многе конкуренте програма Едге, Цхроме, Фирефок, Сафари, итд..

Занимљиво је да имате опцију да узмете погледајте своју страницу као Бинг Бот. Можете такође емулирати ГПС, и сет различите резолуције и оријентације.

Алати за развојне програмере за Фирефок немају алатку за емулацију уређаја, али Цхроме ДевТоолс има тако софистициран емулатор који Едге-ови тешко могу да се надмећу са њим.

На пример, Цхроме емулацијски екран има тачна мрежа у коју је уметнут емулирани приказ, а не само да можете да бирате из профила претраживача и корисничких агената, већ и из многих уређаја као што је различите верзије иПхоне или Самсунг Галаки и многи други. Емулатор Цхроме ДевТоолс-а такође има практичан приступ Опција зумирања и можете тестирати свој сајт на различитим мрежама као што су 3Г, 4Г, ДСЛ, ВиФи, итд.

Сажетак

Све у свему, Мицрософт Едге Ф12 Дев Тоолс изгледа изненађујуће добро. Он нуди карактеристике сличне популарним алатима за веб развој других модерних претраживача. Постоје две области где је Едгеов Ф12 Дев Алат прилично јак: кориснички интерфејс то је стварно интуитиван, усер-фриендли, и добро дизајниран, анд тхе алатке за дијагностику перформанси.

За ове две карактеристике може бити вредно размотрити пребацивање на, или барем тестирање Едге. Највећи недостатак је недостатак могућности да се алати за развој прикваче на дно екрана, али надајмо се да ће Мицрософт брзо решити овај проблем..