Control execution of a Store app in a Visual Studio debug session for Windows Store apps (JavaScript)

Tento rychlý start ukazuje, jak pro navigaci v aplikaci Visual Studio debugger a zobrazit stav programu v relaci.

Je tento rychlý start pro vývojáře, kteří jsou nové ladění pomocí aplikace Visual Studio a pro vývojáře, kteří chtějí dozvědět více o navigaci v aplikaci Visual Studio relaci ladění. Nepředpokládá techniky ladění sám. Funkce v ukázkovém kódu jsou určeny pouze k prokázání ladění postupy popsané v tomto tématu. Funkce není využívat doporučené postupy navrhování aplikace nebo funkce. Ve skutečnosti rychle zjistíte, že funkce a aplikace, není nic většinu vůbec.

Za co, jako nezávislé, takže můžete přeskočit všechny části obsahující informace, které jste již obeznámeni s byly navrženy v částech tento rychlý start. Také není nutné vytvořit ukázkové aplikace. Však doporučujeme a provedli proces co nejjednodušší.

Ladicí program klávesové zkratky. Navigace v aplikaci Visual Studio debugger je optimalizován pro myši a klávesnice. Mnoha kroků v tomto tématu v kulatých závorek příspěvek patří klávesové zkratky nebo klávesovou zkratku. Například (klávesnice: F5) označuje, že zadáním klávesu F5 spustí nebo pokračuje spuštění ladicího programu.

Poznámka

Modul vzorek

Úložiště systému Windows aplikace často používají JavaScript modulu vzorek k zapouzdření dat a funkcí na stránce. Vzorek modul používá uzavření jedné, samospouštěcího a anonymní funkce stránce oddělit od globální obor názvů. V tomto tématu jsme volání této funkce modulu.

V tomto tématu

Můžete se naučit jak:

Vytvoření vzorové aplikace

Nastavit zarážky, krok do funkce, spustit a zkontrolovat data, program

Krok do, přes a z funkce

Nastavit podmíněné zarážky, spustit ke kurzoru a vizualizovat proměnné

Proměnná data zobrazení v podokně Locals

• Zobrazení dat proměnných a objektu prototypu

• Zkontrolovat data řetěz rozsahu

Vyhledejte kód pomocí okna zásobník volání

Vytvoření vzorové aplikace

Je ladění kódu, tak ukázkové aplikace používá pouze k vytvoření zdrojového souboru, ve kterém můžete zobrazit relaci ladění navigace jak funguje a jak zkontrolovat stav programu rámci app úložiště systému Windows. Kód, který bude vyvolaný volána module funkce souboru default.js. Žádné ovládací prvky jsou přidány a jsou zpracovány žádné události.

1. Vytvoření prázdné aplikace JavaScript úložiště systému Windows. Otevřete Visual Studio. Na domovské stránce zvolte Nový projekt odkaz. Na Nový projekt dialogové okno pole, zvolte JavaScript v nainstalovat seznam a pak zvolte Úložiště systému Windows. V seznamu šablon projektů vyberte Prázdné aplikace. Visual Studio vytvoří nové řešení a projektu a zobrazí soubor default.htm v editoru kódu.

   Poznámka: soubory skriptu, které jsou načteny do stránky.

   • base.js a ui.js vytvořit soubory Knihovny Windows JavaScript. Knihovna Windows JavaScript je sada JavaScript a CSS soubory, které usnadňují vytvoření úložiště systému Windows aplikacím pomocí jazyka JavaScript. Použijete ji Windows Runtime, HTML a CSS k vytvoření vaší aplikace.

   • Spustí kód default.js souboru.

2. Otevřete zdrojový soubor default.js. Otevřete v aplikaci Solution Explorer js uzlu a zvolte default.js.

3. Obsah stránky nahraďte ukázkový kód. Odstranit veškerý obsah z default.js souboru. Tento odkaz: Debugger navigation sample code (JavaScript)a potom zkopírujte kód uvedený v části JavaScriptu do schránky. (Zvolte zpět v prohlížeči nebo prohlížeč nápovědy vrátit na tuto stránku rychlý start.) Vložte kód do prázdné nyní v editoru Visual Studio, default.js. Zvolte Ctrl + S k uložení souboru.

Nyní můžete podle příklady v tomto tématu.

Nastavit zarážky, krok do funkce, spustit a zkontrolovat data, program

Nejběžnějším způsobem spustit relaci ladění, je volba Spustit ladění z ladění nabídce (klávesnice: F5). Aplikace spustí a pokračuje v provádění, dokud nenarazí, ručně pozastavení provádění, dojde k výjimce, nebo ukončení aplikace.

Při spouštění je pozastaveno v debuggeru, můžete zobrazit hodnotu aktivní proměnné v tipu data ponecháte ukazatel myši na proměnné.

Po pozastavení provádění aplikace (která se také nazývá rozdělení do ladicího programu), řízení způsobu, jakým provede zbývající kód programu. Můžete pokračovat řádek po řádku z volání funkce přesunutí do funkce, nebo volaná funkce lze provést v jediném kroku. Tyto postupy se nazývají krokování aplikace. Můžete také obnovit standardní spuštění aplikace, systémem další je nastavený bod přerušení nebo na řádku, kde je umístěn kurzor. Můžete ukončit relaci ladění, kdykoli. Ladicí program je určen k operacím nezbytné vyčištění a ukončit provádění.

Příklad 1

V tomto příkladu nastavte zarážku v textu module funkce default.js jako první naše příkazy uživatel volá. Zobrazení hodnot proměnných v debuggeru data tipy pak Krok do funkce a poté Zastavit ladění.

1. Nastavení zarážky. Nastavit zarážku na příkaz callTrack = "module function"; , dojde ihned po volání app.start(). Zvolte řádek v šedě hřbetu editoru zdrojového kódu (klávesnice: umístěte kurzor do řádku a zvolte F9 klíč).

   

   Zarážka je ikona ve hřbetu.

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5).

   Aplikace spustí provádění a přeruší provádění bezprostředně před prohlášení, ve kterém je nastavena zarážka. Aktuální ikona čáry ve hřbetu identifikuje umístění a aktuální příkaz zvýrazněna.

   

   Jsou nyní v řízení provádění aplikace a zkontrolovat stav programu, krokování příkazů programu.

3. Krok do funkce. Na ladění nabídce zvolte Krok do (klávesnice: F11).

   

   Poznámky, debugger se přesune na další řádek, který je volání example1 funkce. Zvolte Krok do znovu. Debugger se přesune na první řádek kódu example1 funkce. Zvýrazněný řádek nebyl proveden, ale byl načten v zásobníku volání funkce a byla přidělena paměť pro lokální proměnné.

4. Při kroku můžete do řádku kódu, ladicí program provede jednu z následujících akcí:

   • Pokud dalším příkazu není volání funkce ve vašem řešení, ladicí program provede příkaz, přesune na další příkaz a pak přeruší provádění.

   • Pokud volání funkce ve vašem řešení výkazu, debugger přesune na první řádek volaná funkce a potom přeruší provádění.

   Přejděte ke kroku do prohlášení o example1 dokud nedosáhnete výjezdu. Ladicí program zvýrazní uzavírající složenou závorkou funkce.

5. Zobrazit hodnoty proměnných data tipy. Přejděte ke kroku do prohlášení o example1 dokud nedosáhnete výjezdu. Ladicí program zvýrazní uzavírající složenou závorkou funkce. Při pozastavení myši na název proměnné název a hodnotu proměnné zobrazí v tipu data.

   

6. Přidáte kukátko proměnné callTrack. callTrack Je proměnná použita v celém tomto rychlý start zobrazit funkce volána v příkladech. Zjednodušit zobrazení hodnoty proměnné, přidejte do okna kukátka. Vyberte název proměnné v editoru a zvolte příkaz Přidat kukátko z místní nabídky.

   

   Můžete sledovat v okně kukátka více proměnných. Hodnoty sledovaných proměnných jako v systému windows tip data hodnoty jsou aktualizovány při každém spuštění je pozastaveno. Sledované proměnné uloženo přes ladicí relace.

7. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Krok do, přes a z funkce

Oproti do nadřazené funkce volána funkce krokování, krokování přes funkci vykonává funkci dítě a pak obnoví nadřazeného přeruší provádění ve volání funkce. Může být krok přes funkci, pokud jste obeznámeni se způsobem, jakým funkce funguje a jisti, že jeho spuštění neovlivní problém, který řešíte.

Krokování přes řádek kódu, který neobsahuje volání funkce se provede řádek stejně jako do řádku krokování.

Z podřízené funkce krokování pokračuje provádění funkce a potom přeruší provádění po jeho volání funkce vrátí funkce. Z dlouhé funkce pravděpodobně kroku, zjistíte, že zbytek funkce není významné.

Krokování přes i z funkce krokování spuštění funkce.

Příklad 2

V tomto příkladu krok do, přes a z funkce.

1. Volání funkce priklad2 ve funkci modulu. Upravit module funkci a nahradit následující řádek var callTrack = "module function" s example2();.

   

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5). Ladicí program přeruší provádění bod přerušení.

3. Krok přes řádek kódu. Na ladění nabídce zvolte Krok přes (klávesnice: F10). Spustí ladicí program var callTrack = "module function" prohlášení stejným způsobem jako krokování do příkazu.

4. Krok do priklad2 a example2_a. Zvolte F11 krok do klíče example2 funkce. Krok do pokračovat example2 příkazy, dokud se nedostanete na řádku var x = example2_a();. Opět krok do tohoto řádku se přesuňte do vstupního bodu example2_a. Přejděte ke kroku do každé prohlášení o example2_a až se vrátíte do example2.

   

5. Krok přes funkci. Všimněte si, že na další řádek v example2, var y = example2_a(); je v podstatě stejné jako předchozí řádek. Můžete bezpečně Krok přes tento řádek. Zvolte F10 přesunout z obnovení klíče example2 k této druhé volání example2_a. Všimněte si, že callTrack řetězec označuje example2_a funkce byla spuštěna dvakrát.

6. Krok ven z funkce. Zvolte F11 krok do klíče example2_b funkce. Všimněte si, že example2_b není velmi odlišné od example2_a. Chcete-li krok z funkce, zvolte Krok ven na ladění nabídky (klávesnice: Shift + F11). Všimněte si, že callTrack proměnné označuje, že example2_b byl spuštěn a ladicí program vrátil do bodu kde example2 návratu.

7. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Nastavit podmíněné zarážky, spustit ke kurzoru a vizualizovat proměnné

Podmíněné breakpoint určuje podmínku, která způsobí pozastavení provádění ladicí program. Podmínka je určen libovolný výraz kódu, který může být vyhodnocen jako PRAVDA nebo NEPRAVDA. Může například použít podmíněné zarážku zkontrolovat stav programu často volané funkce pouze v případě, že proměnná dosáhne určité hodnoty.

Vypadá jako nastavením zarážky jednorázové spuštění ke kurzoru. Při spouštění je pozastaveno, můžete vybrat řádek ve zdroji a spuštění pokračovat, dokud není dosaženo vybraný řádek. Například je může být smyčka funkce krokování a určit kód ve smyčce pracuje správně. Místo krokování každé opakování smyčky, můžete spustit ke kurzoru, který je umístěn po provedení smyčky.

Někdy je k zobrazení hodnoty proměnné v řádku dat tip nebo jiné okno data. Ladicí program lze zobrazit v textu visualizer, která formátovaný zobrazení hodnoty v okně posuvný řetězce, HTML a Xml.

Příklad 3

V tomto příkladu nastavte zarážku podmíněné přerušení na určité iteraci smyčky a pak spustit ke kurzoru, který je umístěn po smyčce. V textu visualizer také zobrazit hodnotu proměnné.

1. Volání funkce example3 ve funkci modulu. Upravit module funkci a nahradit následující řádek var callTrack = "module function"; s řádkem example3();.

   

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5). Ladicí program přeruší provádění u zarážky v module funkce.

3. Krok do funkce example3. Zvolte Krok do na ladění nabídce (klávesnice: F11) přesuňte do vstupního bodu example3 funkce. Do funkce krokování, dokud jsou vstupní jednu nebo dvě smyčky z pokračovat for bloku. Všimněte si, že by nejsou trvat dlouho postupně procházet všechny 1 000 iterací.

4. Nastavte podmíněné zarážky. V levém hřbetu okno kód, klepněte pravým tlačítkem myši na řádek s += i.toString() + "\n"; a pak zvolte stavu v místní nabídce.

   Vyberte stavu políčko a potom zadejte i == 500; v textovém poli. Zvolte platí a vyberte OK. Bod přerušení umožňuje kontrolovat hodnotu opakování 500th for smyčky. Ikona podmíněné zarážky lze poznat podle jeho bílým křížkem.

   

5. Spusťte na bod přerušení. Na ladění nabídce zvolte Pokračovat (klávesnice: F5). Zastavení i potvrdit, že aktuální hodnota i je 500. Nezapomeňte také, že proměnná s představuje jeden řádek a mnohem delší než okno tip data.

6. Vizualizace řetězcové proměnné. Klepněte na ikonu lupy v tipu dat s.

   Zobrazí se okno Text Visualizer a hodnotu řetězce je zobrazen jako víceřádkové řetězce.

   

7. Spusťte ke kurzoru. Vyberte řádek callTrack += "->example3"; a pak zvolte Spustit ke kurzoru v místní nabídce (klávesnice: Ctrl + F10). Ladicí program dokončí iterací smyčky a potom přeruší provádění na řádku.

8. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Použití spustit ke kurzoru zpět svůj kód a odstranit zarážku

Kurzor se systémem může být velmi užitečné, když jste stupeň do knihovny kódu společnosti Microsoft nebo třetí strany. Krokování kódu knihovny mohou být informativní, často může trvat dlouho. A obvykle vás zajímají mnohem více ve vlastním kódu. Toto cvičení ukazuje, jak to provést.

1. Nastavte bod přerušení volání app.start. V module fungovat, nastavit zarážky na řádkuapp.start()

2. Spustit bod přerušení a krok do funkce knihovny.

   Pokud krok do app.start(), editor zobrazuje kód v base.js. Krok do několika další řádky.

3. Krok přes a z funkce. Jako krok přes (F10) a z (SHIFT + F11) kód v base.js, mohou být k závěru, že zkoumání složitost a délka funkce start je co chcete být způsobem.

4. Nastavte kurzor na kód a spusťte ji. Přepnout zpět default.js soubor v editoru kódu. Vyberte první řádek kódu po app.start() (nelze spustit komentář nebo prázdný řádek). Zvolte Spustit ke kurzoru z místní nabídky. Ladicí program pokračuje v provádění funkce app.start a na Zarážka přeruší provádění.

Proměnná data zobrazení v podokně Locals

Locals windows je stromové zobrazení parametrů a proměnných v řetězci rozsahu aktuálně funkce.

Zobrazení dat proměnných a objektu prototypu

1. Přidáte objekt array funkce modulu. Upravit module funkci a nahradit následující řádek var callTrack = "module function" svar myArray = new Array(1, 2, 3);

   

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5). Ladicí program přeruší provádění bod přerušení. Krok do řádku.

3. Otevřete okno Locals. Na ladění příkaz Windowsa pak zvolte Locals. (Klávesnice: Alt + 4).

4. Prozkoumat místní proměnné, funkce modulu The Locals windows zobrazí proměnné, funkce aktuálně ( module funkci) jako nejvyšší úroveň uzly stromu. Při zadání funkce jazyka JavaScript vytvoří všechny proměnné a zpřístupňuje je hodnota undefined. Funkce, které jsou definovány ve funkci mají jejich text jako hodnotu.

   

5. Krokovat definice callTrack a pole. Proměnné callTrack a pole Hledat v podokně Locals. Krok přes (F10) dvě definice a Všimněte si, že hodnotu a typu pole jsou změněna. Okno Locals zvýrazní hodnoty proměnných, které se změnily od poslední přestávky.

6. Prověřit objekt pole Rozbalit myArray proměnné. Každý prvek pole je uvedena [prototypu] uzel, který obsahuje hierarchii dědičnosti Array objektu. Rozbalte.

   

   • Metody uzel obsahuje seznam všech metod Array objektu.

   • [Prototypu] uzel obsahuje prototyp Object objektu, ze kterého Array je odvozen. [prototypu] uzly mohou být rekurzivní. Každý nadřazený objekt v hierarchii objektu je popsána v [prototypu] jeho podřízených uzlů.

7. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Zkontrolovat data řetěz rozsahu

Řetěz rozsahu funkce zahrnuje všechny proměnné, které jsou aktivní a dostupné funkce. Globální proměnné jsou součástí řetězce rozsahu jsou objekty (včetně funkce), které jsou definovány ve funkci, která definuje funkci aktuálně. Například callTrack proměnné, která je definována v module funkce default.js je dostupná pro všechny funkce, která je definována v module funkce. Každý obor je uvedena v podokně Locals samostatně.

• Proměnné aktuálně funkce jsou uvedeny v horní části okna.

• Každý rozsah funkce v řetězci rozsahu proměnných, které jsou uvedeny v seznamu [oboru] uzel pro funkci. Rozsah funkce jsou uvedeny podle jejich pořadí v řetězci z funkce, která definuje aktuální funkce nejvzdálenějších funkci řetězu.

• [Globals] uzel obsahuje globální objekty, které jsou definovány vně veškerých funkcí.

Řetězy oboru může být matoucí a nejlépe doplněný příklad. V následujícím příkladu v tématu Jak se module funkce vytvoří vlastní obor a jak můžete vytvořit jinou úroveň oboru vytvořením uzavření.

Příklad 4

1. Volání funkce example4 z funkce modulu. Upravit module funkci a nahradit následující řádek var callTrack = "module function" se example4():

   

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5). Ladicí program přeruší provádění bod přerušení.

3. Otevřete okno Locals. Pokud je to nutné ladění příkaz Windowsa pak zvolte Locals. (Klávesnice: Alt + 4). Okno zobrazí seznam všech proměnných a funkcí v module fungovat a obsahuje také [Globals] uzel.

4. Prozkoumejte globální proměnné. Rozbalte [Globals] uzel. Objekty a v globální proměnné byly nastaveny knihovnou Windows JavaScript. Můžete přidat vlastní proměnné na globální rozsah.

5. Krok do example4 a zkoumat jeho místní obor proměnných krok do (klávesnice: F11) example4 funkce. Protože example4 je definován v module funkce, module funkce stane nadřazené oboru. example4můžete volat funkce v module funkci a její proměnné přístup. Rozbalte [oboru] uzlu v okno Locals a Všimněte si, že obsahuje stejné a proměnné module funkce.

   

6. Krok do example4_a a zkoumat jeho místní obor proměnných nadále krok do example4 do volání example4_a. Všimněte si, že místní proměnné jsou nyní z example4_aa že [oboru] uzlu stále proměnných module funkce. Přestože proměnných example4 jsou aktivní, nemůže být dosaženo pomocí example4_a a již nejsou součástí řetězce rozsahu.

7. Krok do multipyByA a zkoumat jeho místní obor proměnných krokovat zbytek example4_a a do řádku var x = multilpyByA(b);.

   Funkce proměnné multipyByA nastavena multiplyClosure funkci, která je uzavření. multipyClosuredefinuje a vrátí vnitřní funkci, mulitplyXbya zachytí (zavře přes) jeho parametrů a proměnných. Vrácené vnitřní funkce v uzavření, má přístup k datům vnější funkce a tak vytvoří vlastní úroveň oboru.

   Pokud krok do var x = multilpyByA(b);, přesunete return a * b; řádku v mulitplyXby vnitřní funkce.

8. V podokně Locals pouze parametr b je uveden jako lokální proměnné v multiplyXby, ale nový [oboru] úroveň byla přidána. Rozbalením tohoto uzlu, zjistíte, že obsahuje parametry, funkce a proměnné multiplyClosure, včetně a proměnná nazývá v prvním řádku multiplyXby. Rychlá kontrola druhého [oboru] uzel odhalí proměnných funkce modulu, který multiplyXby přistupuje v jeho další řádek.

   

9. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Vyhledejte kód pomocí okna zásobník volání

Zásobník volání je datová struktura, která obsahuje informace o funkcích, které jsou spuštěny v aktuálním podprocesu aplikace. Zasáhne zarážku, zásobník volání okna zobrazí seznam všech funkcí, které jsou aktivní v zásobníku. Aktuálně funkce je v horní části okna seznamu zásobník volání. Funkce, která inicializuje podprocesu je v dolní části seznamu. Funkce mezi zobrazit cestu volání od zahájení funkce aktuální funkce.

Kromě zobrazení cesty volání funkce aktuálně, zásobník volání okna lze přejít do kódu v editoru kódu. Tato funkce může být cenným při práci s více soubory a chcete rychle přesunout na určitou funkci.

Příklad 5

V tomto příkladu krok do volání cestu, která obsahuje pět uživatelem definované funkce.

1. Volání funkce example5 ve funkci modulu. Upravit module funkci a nahradit následující řádek var callTrack = "module function"; s řádkem example5();.

   

2. Spusťte na bod přerušení. Spustit ladicí relace pomocí příkazu Spustit ladění na ladění nabídce (klávesnice: F5). Ladicí program přeruší provádění u zarážky ve funkci modulu.

3. Otevřete okno zásobníku volání. Na ladění nabídce zvolte Windowsa pak zvolte Zásobník volání (klávesnice: Alt + 7). Všimněte si, že zásobník volání zobrazí dvě funkce:

   • Globální kód vstupního bodu je module v dolní části zásobníku volání funkce.

   • Anonymní funkce se zobrazí v řádku module funkce kde spouštění je pozastaveno. Toto je horní zásobník volání.

4. Krok do funkce k funkci example5_d. Zvolte Krok do na ladění nabídce (klávesnice: F11) spustit volání v cestě volání klikáním vstupní bod example5_d funkce. Poznámka:, při každém volání funkce, funkce, číslo řádku volání funkce uložena volaná funkce je umístěn v horní části zásobníku. Číslo řádku volání funkce je bod, ve kterém volání funkce pozastavil provádění. Žlutá šipka ukazuje aktuálně vykonávající funkci.

   

5. Přejděte na example5_a kód a nastavit zarážku slouží okno zásobníku volání. Vyberte v okně zásobník volání example5_a položky seznamu a vyberte Přejít ke zdroji v místní nabídce. Editor kódu nastaví jeho kurzoru na řádek vrácenky funkce. Nastavte zarážku na tomto řádku. Všimněte si, že aktuální řádek spuštění nezmění. Editor kurzor se přesunul.

6. Krok do funkce a potom spusťte na bod přerušení. Pokračovat krokování do example5_d. Všimněte si, že při návratu z funkce bude převzata ze zásobníku volání. Stiskněte klávesu F5 pokračovat v provádění programu. Zastavení u zarážky vytvořili v předchozím kroku.

7. Zastavení ladění. Na ladění nabídce zvolte Zastavit ladění (klávesnice: Shift + F5). To Ukončí vaši relaci ladění.

Viz také

Koncepty

Spuštění relace ladění (JavaScript)

Control execution of a Store app in a Visual Studio debug session for Windows Store apps (JavaScript)

Quickstart: Ladění kódu HTML, CSS a JavaScript

Jak aktivovat události pozastavení a obnovení a události na pozadí pro aplikace pro Windows Store v sadě Visual Studio

Ladění aplikací pro web Windows Store