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

Článek
06/05/2015

Visual Studio, poskytuje komplexní možnosti ladění pro Windows Store aplikace vytvořené pro systém Windows pomocí JavaScriptu, který obsahuje funkce, které jsou dobře vývojáři aplikace Internet Explorer a aplikace Visual Studio. Toto téma obsahuje přehled funkcí specifických pro tyto aplikace s kurzy, které ukazují, jak používat tyto funkce ladění.

Při ladění, můžete použít interaktivní ladění model, ve kterém můžete zobrazit a pracovat s kódem HTML, CSS a JavaScript, tavené řešení problémů. Můžete také použít tradiční ladění modelu Visual Studio, který umožňuje provádět důležité úkoly, jako je nastavení zarážek a krokování kódu. Nebo můžete použít kombinaci obou těchto modelů.

V následující tabulce je seznam funkcí, které jsou k dispozici pro ladění Windows Store aplikace pomocí jazyka JavaScript a poskytuje odkazy na Další informace.

Průzkumník modelu DOM	Průzkumník modelu DOM umožňuje zobrazení představující interpretace prostředí namísto původního zdrojového kódu stránky. To umožňuje přístup k dynamické informace o stylech, rozložení a atributy vybrané prvky. Můžete změnit styly, rozložení a atributy a okamžitě zobrazit výsledky. Další informace viz: Interaktivní ladění pomocí Průzkumníka modelu DOM Ladění stylů CSS pomocí průzkumníka modelu DOM Ladění rozložení pomocí průzkumníka modelu DOM Zobrazení naslouchacích procesů událostí DOM
Okno konzoly JavaScript	V okně konzoly JavaScript mohou pracovat s tavené app odesíláním zpráv konzoly, zobrazení hodnot proměnných lokální a globální a spuštění kódu jazyka JavaScript. Konzola také zprávy JavaScript chyby a výjimky, kromě modelu DOM (Document Object Model) a Windows Runtime výjimky. Další informace viz: Interaktivní ladění pomocí okna konzoly JavaScript Jednořádkové a víceřádkové režimu v okně konzoly JavaScript Příkazy konzoly jazyka JavaScript
Aktualizovat	Aktualizace umožňuje upravovat zdrojový kód a pak znovu načíst stránky bez zastavení a spuštění ladicího programu. Další informace naleznete v Aktualizace aplikace (JavaScript).
Vyberte prvek	V Průzkumníkovi DOM vyberete prvky DOM klepnutím oblastí aplikace spuštěné v simulátoru nebo hostitelský počítač. Další informace naleznete v Výběr prvků.
Relace ladění	Informace o spuštění relace a nasazení aplikace ladění naleznete: Spuštění relace ladění (JavaScript) Spouštění aplikací pro web Windows Store ze sady Visual Studio
Zarážek, krokování kódu	Ladicí program Visual Studio umožňuje nastavit zarážky a krokovat kód pomocí příkazů jako F5 (spustit ladění nebo pokračovat) a F11 (Krokovat s vnořením). Krokování kódu, můžete interaktivně pracovat s aplikací na základě aktuálního stavu v okně konzoly JavaScript. Další informace viz: Control execution of a Store app in a Visual Studio debug session for Windows Store apps (JavaScript) Interaktivní režim ladění a konec
Profilování připojení	Analýzu výkonu aplikací pro web Windows Store

Toto téma obsahuje také informace o těchto JavaScript debugging úkoly: Povolení výjimky první šanci a Ladění aplikace, které používají Windows Runtime součásti.

Interaktivní ladění pomocí Průzkumníka modelu DOM

DOM Explorer zobrazuje zobrazení zobrazované stránce a DOM Explorer můžete změnit hodnoty a okamžitě zobrazit výsledky. Umožňuje testování pomocí iterační proces bez zastavení a spuštění ladicího programu. Při interakci s stránky pomocí této metody, takže Jakmile naleznete požadovaný kód opravy zastavit debugger a změny zdrojového kódu se nezmění zdrojový kód v projektu.

Tip

Pokud nechcete zastavit debugger, můžete provést změny zdrojového kódu a potom aktualizovat své aplikace pomocí aplikace Windows aktualizovat tlačítka na panelu nástrojů Debug. Další informace naleznete v Aktualizace aplikace (JavaScript).

Průzkumník modelu DOM, můžete použít:

Zkontrolovat tavené kód HTML, CSS a JavaScript a najděte podstrom DOM element.
Dynamicky měnit atributy tavené prvků.
Kontrolovat použití stylů CSS na stránky a dynamicky měnit.

Při ladění aplikace, často potřebujete vybrat prvky v aplikaci Explorer DOM. Při výběru prvek hodnot zobrazených na kartách vpravo automaticky aktualizovat podle vybraného prvku v aplikaci Explorer DOM. Tyto karty jsou: styly, Styly trasování, rozložení, atributy, a události karty. Další informace o výběru prvků naleznete v Výběr prvků.

Tip

Zavření okna Průzkumníka modelu DOM, klepněte na tlačítko ladění > Windows > Průzkumník modelu DOM jej znovu. V okně se zobrazí pouze během relace ladění skriptu.

V následujícím postupu budeme interaktivně pomocí Průzkumníka modelu DOM ladění aplikace procesem. Aplikace, která používá vytvoříme FlipView řízení a poté ladění. Kód bude aplikace obsahuje několik chyb.

Chcete-li použít interaktivní ladění v aplikaci Explorer DOM

Klepnutím na tlačítko Vytvořit nové řešení v sadě Visual Studio soubor > Nový projekt.
Vyberte šablonu JavaScript s názvem Prázdné aplikace a zadejte název projektu, například FlipViewApp.

V prvku BODY default.html přidejte tento kód:

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
             style="display:none">
        <div class="fixedItem" >
            <img src="#" data-win-bind="src: flipImg" />
        </div>
    </div>
    <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

Kód v default.js nahraďte tento kód:

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

Poznámka

Předcházející kód jazyka JavaScript je zapouzdřen v anonymní funkce. Toto zapouzdření Následuje typický model programování v projektu šablony. Při obtékání kód tímto způsobem lze použít WinJS.Namespace.define funkce přístupového kódu prvků z jinde v aplikace.

Vyberte simulátoru z rozevíracího seznamu vedle Spustit ladění tlačítka ladění nástrojů:
Klepněte na tlačítko ladění > Spuštění ladění, nebo stiskněte klávesu F5, vaše aplikace spouštět v režimu ladění.

Tato aplikace spuštěna v simulátoru, ale protože kód obsahuje několik chyb, uvidíte převážně prázdná obrazovka. Výchozí obrázek vlevo nahoře označuje načten něco. Pokud klepnete v této oblasti obrazovky, viz FlipView šipku, která označuje, že vytvoření instance ovládacího prvku, ale ovládací prvek není správnou velikost.

Tip

Můžete stisknout Alt + Tab nebo F12, přepínání mezi Visual Studio a spuštěné aplikace. Pokud pracujete v simulátoru namísto aplikace v místním počítači, klepněte na položku Visual Studio a simulátor tlačítka na hlavním panelu systému Windows, přepínání mezi okny.
V aplikaci Visual Studio, klepněte DOM Explorer kartu.
V okně Průzkumníka modelu DOM výběr prvku DIV oddílu, který obsahuje ID "fView":

Tip

Můžete také vybrat prvku DIV v levém dolním rohu okna konzoly JavaScript zadáním select(fView) na >> Vstupní řádek a stisknutím klávesy Enter.

Šířka a výška jsou správně nastaveny na hodnoty obrazových bodů v aplikaci Explorer DOM oznámení.

Hodnoty, které se automaticky zobrazí na kartách na pravé straně okna aplikace Explorer DOM aktualizovat tak, aby odrážely aktuální prvek v aplikaci Explorer DOM.
Na atributy karta, poklepejte stylu atributu. Upravte výšku a šířku tak, aby obě nastaveny na 100 %. Po stisknutí klávesy Enter nové hodnoty se okamžitě projeví v simulátoru, i když nebyla zastavena ladicí relace.

Důležité

Jak lze aktualizovat hodnoty atributu, můžete také aktualizovat hodnoty, které se zobrazí na styly, Styly trasování, a rozložení karty. Další informace naleznete v Ladění stylů CSS pomocí průzkumníka modelu DOM a Ladění rozložení pomocí průzkumníka modelu DOM.

FlipView Je nyní velikost ovládacího prvku správně. Také funguje správně, ale místo očekávané obrazy uvidíte výchozí obrázky, chybějící obrazy a očekávané obrazy proloženo chybí obrázky.

Je v kódu jazyka JavaScript, který problém způsobil chybu. V další části jsme budete prozkoumat jeden způsob, jak tuto chybu opravit pomocí okna konzoly JavaScript. Pokud chcete pokračovat v ladění, vizInteraktivní ladění pomocí okna konzoly JavaScript

Funkce obnovení můžete upravit kód HTML, CSS a JavaScript a rychle znovu načíst stránky bez zastavení a spuštění ladicího programu. Další informace o funkci obnovení, viz Aktualizace aplikace (JavaScript).

Aktualizovat vaše aplikace při ladění

Aplikace při běhu, přepněte do aplikace Visual Studio.
Default.html otevřít a upravit zdrojový kód změnou výšky a šířky "fView" prvku DIV na 100 %.
Klepněte aplikace Windows aktualizovat tlačítka na panelu nástrojů Debug (nebo stiskněte klávesu F4). Tlačítko vypadá takto: .

Znovu načíst stránky aplikace a simulátor vrátí do popředí.

Jako před, obrazy stále nezobrazují správně. Můžete pokračovat v ladění tuto aplikaci v další části.

Interaktivní ladění pomocí okna konzoly JavaScript

Můžete spustit a aktualizovat kód JavaScriptu v okně konzoly JavaScript. Podobně jako Průzkumník modelu DOM umožňuje okno konzoly JavaScript testování změn bez zastavení a spuštění ladicího programu, tak okamžitě uvidíte výsledky v zobrazované stránce. Když naleznete požadovanou změnu nebo změny poté zastavit debugger a provést tyto opravy zdrojový kód.

Můžete použít okno konzoly JavaScript:

Spouštění skriptů v jednořádkovém nebo víceřádkovém režimu.
Zobrazit informační a chybové zprávy.
Proveďte další úkoly, jako je vymazání obrazovky. Viz Příkazy konzoly jazyka JavaScript úplný seznam příkazů.

Tip

Zavření okna konzoly JavaScript, klepněte na tlačítko ladění > Windows > Konzola JavaScriptu jej znovu. V okně se zobrazí pouze během relace ladění skriptu.

V tomto postupu jsme budete pokračovat v ladění FlipView aplikace, kterou jsme spustit ladění v části Interaktivní ladění pomocí Průzkumníka modelu DOM. Jsme již viděli, že FlipView ovládací prvek pracuje správně, ale nezobrazují se očekávané obrazy.

Ladění kódu jazyka JavaScript v aplikaci FlipView

S FlipView aplikace spuštěné v simulátoru typu Data.items v konzole JavaScriptu okno vstupního řádku a stiskněte klávesu Enter.

Visualizer pro items objekt se objeví v okně konzoly. To znamená, že items vytvořit instanci objektu a je k dispozici v rámci skriptu. V okně konzoly klepnutím pomocí uzlů objektu zobrazení hodnot vlastností (nebo použijte klávesy se šipkami). Pokud jsme na tlačítko dolů do items._data objektu, jak vidět na tomto obrázku jsme najít, že jeho obraz zdrojové odkazy jsou nesprávná, podle očekávání. Výchozí obrázky jsou nadále přítomny v objektu a jsou chybějící obrazy proloženo očekávané obrazy.
Do příkazového řádku zadejte následující příkaz: Data.items.push a stiskněte klávesu Enter. Provádění funkce se zobrazí okno konzoly push z knihovna Windows pro jazyk JavaScript (WinJS) souboru projektu. S trochou šetření pomocí technologie IntelliSense, můžeme zjistit, že jsme se pomocí setAt nahradit výchozí obrázky.
Tento problém vyřešíte interaktivně bez zastavení ladicí relace, otevřete default.js a tento kód z updateImages funkce:
```
pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Zkopírujte a vložte tento kód do konzoly JavaScript vstupního řádku.

Tip

Vložit více řádků kódu do konzoly JavaScript vstupního řádku, řádku konzoly vstupní automaticky přepne do režimu více řádků. Můžete stisknutím kombinace kláves Ctrl + Alt + M zapnutí a vypnutí režimu víceřádkové. Spustit skript víceřádkové režimu, stiskněte klávesy Ctrl + Enter nebo klepněte na symbol šipku v pravém dolním rohu okna.

Opravit push volá funkci v příkazovém řádku nahrazení pages.push s Data.items.setAta klepněte na symbol šipky je skript spuštěn. Opravený kód by měl vypadat takto:

Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

Stiskněte klávesy Ctrl + Alt + M přepnout vstupní konzoly jednořádkovém režimu příkazový řádek a stiskněte kombinaci kláves Ctrl + A vyberte vstup předchozí tak můžete odebrat.
Typ Data.items.length = 3 na řádku a pak stiskněte klávesu Enter. Cizí prvky odebrány z data.
Simulátor znovu zkontrolovat a uvidíte správné obrázky, které se nacházejí na správné FlipView stránek.
V Průzkumníku DOM uvidíte aktualizované prvku DIV a můžete přejít do podstromu najít očekávané prvky IMG.
Zastavit ladění klepnutím na ladění > StopDebugging nebo pomocí kombinace kláves Shift + F5 a opravte zdrojový kód.

Ukázkový kód stránku obsahující úplné default.html opraveno, naleznete v Ladění aplikace ukázkový kód JavaScript.

Interaktivní režim ladění a konec

Můžete používat body přerušení a krok do kódu při používání JavaScriptu ladicí nástroje jako okno konzoly JavaScript. Pokud program, který je spuštěn v debuggeru narazí na zarážku, debugger dočasně pozastaví provádění programu. Při spouštění je pozastaveno, program přepne z režimu spuštění režimu přerušit. Můžete pokračovat v okamžiku spuštění.

Pokud je program v režimu přerušení, stále můžete okno konzoly JavaScript spouštět skripty a příkazy, které jsou platné v aktuálním stavu aplikace. V tomto postupu použijeme FlipView aplikace jsme vytvořili v předchozím postupu k prokázání použití režimu přerušení.

Chcete-li nastavit zarážky a ladit aplikace

V souboru default.html FlipView aplikace, které jste dříve vytvořili, tlačítkem updateImages() funkce a klepněte na tlačítko zarážky > Vložit zarážku.
Vyberte Místního počítače v rozevíracího seznamu vedle Spustit ladění tlačítka Standard nástrojů.
Klepněte na tlačítko ladění > Spuštění ladění, nebo stiskněte klávesu F5.

Aplikace přejde do režimu přerušení dosáhne spuštění updateImages() funkce a aktuální řádek spuštění programu je zvýrazněn žlutě.

Můžete změnit hodnoty proměnných, které bezprostředně ovlivňují stav programu bez ukončení aktuální relaci ladění.
Typ updateImages řádku a stiskněte klávesu Enter. Provádění funkce se zobrazí v okně konzoly.

Jeden řádek funkce Kopírovat do řádku a změnit hodnotu indexu 3:

pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

Stisknutím klávesy Enter spustíte řádek kódu.

Pokud chcete krokovat kód řádek po řádku, stiskněte klávesu F11 nebo stisknutím klávesy F5 pokračovat v provádění programu.
Stisknutím klávesy F5 pokračovat v provádění programu. FlipView Zobrazí aplikace a nyní jeden než výchozí obrázky zobrazit všechny čtyři stránky.

Přepněte zpět do aplikace Visual Studio, stiskněte klávesu F12 nebo Alt + Tab.

Jednořádkové a víceřádkové režimu v okně konzoly JavaScript

Do vstupního řádku okna konzoly JavaScript podporuje jak jednořádkové a víceřádkové režimu. Interaktivní ladění postup v tomto tématu obsahuje příklad použití obou těchto režimech. Můžete stisknutím kombinace kláves Ctrl + Alt + M přepínání mezi režimy.

Jeden řádek režim poskytuje vstupní historie. Vstupní historie můžete procházet pomocí kláves Šipka nahoru a Šipka dolů. Jednořádkovém režimu vymaže vstupního řádku při spuštění skriptů. Spustit skript v jednořádkovém režimu, stiskněte klávesu Enter.

Víceřádkové režimu nevymaže vstupního řádku při spuštění skriptů. Při přepnutí do režimu jeden řádek z víceřádkové režimu můžete vymazat vstupní řádek stisknutím kláves Ctrl + A a poté zadat libovolný znak. Spustit skript víceřádkové režimu, stiskněte klávesy Ctrl + Enter nebo klepněte na symbol šipku v pravém dolním rohu okna.

Výběr prvků

Při ladění aplikace můžete vybrat prvky DOM třemi různými způsoby:

Klepnutím na prvky přímo v okně Průzkumníka modelu DOM (nebo pomocí kláves se šipkami).
Pomocí Vyberte Element tlačítko.
Pomocí select příkaz, který je jedním z Příkazy konzoly jazyka JavaScript.

Při použití Průzkumníka modelu DOM výběr prvků a umístěte ukazatel myši na prvek odpovídající prvek je zvýrazněn v simulátoru nebo zařízení. Musíte klepnout na prvek v DOM Explorer vyberte nebo můžete pomocí kláves se šipkami zvýrazněte položku a vyberte prvky).Můžete také vybrat prvky v aplikaci Explorer DOM pomocí Vyberte element tlačítko. Následující obrázek ukazuje Vyberte Element tlačítko.

Tlačítko Výběr prvku v Průzkumníku modelu DOM

Po klepnutí na tlačítko Vyberte element (nebo stiskněte klávesy Ctrl + B) Toto změní režim výběru tak, aby v DOM Explorer můžete vybrat položku klepnutím v simulátoru nebo aplikace. Režim změní zpět na normální Výběr režimu po jediným klepnutím. Po klepnutí na tlačítko Vyberte element, aplikace se dodává do popředí a kurzor se změní podle nového režimu výběru. V tomto režimu umístěte ukazatel myši na prvky v simulátoru nebo zařízení, barevného obrysu se nad element. Po klepnutí přehledu prvek DOM Explorer vrátí do popředí vybrané určené elementem. Příklad, který ukazuje, jak vybrat pomocí prvků Vyberte element tlačítka, viz Ladění stylů CSS pomocí průzkumníka modelu DOM.

Ladění aplikace, které používají Windows Runtime součásti

Při ladění Windows Store aplikace pomocí jazyka JavaScript, které odkazují na soubory v C# nebo Visual Basic WinMD, nebo zahrnout součásti C++ Runtime systému Windows (soubor WinMD a DLL), můžete určit, které ladicí program používat. Nelze ladit JavaScript a spravovaný nebo nativní kód současně.

Můžete určit, které ladicí program spustit na stránce vlastností ladění projektu. Další informace naleznete v Spuštění relace ladění (JavaScript).

Nasazení aplikace

V některých ladění scénáře pro Windows Store aplikace vytvořené pro systém Windows pomocí JavaScriptu můžete potřebovat nasazení aplikace bez spuštění z aplikace Visual Studio. Například aplikace určené pro příjem sdíleného obsahu může spustit ze sdílené položky uživatelského rozhraní, v takovém případě je třeba ladit z aplikace, která je sdílení obsahu. Aplikace přijímající sdíleného obsahu, můžete nastavit Spustit aplikaci vlastnost na stránce vlastností ladění projektu do Č. Další informace o scénářích zavádění aplikace naleznete v Spuštění relace ladění (JavaScript).

Povolení výjimky první šanci

Pomocí výjimky první možnost můžete určit, že aplikace by při režim přerušení výjimku běhu narazí. Pokud je tato funkce povolena, zadá aplikace i při zpracování výjimek režimu přerušení. Umožňuje zobrazit některé chyby, které by obvykle byly zřejmé při ladění. Některé knihovny proveďte rozsáhlé použití výjimky a při práci s těchto knihoven je vhodné ponechat možnost první výjimky zakázán.

Povolit výjimky z první šanci

V aplikaci Visual Studio, klepněte na tlačítko ladění > Výjimky.
V výjimky dialogovém okně pole, rozbalte položku JavaScript Runtime výjimky uzel.
Vyberte vyvolaných políčko pro jakékoli výjimky, které vždy přerušení ladicího programu na a klepněte na tlačítko OK.

Prohlížeč a Platform Support

Aplikace Visual Studio tools pro JavaScript, DOM Explorer a okno konzoly JavaScript, jsou podporovány následující platformy:

Windows Storeaplikace vytvořené pro Windows 8 pomocí jazyka JavaScript
Internet Explorer 10 systémemWindows 8

Go sem stáhnout Windows 8 a Visual Studio.

Viz také

Sdílet prostřednictvím