Das erwartet euch<\/h3>\n\n- Behind the Curtain \u2013 Die DevTools \u00f6ffnen und in den Device Modus wechseln<\/li>\n
- Let me take a Selfie \u2013 Screenshots und ganzseitige Aufnahmen machen<\/li>\n
- Game of Screens \u2013 Media Queries, Retina und Srcset Bilder debuggen<\/li>\n
- USB Puppet Master \u2013 Remote debugging for President<\/li>\n
- 50 Shades of Chrome<\/li>\n<\/ul>\n
<\/p>\n
Behind the Curtain<\/h2>\nDie DevTools \u00f6ffnen und in den Device Modus wechseln<\/h3>\n
Um die Google Chrome Developer Tools, kurz DevTools, nutzen zu k\u00f6nnen, ben\u00f6tigt ihr einen Google Chrome Browser. Die DevTools werden in der Desktop Version des Browsers immer mitgeliefert. Ge\u00f6ffnet werden diese mit der Tastenkombination CTRL+SHIFT+I oder F12 (Mac: Command+Option+I). Sobald ihr diese ge\u00f6ffnet habt, sollte auch eine Zusatzleiste aufklappen die in etwa so aussieht:<\/p>\n
![\"Chrome](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/10\/screen_1_panel_opened.png\")
<\/a><\/p>\nUm nun in den Device Bereich zu wechseln nutzt ihr die Tastenkombination: CTRL+SHIFT+M (Mac: Command+Option+M). Wenn alles geklappt hat, sollte der \u201cToggle Device Toolbar\u201d-Button aufleuchten. Von GRAU auf BLAU (Der Button befindet sich \u00fcbrigens neben dem Label \u201cElements\u201d. Ihr k\u00f6nnt auch durch draufklicken zwischen der Device Toolbar und dem normalen Modus hin und her wechseln.)<\/p>\n
Die Device Toolbar erlaubt euch den Device Emulator beliebig oft zu konfigurieren.<\/p>\n
![\"record_one_the_device_toolbar\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/10\/record_one_the_device_toolbar.gif\")
<\/a><\/p>\nDie Optionen von Links nach Rechts:<\/p>\n
\n- Device Menu\/Mode<\/strong>: Hier k\u00f6nnt ihr vordefinierte Ger\u00e4te ausw\u00e4hlen oder in den Responsive Modus wechseln und manuell die Aufl\u00f6sung festlegen<\/li>\n
- Breite\/H\u00f6he<\/strong>: Wenn ihr im Responsive Modus seid, k\u00f6nnt ihr hier die gew\u00fcnschte Aufl\u00f6sung in Pixel definieren.<\/li>\n
- Scale Factor\/Zoom (%)<\/strong>: Hier k\u00f6nnt ihr den Zoom Faktor einstellen und zum Beispiel bei kleineren Aufl\u00f6sungen n\u00e4her ran zoomen.<\/li>\n
- DPR<\/strong>: Hier kann die Device Pixel Ratio (DPR) f\u00fcr euer simuliertes Ger\u00e4t festgelegt werden. Bei Ger\u00e4ten mit einem Retina Display werden die @2x, und @3x Bildressourcen geladen. (falls vorhanden).<\/li>\n
- Desktop\/Mobile (no touch)<\/strong>: Hier k\u00f6nnt ihr Desktop Ger\u00e4te konfigurieren welche mit einem Touch Display ausgestattet sind und Maus Events gegen Touch Events austauschen.<\/li>\n
- Online\/Tier\/Offline<\/strong>: Hier k\u00f6nnt ihr vorkonfigurierte Ladezeiten festlegen und die Ladezeit eurer Webseite simulieren. Ihr k\u00f6nnt auch schwache Verbindungen testen oder sogar die Offline Version der Webseite pr\u00fcfen.<\/li>\n<\/ul>\n
<\/p>\n
Website Selfies<\/h2>\nScreenshots und ganzseitige Aufnahmen im Browser<\/h3>\n
Google Chrome erlaubt es euch, den aktuellen sichtbaren Bereich als Screenshot festzuhalten oder die gesamte Webseite von oben bis unten zu fotografieren. Dies ist besonders n\u00fctzlich, wenn man dem Kunden die verschiedenen Designs bei verschiedenen Aufl\u00f6sungen der Webseite zeigen m\u00f6chte.<\/p>\n
Zu dem Aufklappmen\u00fc kommt ihr, wenn ihr euch im Device Toolbar Modus befindet und das kleine Men\u00fc mit den drei Punkten anklickt. In diesem Men\u00fc verbergen sich auch noch weitere n\u00fctzliche Funktionen auf welche wir sp\u00e4ter eingehen werden.<\/p>\n
Wenn ihr ein vorkonfiguriertes Device von Google Chrome DevTools nutzt und dieses ein Device Frame besitzt, wird dieses im \u201cCapture Screenshot\u201d-Modus mit aufgenommen.<\/p>\n
![\"device_frames\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/11\/device_frames.png\")
<\/a><\/p>\nSomit lassen sich Designs nach \u00c4nderungen sofort ablichten und ohne gr\u00f6\u00dferen Aufwand weiterleiten. Die Ger\u00e4te k\u00f6nnen dabei als Landscape oder Portrait dargestellt werden.<\/p>\n
Game of Screens<\/h2>\nMedia Queries, Retina und Bilder mit Srcset debuggen<\/h3>\n
Mit Media Queries k\u00f6nnt ihr die Darstellung eines Dokuments in CSS f\u00fcr verschiedene Ausgabemedien festlegen. Diese Media Queries k\u00f6nnen sich schnell h\u00e4ufen und \u00fcber viele CSS<\/a> Dateien verstreut sein. Das Verhalten bei verschiedenen Aufl\u00f6sungen oder Formaten kann so zu einem richtigen Kreuzzug werden. Die DevTools im Device Mode erlauben aber ein chirurgisches Arbeiten und Google Chrome hilft euch dabei, indem er diese Media Queries visuell darstellt.<\/p>\nIm selben Aufklappmen\u00fc, in welchem ihr schon die \u201cCapture Screenshot\u201d-Funktion vorgefunden habt, befindet sich auch der Punkt: \u201cShow Media Queries\u201d.<\/p>\n
![\"record_three_media_queries\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/11\/record_three_media_queries.gif\")
<\/a><\/p>\nIn der ersten Zeile (in grau) werden euch die von Google erhobenen, g\u00e4ngigsten Aufl\u00f6sungen eingeblendet. Mit einem Klick auf eines dieser Elemente wird die Aufl\u00f6sung automatisch f\u00fcr den Emulator gesetzt.<\/p>\n
Die farbigen Zeilen darunter offenbaren euch die Media Queries aus euren CSS Dateien. Mit einem Rechtsklick auf eines der farbigen Elemente k\u00f6nnt ihr euch anzeigen lassen, wo in eurem Source Code dieses Media Querie gesetzt worden ist. Die DevTools blenden euch Details zu der Definition der Regel ein: min-width\/max-width\/print oder screen und die Ausrichtung, landscape oder portrait.<\/p>\n
Im Device Mode werden Responsive Bilder mit srcset Angaben ebenso ber\u00fccksichtigt wie mit n\u00fctzlichen Informationen versehen. Eine weitere Funktion, die sich in dem Aufklappmen\u00fc des Device Mode versteckt, ist das Ein- und Ausblenden von Linealen.<\/p>\n
USB Puppet Master<\/h2>\nRemote debugging for President<\/h3>\n
Im Device Mode arbeiten wir mit dem sogenannten Device Emulator. Dieser versucht nahe an die Gegebenheiten der jeweiligen angestrebten Ger\u00e4te zu kommen. Allerdings ist dies nur emuliert und entspricht nicht dem Endger\u00e4t. Hier steht uns das Remote Debugging Tool zu Verf\u00fcgung. Es erlaubt uns, Google Chrome Browser am Ger\u00e4t anzusprechen und direkt Feedback zu erhalten. Dazu m\u00fcsst ihr den USB Debugging Modus am Ger\u00e4t aktivieren und es per USB an eurem PC anschlie\u00dfen.<\/p>\n
Wie im Screenshot sichtbar, \u00f6ffnet ihr das Aufklappmen\u00fc ganz rechts oben in der Ecke und w\u00e4hlt: More Tools > Remote Devices > und setzt ein H\u00e4kchen auf \u201cDiscover USB Devices\u201d.<\/p>\n
<\/p>\n
Behind the Curtain<\/h2>\nDie DevTools \u00f6ffnen und in den Device Modus wechseln<\/h3>\n
Um die Google Chrome Developer Tools, kurz DevTools, nutzen zu k\u00f6nnen, ben\u00f6tigt ihr einen Google Chrome Browser. Die DevTools werden in der Desktop Version des Browsers immer mitgeliefert. Ge\u00f6ffnet werden diese mit der Tastenkombination CTRL+SHIFT+I oder F12 (Mac: Command+Option+I). Sobald ihr diese ge\u00f6ffnet habt, sollte auch eine Zusatzleiste aufklappen die in etwa so aussieht:<\/p>\n
Um nun in den Device Bereich zu wechseln nutzt ihr die Tastenkombination: CTRL+SHIFT+M (Mac: Command+Option+M). Wenn alles geklappt hat, sollte der \u201cToggle Device Toolbar\u201d-Button aufleuchten. Von GRAU auf BLAU (Der Button befindet sich \u00fcbrigens neben dem Label \u201cElements\u201d. Ihr k\u00f6nnt auch durch draufklicken zwischen der Device Toolbar und dem normalen Modus hin und her wechseln.)<\/p>\n Die Device Toolbar erlaubt euch den Device Emulator beliebig oft zu konfigurieren.<\/p>\n Die Optionen von Links nach Rechts:<\/p>\n <\/p>\n Google Chrome erlaubt es euch, den aktuellen sichtbaren Bereich als Screenshot festzuhalten oder die gesamte Webseite von oben bis unten zu fotografieren. Dies ist besonders n\u00fctzlich, wenn man dem Kunden die verschiedenen Designs bei verschiedenen Aufl\u00f6sungen der Webseite zeigen m\u00f6chte.<\/p>\n Zu dem Aufklappmen\u00fc kommt ihr, wenn ihr euch im Device Toolbar Modus befindet und das kleine Men\u00fc mit den drei Punkten anklickt. In diesem Men\u00fc verbergen sich auch noch weitere n\u00fctzliche Funktionen auf welche wir sp\u00e4ter eingehen werden.<\/p>\n Wenn ihr ein vorkonfiguriertes Device von Google Chrome DevTools nutzt und dieses ein Device Frame besitzt, wird dieses im \u201cCapture Screenshot\u201d-Modus mit aufgenommen.<\/p>\n Somit lassen sich Designs nach \u00c4nderungen sofort ablichten und ohne gr\u00f6\u00dferen Aufwand weiterleiten. Die Ger\u00e4te k\u00f6nnen dabei als Landscape oder Portrait dargestellt werden.<\/p>\n Mit Media Queries k\u00f6nnt ihr die Darstellung eines Dokuments in CSS f\u00fcr verschiedene Ausgabemedien festlegen. Diese Media Queries k\u00f6nnen sich schnell h\u00e4ufen und \u00fcber viele CSS<\/a> Dateien verstreut sein. Das Verhalten bei verschiedenen Aufl\u00f6sungen oder Formaten kann so zu einem richtigen Kreuzzug werden. Die DevTools im Device Mode erlauben aber ein chirurgisches Arbeiten und Google Chrome hilft euch dabei, indem er diese Media Queries visuell darstellt.<\/p>\n Im selben Aufklappmen\u00fc, in welchem ihr schon die \u201cCapture Screenshot\u201d-Funktion vorgefunden habt, befindet sich auch der Punkt: \u201cShow Media Queries\u201d.<\/p>\n In der ersten Zeile (in grau) werden euch die von Google erhobenen, g\u00e4ngigsten Aufl\u00f6sungen eingeblendet. Mit einem Klick auf eines dieser Elemente wird die Aufl\u00f6sung automatisch f\u00fcr den Emulator gesetzt.<\/p>\n Die farbigen Zeilen darunter offenbaren euch die Media Queries aus euren CSS Dateien. Mit einem Rechtsklick auf eines der farbigen Elemente k\u00f6nnt ihr euch anzeigen lassen, wo in eurem Source Code dieses Media Querie gesetzt worden ist. Die DevTools blenden euch Details zu der Definition der Regel ein: min-width\/max-width\/print oder screen und die Ausrichtung, landscape oder portrait.<\/p>\n Im Device Mode werden Responsive Bilder mit srcset Angaben ebenso ber\u00fccksichtigt wie mit n\u00fctzlichen Informationen versehen. Eine weitere Funktion, die sich in dem Aufklappmen\u00fc des Device Mode versteckt, ist das Ein- und Ausblenden von Linealen.<\/p>\n Im Device Mode arbeiten wir mit dem sogenannten Device Emulator. Dieser versucht nahe an die Gegebenheiten der jeweiligen angestrebten Ger\u00e4te zu kommen. Allerdings ist dies nur emuliert und entspricht nicht dem Endger\u00e4t. Hier steht uns das Remote Debugging Tool zu Verf\u00fcgung. Es erlaubt uns, Google Chrome Browser am Ger\u00e4t anzusprechen und direkt Feedback zu erhalten. Dazu m\u00fcsst ihr den USB Debugging Modus am Ger\u00e4t aktivieren und es per USB an eurem PC anschlie\u00dfen.<\/p>\n Wie im Screenshot sichtbar, \u00f6ffnet ihr das Aufklappmen\u00fc ganz rechts oben in der Ecke und w\u00e4hlt: More Tools > Remote Devices > und setzt ein H\u00e4kchen auf \u201cDiscover USB Devices\u201d.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
Website Selfies<\/h2>\n
Screenshots und ganzseitige Aufnahmen im Browser<\/h3>\n
<\/a><\/p>\nGame of Screens<\/h2>\n
Media Queries, Retina und Bilder mit Srcset debuggen<\/h3>\n
<\/a><\/p>\nUSB Puppet Master<\/h2>\n
Remote debugging for President<\/h3>\n
![\"remote_devices\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/11\/remote_devices.png\")
<\/a><\/p>\n![\"screen-shot-dark\"](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2017\/11\/screen-shot-dark.png\")
<\/a><\/p>\n