Archiv štítku: debugger

Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

Pokračování textu Obrázek v DIVu bez okrajů

Debugování Cordova aplikace na Androidu

Již víme, jak vzdáleně debugovat Chrome na zařízeních s Android.

Pokud máte aplikaci napsanou pomocí knihovny Cordova, která využívá WebView jádro pro zobrazování HTML obsahu, můžete v ní taktéž zapnout vzdálené debugování.

Stačí do onCreate() metody vaší aplikace přidat tento kód:

if(
    Build.VERSION.SDK_INT >=
    Build.VERSION_CODES.KITKAT) {
        this.appView
          .setWebContentsDebuggingEnabled(true);
}

Z kódu je vidět, že debugování je dostupné jen v API 4.4 a výše (momentálně tedy 4.4.x a 5.0.x), takže musíte mít nový nebo updatovaný telefon (nebo testovat na nejnovějších emulátorech), ale i tak je to určitě velká pomoc, pokud potřebujete ověřit, jak vypadá DOM vygenerovaný pro aplikaci nebo které JavaScripty se spouští za běhu aplikace.

Třída Build se nachází v API, takže budete potřebovat naimportovat příslušnou knihovnu:

import android.os.Build;

//není potřeba, pokud již máte:
import android.os.*;
//nebo
import android.*;

Testování localhostu na mobilních zařízeních

Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.

Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html

Pokračování textu Testování localhostu na mobilních zařízeních

Debugování starších Internet Explorer a Windows Phone

Pokud potřebujete ověřit své stránky například v Internet Exploreru 7 nebo na mobilním Windows Phone 8, může vám k tomu posloužit nejnovější Internet Explorer 11, který lze nainstalovat do Windows 7 a 8. Pokračování textu Debugování starších Internet Explorer a Windows Phone

Debugování Opera Mobile na Androidu

Opera Mobile pro Android (neplést s Opera Mini nebo Opera Classic) využívá pro debugování stejný princip jako Chrome – nejprve si tedy budete muset zprovoznit debugování Chrome na Android.

Pak spusťte na Androidu aplikaci Opera (testováno s verzí 19) a zadejte url opera://debug/ a zaškrtněte Enable. Pokračování textu Debugování Opera Mobile na Androidu

Emulátor iPadu a iPhonu (na MacOS)

[Aktualizováno]: obsahuje nový způsob stažení a spuštění iOS Simulátoru. V textu jsem ponechal i části původního textu pro případ, že nový postup není možné zcela použít pro starší verze MacOS. Současný text platí pro MacOS X Yosemite.

Pokud chcete emulovat a debugovat své stránky na iPadu a iPhonu a máte k dispozici libovolný počítač Mac (iMac, MacBook apod.), můžete si do něj nainstalovat emulátor. Pokračování textu Emulátor iPadu a iPhonu (na MacOS)

CSS3 styly nefungují bez debuggeru?

Máte nějaký CSS3 styl (např. animaci, rámeček, apod.), který v některém prohlížeči uživatelům nefunguje, ale jakmile otevřete debugger (DOM inspector, Firebug, apod.), tak záhadně fungovat začne?

Problém se stylem je v tom, že některé prohlížeče pro určité styly přímo vyžadují vlastní prefix (např. „-moz-„, „-webkit-„, „-o-„, „-ms-„) a bez něj styl nefunguje. Problém s debuggerem je ten, že v okamžiku jeho otevření začne opravovat některé CSS styly tak, aby je mohl co nejlépe zobrazit. A jednou z oprav je to, že všechny prefixované styly převede na neprefixované a tím donutí prohlížeč použít původní neprefixovaný styl.

Pokud předchozímu odstavci nerozumíte, tak to neřeště – prostě si pamatujte, že některé styly vyžadují prefixy. Pokračování textu CSS3 styly nefungují bez debuggeru?