Problémy s webovými stránkami s vývojářskými nástroji Chrome nebo Firebug

Pokud jste sledovali moji aplikaci jQuery Tvorba webu interaktivní: Úvod do aplikace jQuery Tvorba webu interaktivní: Úvod do programu jQuery jQuery je skriptovací knihovna na straně klienta, kterou používá téměř každý moderní web - to dělá stránky interaktivním. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejpodporovanější a nejpoužívanější… výukové programy jQuery Tutorial - Začínáme: Základy a výběry jQuery Tutorial - Začínáme: Základy a výběry Minulý týden jsem mluvil o tom, jak důležité jQuery je pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili jsme, jak… zatím jste možná narazili na nějaké problémy s kódem a nevěděli jste, jak je opravit. Když čelíme nefunkčnímu kódu, je velmi obtížné určit urážlivou řadu kódu - a to je místo, kde přicházejí nástroje pro ladění a vývojáře.

Než jsem tedy pokračoval s nějakým složitějším kódem jQuery, myslel jsem, že prozkoumáme nástroje dostupné v nejoblíbenějším prohlížeči na světě - Chrome. Tyto nástroje však nejsou pouze pro Javascript - mohou vám také pomoci s laděním jakýchkoli požadavků AJAX, zdrojů, které váš web potřebuje načíst, prozkoumat strukturu DOM a spoustu dalších věcí.

Žádná láska pro Firefox?

I když se dnes chystám konkrétně odkazovat na vývojové nástroje prohlížeče Chrome z osobních preferencí a na skutečnost, že jsou zabudovány do prohlížeče, je stejná funkce dostupná v zásuvném modulu pro Firefox nazvaném Firebug Jak nainstalovat Firebug na IE, Safari, Chrome a Opera Jak nainstalovat Firebug na IE, Safari, Chrome a Opera - rozhraní je téměř totožné, takže by tato příručka měla platit.

Spuštění nástrojů pro ladění

To nemůže být snazší. V prohlížeči Chrome jednoduše stiskněte CTRL-SHIFT-I (CMD-ALT-I na Mac) nebo klikněte pravým tlačítkem kdekoli a vyberte Zkontrolujte prvek. Měli byste vidět něco podobného následujícímu:

Mezi těmito dvěma způsoby spouštění ladicí konzoly je nepatrný rozdíl. Klávesová zkratka ji jednoduše otevře ve výchozím zobrazení, zatímco Inspect Element zaměří strom DOM na konkrétní prvek, na který jste klikli pravým tlačítkem. Což nás přivádí k prvnímu úžasnému kousku funkčnosti, který získáme z těchto nástrojů.

Prvky a CSS

Prvky karta je rozdělena do dvou částí; nalevo je kompletní strom DOM. Je to podobné zdrojovému kódu stránky, ale je výrazně užitečnější.

Pro začátek to bylo analyzováno do stromové struktury, takže prvky lze sbalit a rozšířit, což vám umožní zkoumat podřízené elementy, rodiče a sourozence zřetelněji než jen čtení zdrojového kódu. Za druhé, odráží všechny dynamické změny na stránce, které vyplývají z Javascriptu. Pokud by například vaše jQuery mělo přidávat třídu k určitým prvkům na pageLoad, viděli byste, že se to odráží ve stromu DOM, ale ne ve zdroji stránky.

DOM také můžete upravit přímo tak, že na něj dvakrát kliknete. Ano, můžete to použít k hraní a úpravám webů, abyste vytvořili hloupé snímky obrazovky, takže je skvělé pro jednoduché experimentování.

Tady se hrávám s domovskou stránkou BBC News…

Na pravé straně můžete zobrazit všechna pravidla CSS použitá na aktuální prvek, včetně těch, která byla přepsána pravidly vyššího řádu (tato mají přes ně čáru):

Můžete je upravit nebo jednoduše zrušit zaškrtnutí určitého pravidla a zjistit, co se stane.

Rozbalení “vypočítané styly” zobrazí souhrn všech aktuálně uplatňovaných pravidel CSS. Číslo řádku a odkaz na soubor zcela vpravo vás přeskočí přímo na zdrojový soubor, ze kterého byl načten, i když v některých případech to může být minimalizovaný soubor (takže vše je na jednom řádku).

Mějte na paměti, že žádná ze změn, které zde provedete, nebude uložena, takže při příštím obnovení stránky se vrátí na normální stránku. Pokud hrajete s CSS, nezapomeňte si přesně poznamenat, co jste změnili, až dosáhnete požadovaného výsledku.

Chybová konzole

Druhou nejdůležitější kartou, pokud jde o mé každodenní používání těchto fantastických nástrojů, je chyba a ladicí konzole, poslední karta v seznamu. Nejprve se zde zobrazí případné chyby jazyka Javascript. Když začínáte s jQuery, možná najdete několik příkladů “$ není definováno” nebo “jQuery není definováno” - společná chyba, která znamená, že jste v záhlaví zapomněli na odkaz na jQuery. Pokud uvidíte chybu, kterou nemůžete dešifrovat, zkopírujte ji do vyhledávacího pole Google a více než pravděpodobné najdete mnoho dalších lidí, kteří měli stejný problém.

Chyba bude také ukazovat na přesný řádek kódu, ve kterém došlo k chybě poprvé; kliknutím na tuto položku přejdete přímo na tento řádek a část kódu. Pokud je to v jednom z vašich vlastních skriptů, může vás často určit přímo u pachatele - i když je chyba nejasnější, může to ukázat na zdrojový kód jQuery, který je zcela nečitelný.

Stačí říci, že konzola je první věc, kterou byste měli zkontrolovat, když něco nefunguje správně, protože je zde více než pravděpodobné vytištění chyby.

Dalším využitím konzoly je výstup vašich vlastních příkazů ladění. Můžete buď poslat trochu textu, například informovat o tom, že skript dosáhl určitého bodu:

console.log ("dostal se k tomuto kousku v kódu ok, nyní se pokouší ...");

Nebo můžete vydat celé objekty a proměnné tak jednoduše jako:

console.log (myVar);

Zkuste nyní pomocí některé základní jQuery vybrat některé prvky, a pak je výstupem vidět, jak vypadají. Můžete tak například zkontrolovat, co vaši selektoři našli.

Síť

Posledním nástrojem v sadě nástrojů pro vývojáře, který jsem vám chtěl dnes ukázat, je Síť tab. Aby tato karta fungovala, musíte se na ni zaměřit a aktualizovat stránku - poté zachytí všechny požadavky, které stránka požaduje, na reklamu, Javascript, CSS, obrázky - všechno - a dá vám rozpis informací o této interakci, včetně:

• název souboru.
• typ požadavku (GET nebo POST).
• kód odpovědi, který server poslal zpět (200 OK, 304 beze změny atd.).
• velikost souboru.
• načasování.

Kliknutím na jednotlivý soubor získáte ještě podrobnější informace o interakci mezi prohlížečem a serverem. Pro mě je to zvláště užitečné při ladění požadavků AJAX - můžete přesně vidět, jaký druh dat byl s požadavkem odeslán, a plný výstup odpovědi dané přijímajícím skriptem na straně serveru.

souhrn

Doufám, že jsem vyzbrojil začínající vývojáře pomocí několika dalších nástrojů. Pokud by vám tento příspěvek připadal užitečný, opravdu bych ocenil podíl, protože se cítím uvnitř v teple a nejasnosti a říká mi, že chci, abych psal více jako ten. Vítám také připomínky a zpětnou vazbu - zejména, jaké další nástroje používáte jako webový vývojář? Máte k dispozici arzenál pluginů Firefoxu?