|

Webworker Quick Tipps Vol. 1

Nice-to-Know Nischenwissen für den ausgefuchsten Webdeveloper

1️⃣ - Akkurate Screenshots von Webseiten machen

mit Google Chrome

Um saubere Screenshots im richtigen Viewport aufzunehmen, öffne die Google Chrome Developer Tools, drücke CMD+SHIFT+P bzw.STRG+SHIFT+P und fange an, das Wort screenshot einzugeben. Dann hast du die Option, einen Screenshot des Viewports, der kompletten Seite, eines bestimmten Bereichs, oder von einer DOM-Node zu machen.
Der Screenshot landet dann als PNG in deinem Download-Ordner.

Sep-23-2019-12-03-09

2️⃣ - Caches löschen beim Entwickeln

in Google Chrome

Keine Lust mehr, beim neu Laden einer Seite, an der du gerade entwickelst, immer SHIFT zu drücken, damit keine Caches übrigbleiben? Kein Problem!
Gehe dazu einfach zu den Einstellungen und setze einen Haken bei Network > Disable cache (while DevTools is open).

Sep-23-2019-12-10-30

3️⃣ - Webseiten auf iOS testen - ohne iPad oder iPhone

in macOS

Um mal schnell Websites auf einem iDevice zu testen, brauchst du nur einen Mac mit XCode. Um den Simulator für dich zugänglich zu machen, öffne einmalig XCode und klicke im Top-Menü auf XCode>Open Developer Tool>Simulator. Daraufhin öffnet sich die Simulator App, in der du unter Hardware>Device jedes beliebige iOS-Gerät öffnen kannst. DevTools laufen wie bei angeschlossenen Geräten über Desktop Safari. Und das beste: Auf deinem Mac lokal gehostete URLs funktionieren auch!

Sep-23-2019-12-58-13

To be continued...