Ladění HTML a CSS v aplikacích pro UPW v Visual Studio

Pro aplikace v JavaScriptu Visual Studio komplexní prostředí ladění, které zahrnuje funkce, které jsou známé Internet Explorer a Visual Studio vývojářům. Tyto funkce jsou podporované pro aplikace pro UPW a pro aplikace vytvořené pomocí Visual Studio Tools pro Apache Cordova.

Pomocí modelu interaktivního ladění poskytovaného nástroji pro kontrolu modelu DOM můžete zobrazit a upravit vykreslený kód HTML a CSS. To všechno můžete provést bez zastavení a restartování ladicího programu.

Informace o dalších funkcích ladění JavaScriptu, jako je použití okna konzoly JavaScriptu a nastavení zarážek, najdete v tématu Rychlý start: Ladění aplikací v JavaScriptu a ladění v Visual Studio.

Kontrola živého modelu DOM

Průzkumník modelu DOM vám zobrazí zobrazení vykreslené stránky a pomocí Průzkumník modelu DOM můžete změnit hodnoty a okamžitě zobrazit výsledky. To vám umožní testovat změny bez zastavení a restartování ladicího programu. Zdrojový kód v projektu se při interakci se stránkou pomocí této metody nemění, takže když najdete požadované opravy kódu, můžete provést změny ve zdrojovém kódu.

Tip

Pokud se chcete vyhnout zastavení a restartování ladicího programu při změnách ve zdrojovém kódu, můžete aplikaci aktualizovat pomocí tlačítka Aktualizovat aplikaci Windows na panelu nástrojů Ladění (nebo stisknutím klávesy F4). Další informace najdete v tématu Aktualizace aplikace (JavaScript).

Pomocí následujícího Průzkumník modelu DOM:

  • Přejděte do podstromu elementu DOM a zkontrolujte vykreslený kód HTML, CSS a JavaScript.

  • Dynamicky upravujte atributy a styly CSS pro vykreslené prvky a okamžitě se podívejte na výsledky.

  • Zkontrolujte, jak se na prvky stránky použily styly CSS, a trasujte použitá pravidla.

    Při ladění aplikací často potřebujete vybrat prvky v Průzkumník modelu DOM. Když vyberete prvek, hodnoty, které se zobrazí na kartách na pravé straně Průzkumník modelu DOM se automaticky aktualizují tak, aby odrážely vybraný prvek v Průzkumník modelu DOM. Toto jsou karty: Styly, Vypočítané, Rozložení. Aplikace pro UPW také podporují karty Události a Změny. Další informace o výběru prvků najdete v tématu Výběr prvků.

Tip

Pokud je Průzkumník modelu DOM zavřené, zvolte Ladit a > > Windows Průzkumník modelu DOM ho znovu otevřete. Okno se zobrazí pouze během relace ladění skriptu.

V následujícím postupu si projdeme proces interaktivního ladění aplikace pomocí Průzkumník modelu DOM. Vytvoříme aplikaci, která používá ovládací prvek, a FlipView pak ji odladit. Aplikace obsahuje několik chyb.

Upozornění

Následující ukázková aplikace je aplikace pro UPW. Stejné funkce jsou podporované i pro Cordovu, ale aplikace by byla jiná.

Ladění pomocí kontrola živého modelu DOM

  1. Vytvořte nové řešení v Visual Studio výběrem možnosti Soubor Nový Project > .

  2. Zvolte JavaScript > Windows Universal a pak zvolte Aplikace WinJS.

  3. Zadejte název projektu, například , a zvolte OK a FlipViewApp vytvořte aplikaci.

  4. Do elementu BODY index.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"
        data-win-control="WinJS.UI.FlipView" data-win-options="{
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>
    
  5. Otevřete soubor default.css a přidejte následující šablonu stylů CSS:

    #fView {
        background-color:#0094ff;
        height: 100%;
        width: 100%;
        margin: 25%;
    }
    
  6. Nahraďte kód v default.js tímto kódem:

    (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.setAt(0, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });
            pages.setAt(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });
            pages.setAt(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    

    Následující obrázek ukazuje, co chceme vidět, když tuto aplikaci spustíme. Pokud ale chcete aplikaci dostat do tohoto stavu, musíme nejprve opravit několik chyb.

    Aplikace FlipView zobrazující očekávané výsledky

  7. V rozevíracím seznamu vedle tlačítka Spustit ladění na panelu nástrojů Ladění zvolte Místní počítač:

    Výběr seznamu cílů ladění

  8. Zvolte > Ladit a spustit ladění nebo stiskněte klávesu F5, aby se aplikace spouštěla v režimu ladění.

    Tím se aplikace spustí, ale zobrazí se převážně prázdná obrazovka, protože styl obsahuje několik chyb. První obrázek FlipView se zobrazí na malém čtverci uprostřed obrazovky.

  9. Přepněte Visual Studio a zvolte kartu Průzkumník modelu DOM.

    Tip

    Stisknutím kombinace alt+tabulátoru nebo F12 můžete přepínat mezi Visual Studio a spuštěnou aplikací.

  10. V Průzkumník modelu DOM vyberte element DIV pro oddíl, který má ID "fView" . Pomocí kláves se šipkami zobrazte a vyberte správný element DIV. (Klávesa se šipkou doprava umožňuje zobrazit podřízený prvek prvku.)

    Průzkumník modelu DOM

    Tip

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

    Hodnoty, které se zobrazují na kartách na pravé straně okna Průzkumník modelu DOM se automaticky aktualizují, aby odrážely aktuální prvek v Průzkumník modelu DOM.

  11. Na pravé straně zvolte kartu Počítané.

    Na této kartě se zobrazuje vypočítaná nebo konečná hodnota pro každou vlastnost vybraného prvku modelu DOM.

  12. Otevřete pravidlo šablon stylů CSS s výškou. Všimněte si, že vložený styl je nastavený na 100 px, který se zdá být nekonzistentní s hodnotou výšky 100 % nastavenou pro selektor #fView šablon stylů CSS. Přeškrtnutý text pro selektor indikuje, že před tímto stylem má #fView přednost vložený styl.

    Následující obrázek znázorňuje kartu Počítané.

    Průzkumník modelu DOM Počítané karty

  13. V hlavním Průzkumník modelu DOM poklikejte na vložený styl pro výšku a šířku fView elementu DIV. Hodnoty teď můžete upravit tady. V tomto scénáři je chceme úplně odebrat.

  14. V hlavním okně poklikejte na , stiskněte klávesu Delete a width: 100px;height: 100px; stiskněte Enter. Po stisknutí klávesy Enter se nové hodnoty okamžitě projeví v aplikaci, i když jste relaci ladění zastavili.

    Důležité

    Při aktualizaci atributů v okně Průzkumník modelu DOM můžete také aktualizovat hodnoty, které se zobrazují na kartách Styly, Počítané a Rozložení.

  15. Přepněte na aplikaci tak, že ji vyberete nebo pomocí kombinace kláves Alt+Tab.

    Ovládací prvek se teď zobrazuje větší než velikost Telefon Emulator FlipView obrazovky simulátoru nebo ovládacího prvku. Toto není zamýšlený výsledek. Pokud chcete prošetřit, přepněte zpět na Visual Studio.

  16. V Průzkumník modelu DOM znovu vyberte kartu Počítané a otevřete pravidlo výšky. Prvek fView stále zobrazuje hodnotu 100 %, jak se očekávalo od šablony stylů CSS, ale vypočítaná hodnota se rovná výšce obrazovky aplikace (například 800 px, 667,67px nebo jiné hodnotě), což pro tuto aplikaci nechcete. K prozkoumání v dalších krocích odebereme výšku a šířku fView elementu DIV.

  17. Na kartě Styly zrušte zaškrtnutí vlastností height (výška) a width (šířka) pro #fView selektor šablon stylů CSS.

    Na kartě Vypočteno se teď zobrazuje výška 400 px. Informace značí, že tato hodnota pochází ze selektoru .win-flipview zadaného v souboru ui-dark.css, což je soubor CSS platformy.

  18. Přepněte zpět do aplikace.

    Věci se zlepšily. Existuje ale ještě jeden problém, který je třeba vyřešit: okraje se zdají být příliš velké.

  19. Pokud chcete prozkoumat, Visual Studio a zvolte kartu Rozložení, abyste se podívali na model pole prvku.

    Na kartě Rozložení uvidíte následující:

    • 255 pixelů (posun) a 255 pixelů (okraj) nebo podobné hodnoty v závislosti na rozlišení zařízení.

      Následující obrázek ukazuje, jak vypadá karta Rozložení, pokud používáte emulátor s posunem 100 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 00

      Průzkumník modelu DOM rozložení

      Zdá se, že to není správně. Na kartě Počítané se zobrazují také stejné hodnoty okrajů.

  20. Zvolte kartu Styly a vyhledejte #fView selektor CSS. Tady vidíte hodnotu 25 % pro vlastnost margin.

  21. Vyberte 25 %, změňte ho na 25 px a stiskněte Enter.

  22. Na kartě Styly také zvolte pravidlo výšky pro selektor .win-flipview, změňte 400px na 500px a stiskněte Enter.

  23. Přepněte zpět do aplikace a uvidíte, že umístění prvků vypadá správně. Pokud chcete provést opravy zdroje a aktualizovat aplikaci bez zastavení a restartování ladicího programu, podívejte se na následující postup.

Aktualizace aplikace během ladění

  1. Když je aplikace pořád spuštěná, přepněte na Visual Studio.

  2. Otevřete default.html a upravte zdrojový kód změnou výšky a šířky elementu "fView" DIV na 100 %.

  3. Na panelu nástrojů ladění Windows tlačítko Aktualizovat aplikaci nebo stiskněte klávesu F4. Tlačítko vypadá takhle: Windows tlačítko aplikace.

    Stránky aplikace se znovu načtou a simulátor nebo Telefon Emulator se vrátí na popředí.

    Další informace o funkci Aktualizace najdete v tématu Aktualizace aplikace (JavaScript).

Výběr elementů

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

  • Kliknutím na prvky přímo v okně Průzkumníka modelu DOM (nebo pomocí kláves se šipkami).

  • Pomocí tlačítka vybrat element (CTRL + B).

  • Pomocí select příkazu, který je jedním z příkazů konzole jazyka JavaScript.

    Použijete-li okno Průzkumníka modelu DOM k výběru prvků a umístíte ukazatel myši na prvek, je ve spuštěné aplikaci zvýrazněn odpovídající prvek. Je nutné kliknout na prvek v Průzkumníku modelu DOM a vybrat jej, nebo můžete použít klávesy se šipkami pro zvýraznění a výběr prvků. Můžete také vybrat prvky v Průzkumníku modelu DOM pomocí tlačítka vybrat element . Na následujícím obrázku je znázorněno tlačítko vybrat element .

    Tlačítko vybrat element v Průzkumníkovi modelu DOM

    Když kliknete na vybrat element (nebo stisknete CTRL + B), změní se režim výběru tak, aby bylo možné vybrat položku v Průzkumníkovi modelu DOM kliknutím na ni v běžící aplikaci. Režim se po jednom kliknutí změní zpátky na režim normálního výběru. Když kliknete na vybrat element, aplikace přichází do popředí a kurzor se změní tak, aby odrážel nový režim výběru. Po kliknutí na prvek s přířádkou, se Průzkumník DOM vrátí na popředí se zadaným elementem.

    Předtím, než zvolíte možnost vybrat element, můžete určit, zda chcete zvýraznit prvky ve spuštěné aplikaci přepnutím tlačítka Zobrazit webovou stránku světla . Toto tlačítko je znázorněno na následujícím obrázku. Ve výchozím nastavení se zobrazují světla.

    Zobrazit tlačítko zvýraznění webové stránky

    Pokud se rozhodnete zvýraznit prvky, prvky, na které ukazatel myši v simulátoru zvýrazníte, se zvýrazní. Barvy pro zvýrazněné elementy se shodují s modelem pole, který se zobrazí na kartě rozložení Průzkumníka modelu DOM.

Poznámka

zvýraznění prvků přesunutím myší na ně je pouze částečně podporováno v Emulator Windows Phone.

Viz také