Který prohlížeč má nejlepší DevTools?

Celý článek

Vcelku pomalá válka

S ohněm na brouky

Pojďme se na chvíli vrátit v čase. Před 15 lety bylo ladění chyb na webu mnohem náročnější. Svět byl rozdělenější. Profíci se koukli a viděli… A všichni ostatní byli odsouzeni na metody pokus a omyl.

Ladění JavaScriptu na již běžící stránce probíhalo obskurními metodami. Pokud nepomohl JSLint při psaní kódu, měli jste velké trable. Chyby se třeba hledaly tak, že bylo nutné odhadnout, kde kód ještě funguje a kde už vyhazuje chybu. A tak se do částí kódu vkládaly metody alert("Ahoj, pokud mě vidíš, chybu jsi ještě nenašel. Haha!"). No a pokud se hláška nezobrazila, věděli jste, že v místě, kam jste ji umístili, se kód už nespustí a kde pátrat dále. Děsivá doba kamenná.

Pak v roce 2006 přišlo rozšíření do Firefoxu s originálním názvem Firebug. Objevil se spasitel. Konečně šlo zkoumat JavaScript a CSS „naživo“ na běžící stránce a jaký to byl obrovský skok kupředu!

Poznámka redakce: Nástroje pro ladění existovaly sice dávno před Firebugem (např. DOM Inspector v Mozilla Suite, JavaScript console a Debugger v Netscape, napojení Internet Exploreru na Visual Studio), nebyly ale zdaleka tak rozšířené a použitelné jako dnešní nástroje. Pro ladění neexistovala ani jednotná rozhraní (např. console.log). Vývojáři tehdy používali často svá řešení, jako zmíněný alert nebo logování zpráv do popup okna. S příchodem Firebugu se situace změnila. Ukázalo se, že nástroje pro ladění webu mohou být opravdu užitečné a příjemné k používání.

Firebug byl nástroj, který změnil paradigma vývoje webových stránek. JavaScript díky němu dostal šanci uzrát do dnešní dospělejší formy. Jenže změny byly pomalé. Po roce fungování Firebug otevřel své zdrojové kódy, za což mu patří neskonalé díky, bez něj bychom nejspíše nebyli tam, kde jsme. Jako první následovalo Safari a pak i ostatní prohlížeče začaly pomaloučku implementovat své verze DevTools. A chvíli trvalo, než se mu kvalitou vyrovnaly.

Kvízová otázka pro profíky a pozorné čtenáře

Proč bylo v raných dobách nutné výpis do konzole psát třeba takto?

window.log = function ( string ) {
  if ( typeof console == 'object' ) { console.log ( string ); }
}

Víte proč? Odpověď napište do komentářů.

Vývoj byl děsivě lenivý

Pro ukázku perspektivy – ještě v roce 2013, tedy 7 let po vzniku Firebugu, vypadaly DevTools ostatních prohlížečů takto:

Pěkná hrůza, že? A tady v porovnání Firefox (FireBug):

Pálíme brouky nalehko

A možná by takhle chudě DevTools vypadaly dodnes, kdyby Firebug nevytvořil Firebug Lite. Vcelku geniální řešení, jak vývojářské nástroje „simulovat“. Reálně to vypadalo tak, že jste si do svého prohlížeče přidali záložku, která nebyla úplně záložkou, ale důmyslným JavaScriptem (bookmarkletem), který do spodní části libovolné stránky vytvořil za pomocí CSS a JS vývojářské prostředí.

Ano, jak správně čekáte, mělo to spoustu much. Třeba když byl na stránce zacyklený JavaScript, který zablokoval stránku, odstřelil tím i DevTools. To už se vám dneska nestane. Dnes zablokujete pouze stránku. Klidně si to zkuste a napište do konzole tohle: while(true) {}.

Modrý anebo světle šedý chróm?

Vývoj málokdy probíhá sériově. Křivdil bych Chrome, kdybych opominul jeho profilování. FireBug měl také své vlastní profilovací nástroje, ale prohlížeče založené na WebKitu (tj. tehdejší Safari a Chrome) ho válcovaly rychlostí profilování a tím, že data zobrazovaly užitečněji na časové ose.

Google na trh uvedl svůj projekt jako rychlý a jednoduchý. Marketingová strategie cílit na rychlost se mu vyplatila a toto motto je hluboce zakořeněné i v DevTools. Primární zaměření na měření výkonu mu zůstalo.

Pokročilé krabice, ohebné a s mříží

Ještě na konci roku 2020 Firefox kraloval při práci s novějšími moduly rozložení. Pokud jste na stránce používali CSS grid anebo flexbox, bylo utrpením je editovat v ostatních prohlížečích. Firefox užitečně označoval linky u gridu i subgridu, uměl vizuálně našeptávat a elementům v DOMu přidával užitečné nálepky.

Řada vývojářů v letech 2018-2020 přešla na Firefox právě z tohoto důvodu. Největší dohledatelný impakt zde měl příspěvek od Flipa Williamse a později i video Kevina Powella. U nás Firefox DevTools nejvíce zpropagoval Viktor Daňko ze Superkoders.

Rozdíly

Rozdíly podle komunity

Protože rozdíly jednotlivých prohlížečů je náročné hodnotit objektivně, ptal jsem se Vás, vývojářů v různých Facebookových skupinách, které DevTools preferujete a proč.

Celkem se mi podařilo posbírat 23 obsáhlých odpovědí. Z toho 11 od uživatelů Chrome, 9 Firefoxu, 2 Edge a jeden pracuje v Opeře. Uznávám, není to úplně statisticky významný vzorek, ale šlo mi primárně o samotné důvody vývojářů:

Uživatelé Chrome oceňovali

• lepší JS profiler
• panel performance (zobrazování layout shiftů, js snippets)
• lepší a čistější UI
• lepší info o storage (cookies, local storage, indexed DB), informace o tom, které cookies nepřijal/neposlal a proč
• Local Overrides
• hromada DevTools rozšíření

Často také uvedli, že používají Chrome ze zvyku nebo z důvodu synchronizace, často zkusili jiné možnosti a nesedlo jim to.

Uživatelé Firefoxu zmiňovali

• lepší DOM a CSS inspektor (přehlednější grid, flex, obecně delší vývoj a celkové zaměření)
• přehlednější Network Tab
• změnu a přeposlání requestů

Uživatelé, kteří používají Edge

• ocenili rychlost a menší nenažranost
• uspávání neaktivních tabů
• menší sledování

Konkrétní odpovědi naleznete v diskuzi na: Frontendisti a Programátoři začátečníci.

Bitva Chrome vs. Firefox

V čem je lepší Chrome

Pokud člověk ladí výkon, Chrome mu jde nejvíce naproti. Ať už je to Lighthouse audit, anebo celý Performance panel (kdysi známé jako profilování), případně Performance Monitor v reálném čase.

Výhodou i nevýhodou Chromu je, že UI působí vzdušněji. To jej nutí, aby většina nastavení byla skrytá, a to zase vede k tomu, že většina uživatelů o nich řadu let neví. Třeba vizualizaci gridu prohlížeč uměl od roku 2017, ale kdo tehdy skryté znázornění gridu v Chromu reálně používal?

Se skrytými nastavení úzce souvisí naprosto geniální Command Menu. To je jakési pomyslné naplnění pravidel UX designu: „Vše, co není jednoduché, skryjte do nastavení pro profíky“. Vyvolává ho kouzelná zkratka CTRL+SHIFT+P a dá se v něm nastavit úplně všechno bez nutnosti používat myš. Za předpokladu, že víte, co hledáte.

Tímto způsobem se dostanete i k takovým šílenostem, jako např. úplné vypnutí JavaScriptu či zobrazování pravítek. Jediné, co chybí, je kromě prohledání názvů zdrojových souborů i prohledání jejich obsahů. Drobná killer feature na kterou marně čekám.

Prohledávání zdrojových souborů (v Chrome CTRL+P) umí i jiné prohlížeče, ale třeba Firefoxu chybí klávesová zkratka. Hledání se musí složitě hledat.

Jednoduché UI Chromu je ale mnohdy neintuitivní. Ikonky znázorňující „další“ nejsou vůbec sjednocené, někdy jsou to tečky, jindy šipky, a přitom dělají to samé. Některým položkám chybí málo, jde to vidět například na editaci box modelu. Víte, že na pomlčku lze dvakrát (!) kliknout pro případnou editaci? Firefox má tohle vyřešené snadněji, používá nuly.

Další neintuitivně umístěná vlastnost Chromu je „Emulate Vision Deficiencies“. Věc k nezaplacení, pokud řešíte, aby stránku korektně viděli i lidé s barevnými záměnami. Nastavení je utopené ve skrytém menu Rendering. Škoda. Slušelo by mu mít vlastní záložku v menu Elementů, třeba hned za záložkou přístupnosti. Ve Firefoxu nastavení najdete okamžitě v záložce Accessibility.

Local Overrides je další užitečná a zbytečně upozaděná funkce. Využívám ji, když klientovi ukazuji demo budoucích změn a chci, aby měl možnost si ho v klidu prohlédnout u sebe v počítači na ostré verzi, která se ale načte s lokálními zdroji.

Chrome DevTools trpí stejně jako všechny složité systémy. Je pomalý. Na stackoverflow je to nejčastější zmiňovaný problém s tisíci příspěvky.

V čem je lepší Firefox

Není Firefox jako Firefox. Ač existují čtyři verze, jen některé se hodí na běžné používání, klasický Firefox a Firefox Developer Edition. To je technicky Beta verze (je o verzi napřed) a zároveň není tak restriktivní v přístupu k doplňkům.

Ale zpátky k tomu, čím se Firefox liší od ostatních. Největší změna je viditelná na první pohled. Využívá trojsloupcový layout DevTools. První dva jsou známé, ve třetím se dějí největší změny. Třetí sloupec klasického Firefoxu graficky znázorňuje rozložení flexboxu, gridu anebo klasického box modelu. Firefox Developer Edition v třetím sloupci ukazuje problémy s kompatibilitou. Ukáže odstranitelné „deprecated“ CSS zápis anebo chybějící prefixy.

Vizualizace CSS gridu a flexboxu ve Firefoxu byla dlouhé měsíce bezkonkurenční. Chrome v nové verzi Firefox výrazně dohnal. Stále však řada funkcí chybí a některé nejspíše ani nikdy okopírovány nebudou, viz např. znázornění hran, které se často hodí v zápisech grid-column a grid-row, anebo grafické znázornění flexboxu.

Firefox je užitečný při odstraňování CSS chyb. Pokud například elementu nastavíte display: inline a zároveň třeba výšku, prohlížeč dá najevo, že tohle spolu nebude fungovat.

Také Firefox boduje v přehledu přístupnosti. Menu je přehlednější, umí více funkcí. V porovnání to ve Chromu vypadá jako šité horkou jehlou.

Uživatelské prostředí Firefoxu má řadu výhod ale i mnoho chyb. Zbytečně nadužívá ikonky, které UI zesložiťují. Přidejte k tomu spoustu zbytečných čar v UI a chybějící bílé místo. V klasické verzi nelze UI zvětšit pomocí CTRL+kolečko a co se týká kontrastu barev, je to hrůza. Šedé písmo, světlemodré písmo ani růžové písmo nesplňuje kontrastní minima. Pokud testujete kontrast na starším vysvíceném monitoru, okamžitě tenhle problém vidíte. Anebo pokud často pracujete v noci a máte zapnuté filtry omezení modrého světla.

UI Firefoxu bezkonkurenčně vede v možnostech scrollování u velmi malých oken. Firefox DevTools se obecně hodí při práci z notebooku. Při současném zobrazení DevTools v docku (připnutí na jednu stranu) a responzivního menu umožňuje jako jediný prohlížeč rozšířit responzivní okno nad svou vlastní velikost.

Firefox má komplexnější štítky, např. u eventů ukazuje přímo kód daného navázaného eventu. Scroll Into View je bezkonkurenčně jednoduchý: vyberete element v DOMu a zmáčknete S a je to! V ostatních prohlížečích, aby se jeden uklikal nebo uscrolloval k smrti.

Firefox taky umí zobrazit všechny používané fonty, což se hodí v případech, kdy je třeba snížit počty písem kvůli přeplácanému designu. Dále je užitečné přeposlání requestu v Network panelu. A taky grafické znázornění dat z JSONu, které ostatní prohlížeče zobrazují jako plain text.

A co ti další?

Cožpak je to pouze souboj Chrome a Firefoxu? Bohužel, konkurence toho moc jiného neumí. Těžko říci, jestli je to leností nebo důsledkem problémů v minulosti.

Firebug rozšíření se v roce 2016 stalo součástí DevTools Firefoxu a v roce 2017 oficiálně ukončilo činnost. Firefox má jádro Gecko, které převzal z Netscape. Jako jediný z větších prohlížečů není založený na jádře WebKit.

Opera v roce 2013 přešla na Blink, fork WebKitu o který se stará Google. V průběhu přechodu se začalo řešit, aby z WebKitu/Chromia zmizely kódy, které jsou specifické pro Chrome. Nakonec se tak stalo, a tak dnes Opera využívá z Chromia i DevTools.

Microsoft Edge dlouhou dobu vyvíjel svůj vlastní engine, EdgeHTML. Vývojáři razili strategii, že zajistí, aby stránky byly identické s Blink prohlížeči. No a po nějaké době… taky přešli na Blink.

Paradoxně Safari, prohlížeč s (původním) WebKitem vyvíjený Applem, u kterého to všechno začalo, je právě teď nejvíce odlišný od Blink a obecně webových standardů. Nicméně i jeho vývojářské nástroje jsou inspirované těmi z Chromia, liší se jenom UI.

Jinými slovy všichni „kopírují“ od všech.

Používejte, co vám vyhovuje

„Popravdě z pohledu běžného vývoje v nich nevidím podstatný rozdíl. Snad s výjimkou optimalizace pro mobilní zařízení, kde tomu nejdou moc naproti nikde, případně vás nutí vlastnit HW konkrétního výrobce“ — Tomáš Kapler

V tuto chvíli skutečně nejsou mezi prohlížeči tak výrazné změny, aby to vývojáře omezovalo v práci. Pokud někdy byla nejlepší doba vybrat si, co nejlépe vyhovuje, paradoxně je to právě teď. Ale nabízí se otázka…

Co bude dál?

„Myslím, že jak levičákům, tak pravičákům by se líbilo, kdybychom tu měli dva silné, konkurující si produkty. Ale dlouhodobě udržitelný je teď jenom jeden, Chrome. Safari nepočítám, Apple si hraje vlastní ligu a tlak na něj není tak silný.“ — Martin Michálek

Pokud se dnes jeví, že současný konkurenční boj svádí Chrome spolu s Firefoxem, za pár let to může vypadat jinak. Původní tým, který táhl vývoj Firefoxu dopředu se v posledních letech zredukoval a dlouhodobě konkurovat obrovské přesile týmu Google bude náročné.

Samozřejmě my vývojáři budeme vždycky benefitovat z trhu silných, konkurujících si produktů.

Najde se další tahoun vývoje?

Microsoft?

Renomé dělá dost. A Microsoft to má v téhle oblasti těžké. Jeho IE byl kdysi na úplné špičce a moc to nedopadlo. Stal se z něj moloch, kde hlava nevěděla, co dělá ocas. Snažili se z toho dostat, ale i to byla strastiplná cesta. Třikrát přepracovaný EDGE urazil neuvěřitelnou cestu, dnes je z něj hodně dobrý prohlížeč. Ale zdaleka se nedá říci, že by tlačil vývoj dopředu.

Apple?

Apple si jede vlastní ligu. Google pro dotaz „Safari is the new IE“ vyplivne téměř půl milionu výsledků. Je těžké říci, co je jádrem problému. Možná je to důsledek přístupu k designu a motto čím jednodušší, tím lepší a tím i přeneseně nemožnost volby. Možná za tím stojí falešná dichotomie „soukromí“ vs. „funkce“. A možná je to prostě jen tím, že uživatelé nevytvářejí na Apple dostatečný tlak. Loňská situace s Firtmanem trochu ťala do živého a je taky klidně možné, že za vším stojí lenost vývojářů. Nevím, čas ukáže. Poslední update prohlížeče naznačil, že bychom mohli v této oblasti mohli vidět postupné zlepšení.

Bias. Kdo ohlídá hlídače?

Snažil jsem se do článku nezakomponovat svůj vlastní bias. Je to těžké a mnohdy nemožné. Myslím, že je důležité v krátkosti popsat svou vlastní cestu s DevTools, ať si uděláte obrázek „kdo hodnotí“ a z jaké pozice.

Jsem uživatel Windows. Začínal jsem na IE (Maxthonu), protože nic lepšího před příchodem Firefoxu nebylo. Když v roce 2002 přišel Firefox, celkem rychle jsem přešel právě na něj. Stránky před rokem 2005 se řešily buď přes tabulkový layout anebo flash. Do doby vzniku Firebugu (2006) jsem na stránkách řešil hlavně (X)HTML validitu. Vše, co nefungovalo (díky IE), se buď řešilo přes různé hacky anebo prostě neřešilo. A když vyšel Chrome v první verzi (resp. v nekonečně padající 0.2 alpha), zamiloval jsem si ho a zatím si mě pořád drží. Co se týká mobilních zařízení, nedám dopustit na iPhone a bohužel jsem v iOS nucený používat Safari (resp. WebView), protože alternativa neexistuje.

Poděkování

Tento článek by nikdy nevznikl díky skvělé komunitě. Tímto děkuji všem, kteří přispěli svými názory.

Na nějakou funkci jsem zapomněl? Napište mi do komentářů