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>
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.*;
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
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
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
Pro ladění webu v androidím Chromu budete potřebovat nejnovější verzi Chrome (32 nebo novější; nelze debuggovat Chromium – aplikace Internet) jak na Androidu tak i na desktopu (Windows nebo MacOS). Oba prohlížeče by měli být ve stejné verzi – viz poznámka na konci článku.
[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)
Zatím jen odkaz na anglický popis od vývojářů Googlu, až budu mít čas, tak otestuju a lépe popíšu…
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?
