Dev Tools

Tijdens het ontwikkelen van een mobiele applicatie is het natuurlijk belangrijk om de applicatie te testen op een mobiele viewport. Hiervoor kan gebruik gemaakt worden van de Chrome of Firefox dev tools (F12).

De dev tools bieden de optie om de mobiele applicatie te bekijken op verschillende mobiele toestellen, zowel Android als iOS toestellen. Deze view kan geactiveerd worden door op onderstaande knoppen te drukken.

Figuur 1: Mobile View activeren voor Google Chrome

Figuur 2: Mobile View activeren voor Mozilla Firefox

Als de mobile view geactiveerd is, kan via de device toolbox (bovenaan), het toestel waarop de app draait ingesteld worden. Vie het dropdown menu kunnen verschillende andere toestellen toegevoegd worden. Na het wijzigen van het toestel is het nodig om de pagina te herladen, anders zijn de CSS wijzigingen niet zichtbaar. Deze toolbar ziet er praktisch hetzelfde uit ik beide browsers.

Figuur 3: Device toolbar

prefers-color-scheme

Ionic voorziet zowel lichte als donkere thema's. Het is natuurlijk belangrijk om je app op beide thema's te testen. Zowel Chrome als Firefox voorzien de optie om het thema aan te passen. Voor Chrome is deze optie makkelijk te gebruiken, voor Firefox is net iets meer werk nodig.

Chrome

Als de dev tools open zijn kan je de shortcut ctrl + shift + p gebruiken om get command venster te openen. Hier kan je de tekst 'emulate' intypen en vervolgens kan het gewenste thema geselecteerd worden.

Figuur 4: Emulate Color Scheme

Firefox

In Firefox staat de optie om het thema te manipuleren standaard niet aan. Navigeer naar about:config via de adresbalk. Zoek vervolgens naar devtools.inspector.color-scheme-simulation, en druk op de add (+) knop. Je scherm zou er nu als volgt uit moeten zien.

Figuur 5: Firefox configuration

Deze optie heeft twee nieuwe knoppen toegevoegd aan de Firefox dev tools. Deze zijn enkel zichtbaar als het 'inspector' tabblad geopend is.

Figuur 6: Firefox Theme Switcher