Podrobný průvodce laděním kódu JavaScript v Chrome Devtools. Zastavte, když se vyskytnou všechny nebo neošetřené výjimky. Chyba tři: Tajemná proměnná „rekvizity“.

Schopnost ladit kód je pro vývojáře důležitá dovednost. Je důležité pochopit a používat široký rozsah ladicí nástroje, které existují konkrétní jazyk programování.

Bohužel se ladění nemusí zdát tak zřejmé při práci s JavaScriptem mimo plnou funkčnost. IDE. Alespoň — na první pohled.

Tento článek se podívá na to, jak můžete ladit kód JavaScript v nástrojích Google Chrome Dev Tools a v editoru kódu Visual Studio.

Poznámka překladatele: kliknutím na tento odkaz můžete vidět video verzi tohoto článku Ladění JavaScriptu v Google Chrome a Visual Studio Code v angličtině.

Předvolby

V tomto článku bude proces ladění popsán na příkladu. testovací aplikace s názvem „Rychlý chat“:

Tuto aplikaci můžete používat dvěma způsoby. Pomocí tohoto si jej můžete vytvořit sami série video lekcí. Nebo můžete již použít zdrojový kód hotovou aplikaci"Rychlý chat":

Ať už si vyberete kteroukoli možnost, budete muset spustit aplikaci Rychlý chat lokálně.

Aplikaci můžete spustit z Node.js ( jak to udělám). Nebo použijte plugin pod Vizuální studio Kód nazvaný Live Server.

Pokud s tímto pluginem začínáte pracovat, můžete se s ním naučit pracovat pomocí tohoto videa —  Live Server Extension v kódu Visual Studio.

Poznámka překladatele: video v angličtině.

S technický bod zobrazit Uživatelské jméno dostávám nesprávně, když místo toho používám usernameInput.text správná možnost usernameInput.value . Pokud jsem udělal takovou chybu reálný život, moje první myšlenka by byla použít nástroj console.log().

Ale není to zrovna ten případ, který by mi mohl pomoci, jak můžete vidět na obrázku níže. Pokud použití console.log() bylo také vaší první myšlenkou, přečtením tohoto článku jste se dostali na správné místo a děláte správnou věc!

Základy ladění

Začněme základy. Myšlenkou ladění je, že můžete nastavit takzvané body přerušení ( zlomové body) pro zastavení provádění programu na určitém místě.

To vám jako vývojáři dává možnost podívat se na aktuální stav aplikace a zkontrolovat například hodnoty proměnných v ní. Můžete dokonce jít dále a sledovat libovolné proměnné podle svého výběru, takže kdykoli se aplikace zastaví, můžete zkontrolovat hodnoty těchto proměnných.

Po nastavení bodu přerušení ( bod zlomu) v kódu je zpravidla několik možností pro další akce:

• pokračovat v provádění programu
• projděte krok za krokem všechny fáze programu - řádek po řádku
• vystoupit z aktuální funkce kde jsi
• přejděte na další funkci

Budete mít také přístup k zobrazení zásobníku hovorů ( zásobník hovorů). Jinými slovy, protože funkce v programu mohou volat jiné funkce pro provedení, můžete prohlížet historie hovorů tyto funkce.

Ladění v Google Chrome

Chcete-li zahájit ladění aplikace v prohlížeči Google Chrome, přidejte obslužnou rutinu události tlačítka clickBtn operátor debugger, jak je uvedeno níže:

Když provádění programu dosáhne řádku s příkazem debuggeru, aplikace bude pozastavena a automaticky se aktivují ladicí nástroje prohlížeče Google Chrome.

Upozorňujeme, že aplikace v okně prohlížeče je stínovaná šedá ukázat, že je pozastaveno. Všimněte si také, že karta Zdroje v Chrome Dev Tools se otevřela automaticky:

Podívejme se, co vidíme na kartě Zdroje.

Zdroje Tab

První věc, které si na této kartě můžete všimnout, je kopie zdrojového kódu aplikace. Toto je kód, který prohlížeč načetl a pracuje s ním.

Můžete si také všimnout, že řádek kódu s příkazem debugger je zvýrazněn modře, což nám říká, že se aplikace v tomto bodě kódu přestala spouštět:

Prohlížeč Google Chrome nám umožňuje prohlížet zdroj aplikací. Když máte zdrojový kód před sebou, můžete do něj instalovat zlomové body.

Bod přerušení je určen k označení místa, kde by se mělo provádění programu zastavit. Operátor debugger, který jsme použili ve výše uvedeném příkladu, funguje jako bod zlomu, ale ve zdrojovém kódu aplikace je to takto bod zlomu nemusí být jen jeden.

Bod přerušení je záměrné zastavení nebo pozastavení provádění programu.

Přidat bod zlomu, musíte kliknout na okap — pole nalevo od číslování řádků kódu. Po dokončení této akce si všimnete, že prohlížeč Google Chrome toto automaticky přidal bod zlomu do seznamu „Breakpoints“:

Záložka Rozsah

Karta Rozsah je místo, kde můžete sledovat proměnné ve vaší aplikaci. Upozorňujeme, že tato karta má tři části: místní rozsah ( Místní), globální oblast viditelnost ( Globální) a sekce skript ( Skript).

V sekci skripty můžete sledovat proměnné v rozsahu aktuálního skriptu:

Většinu času strávíte laděním aplikace v této záložce. Je to mnohem víc účinná alternativačetná použití console.log() .

Záložka Sledovat

Jak již bylo zmíněno dříve, kromě zobrazení proměnných na záložce Rozsah můžete také definovat proměnné, jejichž hodnoty chcete sledovat během provádění programu.

Přidáním proměnné na kartu Watch můžete pokaždé, když nastavíte bod přerušení, rychle zkontrolovat hodnotu této proměnné (která může být nedefinovaná v závislosti na tom, kde se v kódu nacházíte).

Klikněte na znaménko plus a zadejte název proměnné, kterou chcete monitorovat, v našem případě usernameInput:

Provádění krok za krokem, volání zásobníku a seznamu bodů přerušení

Sekce karty Zdroje, která se nachází v levém dolním rohu okna ladicího programu, umožňuje zobrazit seznam bodů přerušení, zásobník volání ( zásobník hovorů) atd.

V zásobník hovorů Existuje pouze jedna funkce, kterou je obsluha události pro přihlašovací tlačítko. Funkce je uvedena, protože je to jediná funkce, která byla vyvolána tento moment. Protože některé funkce mohou volat jiné funkce pro provedení, bude tento řetězec odpovídajícím způsobem aktualizován.

Všimněte si také tlačítek se šipkami v horní části obrazovky. Ty odpovídají funkcím výše pro pokračování provádění vašeho kódu nebo procházení jej řádek po řádku ( krokování). Doporučil bych tato tlačítka trochu otestovat, abyste si zvykli na to, jak lze kód spustit.

Konečně existují Různé typy body přerušení, které lze nastavit. Podívejme se na příklad vytvoření podmíněného bodu přerušení ( podmíněný bod přerušení), který se spustí pouze při splnění určité podmínky.

Řekněme například, že chceme zabránit tomu, aby událost na přihlašovacím tlačítku byla zpracována pouze tehdy, když se uživatel pokusí přihlásit bez zadání uživatelského jména.

Můžeme to udělat kliknutím klikněte pravým tlačítkem myši myší na okapové pole a vytváření bod zlomu s následující podmínkou — usernameInput.text === "" :

V případě ladění Rychlé aplikace Chat, pokud kliknete na tlačítko přihlášení bez uživatelského jména, spustí se bod zlomu. V opačném případě bude kód pokračovat v provádění jako obvykle.

Upozorňujeme, že jich je ještě více Dostupné možnosti zlomové body, o kterých se v tomto článku nemluví.

Ladění v kódu Visual Studio

Nástroje pro vývojáře Chrome jsou jedny z nejlepších svého druhu. Jak jste již viděli, nabízí vynikající vlastnosti a funkčnost pro ladění aplikace.

Vývojový tým Visual Studio Code však udělal spoustu práce, aby byl proces ladění v tomto editoru ještě pokročilejší.

Opravdu se mi líbí Visual Studio Code a trávím v něm více času než kterýkoli jiný editor kódu. Tento proces také zahrnuje ladění.

Chcete-li zahájit ladění kódu ve VS Code, budete muset nainstalovat plugin Debugger pro Chrome:

Podívejme se na kartu Debug. Ve výchozím nastavení se nachází v postranním panelu editoru. Tuto kartu otevřete kliknutím na ikonu, která vypadá jako chyba ( Chyba).

Jakmile otevřete tento panel, uvidíte nástroje velmi podobné těm, které jsme viděli Prohlížeč Google Chrome —   proměnné, zásobník hovorů, zlomové body:

Většina funkčnost, kterým jsme se věnovali v Chrome Dev Tools, jsou dostupné i ve VS Code.

Nyní, když jsme obeznámeni s kartou Debug, musíme vytvořit konfiguraci, která editoru kódu VS řekne, jak ladit naši aplikaci.

VS Code ukládá konfiguraci ladění do souboru launch.json ve složce .vscode. Chcete-li, aby VS Code vytvořil tento soubor, v nabídce editoru otevřete rozevírací seznam „Žádné konfigurace“ a vyberte možnost „Přidat konfiguraci“.

VS Code ukládá konfiguraci ladění do souboru s názvem launch.json ve složce .vscode

Poté z tohoto seznamu vyberte „Chrome“.

Při psaní JavaScriptu, pokud žádný ladicí nástroj není velmi bolestivý.

Ladění JavaScriptu

Nástroje pro ladění nejsou obtížné psát programy JavaScript.

Váš kód může obsahovat syntaktické chyby, logické chyby, pokud neexistují žádné ladicí nástroje, je obtížnější tyto chyby najít.

Zpravidla, pokud se to stane Chyba JavaScriptu, nebudou žádné dotazy, takže kód nemůžete najít na špatném místě.

Nástroje pro ladění JavaScriptu

Hledání chyb v programový kód tzv. ladění.

Ladění je obtížné, ale naštěstí má mnoho prohlížečů vestavěné nástroje pro ladění.

Vestavěné ladicí nástroje lze povolit nebo zakázat a uživateli bude odeslána závažná chybová zpráva.

Pomocí ladicích nástrojů můžeme nastavit bod přerušení (pozici zastavení provádění kódu) a dokážeme detekovat, kdy proměnná provádí kód.

Prohlížeč s podporou ladění obvykle stiskněte klávesu F12 a v nabídce Debug vyberte „Console“.

metoda console.log().

Pokud prohlížeč podporuje ladění, můžete k výstupu použít metodu console.log(). Význam JavaScriptu v ladicím okně:

příklady

Moje první webová stránka

a = 5;
b = 6;
c = a + b;
console.log(c);

Nastavte bod přerušení

V ladicím okně můžete nastavit zarážky v kódu JavaScript.

V každém bodě přerušení zastaví provádění JavaScript kód pro kontrolu hodnoty proměnných v JavaScriptu my.

Po dokončení ověření můžete kód znovu spustit (například tlačítko Přehrát).

debugger klíčových slov

debugger klíčové slovo, zastavit Provádění JavaScriptu a volání funkcí debuggeru.

Toto je klíčové slovo a nastavit zarážky v ladicím nástroji, efekt je stejný.

Pokud není k dispozici žádné ladění, příkaz debugger nebude fungovat.

Otevřete ladicí program, provádění kódu se zastaví před třetím řádkem.

Základní nástroje pro ladění prohlížeče

Prohlížeče obvykle umožňují ladicí nástroje, obvykle stisknutím klávesy F12 a výběrem „Konzola“ z nabídky Debug.

V každém prohlížeči postupujte takto:

Prohlížeč Chrome

• Otevřete prohlížeč.
• Z nabídky vyberte Nástroje.
• Nakonec vyberte Console.

Prohlížeč Firefox

• Otevřete prohlížeč.
• Jdi na stránku:
  http://www.getfirebug.com.
• Následuj instrukce:
  Nainstalujte Firebug.

Prohlížeč Internet Explorer.

• Otevřete prohlížeč.
• Z nabídky vyberte Nástroje.
• Vyberte Nástroje Nástroje pro vývojáře.
• Nakonec vyberte Console.

opera

• Otevřete prohlížeč.
• Vestavěné ladicí nástroje Opery pro Dragonfly, Detailní popis najdete na stránce návštěvy:
  http://www.opera.com/dragonfly/.

safari

• Otevřete prohlížeč.
• Klikněte pravým tlačítkem a vyberte Zobrazit kód prvku.
• Vyberte "Ovládací panely" v dolní části vyskakovacího okna.

Firebug obsahuje výkonný ladicí program AvaScript, který vám dává možnost kdykoli pozastavit provádění a v daném okamžiku zobrazit každou proměnnou. Pokud je váš kód pomalý, použijte profilovač JavaScriptu k měření výkonu a rychlému nalezení úzkých míst.

Najděte skripty snadno

Mnoho webových aplikací se skládá z velké číslo a najít ten k ladění může být rutinní a nudný úkol. Nabídka výběru skriptů Firebug třídí a organizuje soubory do jasného a srozumitelného seznamu, který vám pomůže najít jakýkoli soubor pouhým kliknutím prstu.

Pozastavit provádění na libovolném řádku

Firebug umožňuje nastavit body přerušení, které říkají ladicímu programu, aby zastavil provádění skriptu, když dosáhne určitého řádku. Zatímco je provádění pozastaveno, můžete zobrazit hodnoty libovolných proměnných a zkontrolovat objekty.

Chcete-li nastavit bod přerušení, klikněte na libovolné číslo řádku a objeví se tam červená tečka, která značí, že bod přerušení byl nastaven. Opětovným kliknutím na červenou tečku odstraníte bod přerušení.

Pozastavit provádění, pouze pokud...

Body přerušení mohou způsobit problémy, pokud jsou spouštěny příliš často. Někdy chceme pozastavit provádění pouze při splnění určitých podmínek. Firebug umožňuje nastavit „podmíněné“ zarážky. Kontrolují výraz, který musí být pravdivý, aby bod přerušení fungoval.

Chcete-li nastavit podmíněný bod přerušení, jednoduše klikněte pravým tlačítkem na libovolné číslo řádku. Objeví se bublina s výzvou k zadání výrazu javascriptu. Kdykoli můžete znovu kliknout pravým tlačítkem, chcete-li výraz změnit, nebo kliknutím levým tlačítkem se zbavit bodu přerušení.

Krok za krokem

Když ladicí program pozastaví provádění, můžete pokračovat ve skriptu krok po kroku. To vám umožní jasně vidět, jak provedení konkrétního řádku ovlivní proměnné a objekty.

Můžete také pokračovat v provádění pro více než jeden řádek. Vyberte v kontextová nabídka požadovaný řádek"Spustit na tento řádek" pro pokračování provádění na tomto řádku.

Jsem vyrušen, když dělám chyby

Ne vždy si vyberete ladicí program... Někdy si ladicí program vybere vás. Firebug vám dává možnost automaticky skočit do ladicího programu, když dojde k chybě, takže můžete prozkoumat podmínky, za kterých k problému došlo.

Rozložený stoh

Když se ladicí program pozastaví, Firebug vám zobrazí zásobník volání, což je kolekce vnořených volání funkcí, která aktuálně běží a čekají na návrat.

Zásobník volání je reprezentován kompaktním pruhem tlačítek na panelu, každé s názvem funkce na zásobníku. Kliknutím na libovolné tlačítko můžete přejít na řádek, kde je funkce pozastavena, a podívat se na hodnoty lokálních proměnných zevnitř funkce.

Sledování výrazů

Při ladění často chcete vidět hodnotu složité výrazy nebo předměty, které jsou pohřbeny v DOM. Firebug umožňuje vytisknout libovolný javascriptový výraz, jehož hodnota bude aktualizována při každém kroku ladění.

Při psaní výrazů nezapomeňte, že můžete použít klávesu Tab k automatickému doplňování vlastností objektu.

Variabilní rady

Když je provádění pozastaveno, můžete pohybovat myší nad libovolnou proměnnou aktuální funkce a prohlížet si popisky s hodnotami. Je to skvělý způsob, jak udržet oči na kódu a získat odpovědi při čtení.

Profil Výkon JavaScriptu

Vaše webová aplikace je téměř dokonalá. Propracovali jste se přes všechny chyby, hotovo stylový design a uživatelé to milují. Jen jeden problém – některé funkce jsou pomalé a vy si nejste jisti proč...

S Firebugem se již nemusíte divit, proč váš kód běží pomalu. Pomocí profilovače Firebug můžete oddělit mouchy od řízků doslova během několika sekund.

Chcete-li použít profiler, jednoduše přejděte na kartu Konzola a klikněte na tlačítko "Profil". Poté chvíli používejte aplikaci nebo znovu načtěte stránku a znovu klikněte na „Profil“. Zobrazí se podrobná zpráva, která ukazuje, které funkce byly volány a jak dlouho každá trvala.

Protokolování volání funkcí

Někdy je problematická funkce volána tolikrát, že pokaždé nemůžete přejít do ladicího programu. Chcete jen vědět, kdy se volá a s jakými parametry.

Chcete-li sledovat všechna volání funkcí, jednoduše klikněte pravým tlačítkem myši na kartu Skript a vyberte možnost „Zaznamenat volání do „název funkce“. Pak přejděte do konzole a sledujte, jak se hovory objevují v protokolu...

Jděte přímo na linku 108

Často chcete jasně přejít na požadovaný řádek vašeho skriptu. Není nic jednoduššího, stačí zadat do okna číslo řádku rychlé hledání, přičemž # na první místo, jak je znázorněno na snímku obrazovky vlevo.

Ladění js a css

Původně jsem chtěl tento článek věnovat pouze tomu, co se týká ladění js skriptů. Po napsání se ale ukázalo, že problematika ladění CSS velmi souvisí s těmito stejnými debuggery, takže vytvářet samostatný článek o ladění CSS prostě nemá smysl.

Javascript kombinuje výkon a rozmanitost s primitivním laděním v prohlížečích. Neustálé používání funkce alert() je ztráta drahocenného času. Bez externích nástrojů pro ladění tedy nebudete schopni rychle identifikovat chybu a správně nakonfigurovat skripty. Skripty JS spouští prohlížeč, ale prohlížeče samotné buď postrádají nástroje pro ladění skriptů JS, nebo jsou tak primitivní, že je ani nechcete používat.

Ladění CSS je důležitou součástí toho, aby byl váš web kompatibilní s různými prohlížeči. Při vývoji designu webových stránek návrháři rozložení testují stránky ve velkých prohlížečích. Hlavní CSS cíl ladění je stejné vizuální zobrazení stránek webu ve všech hlavních prohlížečích.

Pro každý prohlížeč existují speciální nástroje pro ladění JS skriptů a zároveň ladění CSS. Tyto nástroje jsou speciální pomůcky napsáno pod konkrétní prohlížeč. Proto budete muset své js skripty ladit pouze pod jedním prohlížečem, protože každý prohlížeč má svůj vlastní nástroj.

Prohlížeč	Nástroje pro ladění js skriptů
	Firebug
	Firebug Lite Dragonfly Opera 9.5 a vyšší
	Firebug Lite K dispozici je také velmi Výkonný nástroj pro vývoj a ladění MS Visual Studio, ale tento nástroj je velmi pomalý a může vygenerovat chybu během 5-7 sekund. IE 8 má vestavěné nástroje pro vývojáře (IE 7 má režim simulace pro ladění)

Nejoblíbenější a pohodlný nástroj většina lidí si myslí, že Firebug je pro Prohlížeč Firefox. A dovnitř praktický vývoj js skripty Tento nástroj také používám. Ze všech výše uvedených nástrojů je Firebug nejpohodlnější k použití a má nejvíce funkcí.

Obrázek ukazuje část konzole Firebug.
Záložka "Konzola" je nejdůležitější - zobrazuje po řádcích chyby zjištěné během provádění skriptů js. Řádek zobrazuje důvod chyby a vpravo je název souboru a číslo řádku. Když kliknete na tlačítko "Profil", přejde do stisknutého stavu. Pokud jej stisknete, zobrazí se tabulka se seznamem funkcí, které prohlížeč provádí v skutečný režim. Zobrazí se názvy funkcí, počet volání a doba provádění těchto funkcí během doby, kdy bylo stisknuto tlačítko „Profil“.
Druhou nejdůležitější záložkou je „Skript“. Zde můžete vidět interní kód libovolného vybraného souboru js. Na kartě jsou také k dispozici následující zajímavé možnosti:

- dekompilovat zdroje do eval. Umožňuje zobrazit na obrazovce zdrojový kód skriptu, nikoli kódovaný.
- zamyslet se nad všemi chybami. Zastaví provádění skriptu na řádcích, kde je zjištěna chyba, s popisem chyby. To zahrnuje také chyby, které nejsou kritické pro provádění skriptu.
Spouštění skriptu v libovolném řádku můžete zastavit sami. V tomto případě budete moci zobrazit zásobník volání, kde jsou všechny provedené funkce až do bodu zastavení skriptu zobrazeny v chronologickém pořadí. Když skript zastavíte, najetím myši na libovolný prvek kódu se zobrazí vyskakovací nabídka s hodnotou prvku.

Záložka "Síť" zobrazuje seznam načtených skriptů. Pokud kliknete na libovolný soubor, zobrazí se informace o výměně hlaviček mezi prohlížečem a serverem a také obsah skriptu js. Řádek také zobrazuje velikost a dobu načítání skriptu.
To se může hodit nejen při ladění skriptů, ale také pro urychlení načítání stránek. Můžete zobrazit velikosti obrázků, načtené skripty js a odhadnout čas strávený načítáním každého prvku stránky. Barevné schéma načítání, kromě zobrazení času potřebného k načtení prvku (stránky), času DNS dotazy a čas HTTP požadavek, také ukazuje dobu čekání na odpověď serveru. Nebo jinými slovy, doba provádění php kódu.

Firebug navíc umožňuje sledovat požadavky ajax, zobrazovat hlavičky odpovědí a opět odhadovat časy požadavků.

Kromě všeho má Firebug příkazový řádek, který lze na přání zvětšit do okna libovolné velikosti a v něm můžete živě psát a ihned spouštět libovolný js kód.
Firebug vývojáři vytvořen speciální verze Firebug Lite, který umožňuje ladit js skripty ve všech ostatních hlavních prohlížečích (Opera, IE, Safari). Je pravda, že tato verze je trochu omezená, ale stále lepší než nic. No a kromě samotného ladění js skriptů je k dispozici i ladění CSS a struktura stránek DOM. Provádění událostí js (onclick, onmousemove atd.) umožňuje sledovat změny v HTML kódu stránky a DOM dokumentu v reálném čase. Vyměněné díly html kód a okamžitě se rozsvítí.
Pokud vyberete prvek stránky a kliknete na kartu „Rozvržení“, budete moci vidět, jak je prvek na stránce umístěn, a na kartě „Style“ se zobrazí všechny aktivní a přepsané vlastnosti prvku (přeškrtnutí vlastnictví).

Vlastnost je přepsána poslední nastavená hodnota podle priority svého cíle.

Opera Vážka

Celkově je Dragonfly také dobrý debugger, ale na první pokus jsem nemohl začít ladit. Během testovacího pokusu o ladění skriptu js chybová konzola z nějakého důvodu tvrdošíjně zůstala volná, ačkoli ve skriptu byla chyba chyba syntaxe a násilně se zobrazilo okno "Error Console" označující řádek s chybou. Jak se ukázalo, pro každou stránku bylo nutné znovu restartovat Dragonfly.

V podstatě je ladění skriptů js v Dragonfly pouze duplikováním chybových informací v „Error Console“ v samotné konzoli Dragonfly.

Vážka navíc představuje rozsáhlé možnosti laděním stránky CSS. Pokud jde o mě, je to trochu srozumitelnější než ve Firebugu. Kromě umístění prvku na stránku nabízí Dragonfly pohled samostatná záložka"Vypočítaný styl", který zobrazuje všechny existující vlastnosti prvku a záložku "Styly" s vlastnostmi prvku rozdělenými podle třídy.

Zatímco Firebug na kartě "Zobrazit vypočítaný styl" zobrazuje všechny vlastnosti bez barevného designu. Oproti Firebugu však změna Vlastnosti CSS a zobrazení změn v reálném čase není v Dragonfly k dispozici. Na rozdíl od Firebugu nemá Dragonfly žádné speciální funkce pro ladění js skriptů. Nechybí ani displej Žádosti Ajaxu, hlavičky výměny dat mezi klientem a serverem, čas požadavku. Nicméně pouze plný úvazekžádost bez podrobností. Při práci s Dragonfly máte dojem, že se trochu zpomaluje. Porovnání výkonu konzolí ukázalo, že Dragonfly přece jen více zatěžuje procesor, i když jen mírně.

Mezi nevýhody patří skutečnost, že profilování není poskytováno pro ladění js skriptů.

Nástroje pro vývojáře IE

Kompletní sada nástrojů pro ladění skriptů js a css displej vlastnosti prvků stránky. V případě syntaxe nebo jiné chyby ve skriptu js konzola zobrazí popis chyby, název souboru a číslo řádku, kde k chybě došlo.

Mezi funkce, které se nenacházejí v jiných debuggerech, patří:
- možnost změnit velikost stránky tak, aby se vešla do oblíbených rozšíření (1024x768, 1280x768, 1280x1024 a další);
- při profilování "Vytváření/zastavování profilů" lze ve formě stromu zobrazit názvy funkcí, počet volání a dobu provádění těchto funkcí za určité období. To vám umožní pohodlně sledovat pořadí a vnoření volání funkcí. Firebug umožňuje pouze výstup společný seznam nazývané funkce;
- zobrazí se funkce "zobrazit -> zdroj -> zdrojový kód prvku se stylem". samostatné okno html kód vybraného prvku spolu s tím vším css styly. To může být zvláště užitečné, pokud náhle potřebujete převzít část stránky z jiného webu spolu se styly css.
Mezi nevýhody patří skutečnost, že IE Developer Tools nemá panel pro sledování požadavků, takže nebudete moci sledovat počet požadavků a rychlost načítání.
Jak víte, IE je prohlížeč, který zaostává za specifikacemi. Při rozvržení návrhu vyžaduje IE největší pozornost a hledání řešení pro správné zobrazení prvků stránky. Proto k velké plus Nástroje pro vývojáře IE mohou zahrnovat možnost kontroly kompatibility stránek v IE 7.

Stejně jako ve výše uvedených debuggerech může uživatel zobrazit styly vybraného prvku jak z hlediska stylů podle třídy, tak z hlediska konečné sady stylů.

To je asi vše, seznámili jste se s hlavními debuggery js skriptů a CSS. Nevidím smysl to podrobněji popisovat, protože většina funkcí se obvykle nepoužívá. Všechny debuggery mají Rozhraní v ruském jazyce a chybějící detaily můžete bez větších potíží sami zjistit. Hodně štěstí.

1074

Při nedávném rozhovoru s mými kolegy mě překvapilo, že mnozí z nich při své práci nikdy nepoužili debugger konzoly JavaScript vestavěný v prohlížeči. Bohužel jeden z nich pracuje v mé firmě, jeho jméno neprozradím.
Pro ty z vás, kteří konzoli ještě neznají rozhraní API prohlížeče a byl napsán tento článek.

Vizuální ladění

Při práci na webu se ladění opírá především o vizuální vnímání. Je velmi snadné vidět nesprávně zarovnané sloupce, překrývající se text, provést potřebné úpravy a obnovit stránku. Pro zpráva PHP chybová zpráva zastaví skript a zobrazí problém přímo na stránce. Krátce: většina chyby, které lze okamžitě opravit, jsou po načtení stránky snadno vidět.

API konzole je objekt (konzole), kterou lze použít k zobrazení informace o ladění(lze použít, jakmile je stránka načtena prohlížečem). Konzole je nejúčinnější při práci s JavaScriptem.

Ladění javascript firebug Jak sledovat události

Firefox - Zaznamenávat události

Firefox + Firebug + Firequery = Zobrazuje události spuštěné pomocí jQuery

Brzdy - vypněte, když nepracují