Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Creative Cloud im Überblick

Mobile Webseite mit Edge Inspect testen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Service Edge Inspect verbindet mobile Endgeräte mit einem Browser auf einem lokalen Computer und stellt Entwicklungstools zum Testen mobiler Websites zur Verfügung.
05:54

Transkript

Wenn man Webseiten untersucht, dann ist das sehr einfach, das am Browser zu machen. Ich kann hier einfach hingehen, auf meine ToolsEntwicklertools, und kann jetzt untersuchen, warum sich ein bestimmtes Element irgendwie seltsam verhält. Und dann habe ich hier alle Informationen wie das Element beispielsweise via JavaScript verändert wird, welche Stile verwendet werden und vieles mehr. Aber wie mache ich das, wenn ich die gleiche Webseite auf einem Tablet aufrufe? Erstens ist es natürlich sehr mühsam, hier jetzt überall in die Gerätebrowser zu gehen und hier die URL einzugeben. Und das heißt, wenn ich hier jetzt meinetwegen auf ARTISTSVIMES klicke, dann müsste ich jetzt die gleiche URL hier auf meinem Gerät eingeben. Und genau da kommt der Service Edge Inspect ins Spiel, den ich jetzt mal auf meinem Tablet starte. Edge Inspect versucht jetzt eine Verbindung herzustellen. Als Erstes muss ich an meinem Computer Edge Inspect auch starten, Gehen wir hier auf Adobe Edge Inspect. Und ich brauche das entsprechende Browser-Plug-In. Also ich muss hier Edge Inspect sozusagen im Chrome-Browser einschalten. Wenn ich es noch nicht installiert habe, dann sollte ich hier mal auf Apps gehen, und entsprechend nach der Edge Inspect-App suchen. Edge Inspect. Und diese Erweiterung für den Chrome-Browser muss ich jetzt entsprechend hier installieren. Genauso muss ich natürlich auch auf mein Tablet gehen und hier den App-Store und Adobe Edge Inspect, das Tool installieren. So, wenn wir das gemacht haben, dann muss ich jetzt nur noch herausfinden, welche Adresse mein Computer zur Zeit benutzt, Der heißt hier "admin-HP" und diese Adresse gebe ich hier als neue Connection ein. Können wir die IP-Adresse oder den Namen eingeben. Geben wir mal die IP-Adresse ein: Eins-sechs-acht, Punkt, eins-sieben-acht, Punkt, sieben-drei. Dann klicken wir hier auf Join. Und hier bekomme ich jetzt einen Code, den muss ich hier jetzt in mein Fenster eingeben, sieben-sieben-zwei-zwei, damit sich nicht jeder hier entsprechend damit verbinden könnte. Das war's eigentlich schon. Edge Inspect läuft jetzt. Und wir können jetzt hier einfach mal auf die Startseite gehen. Wir sehen, dass diese Seite jetzt auch gleich auf dem Tablet geladen wird. Das ist eigentlich eine ganz schöne Sache weil egal, was ich jetzt hier eingebe, Diese Seite, die ich einmal im Browser eingebe, wird jetzt an allen Geräten geladen, die über den Edge Inspect-Service verbunden sind. Ich spare mir also schon mal eine Menge Tipparbeit hier, in die Adresszeilen der einzelnen Gerätebrowser. Aber jetzt gehen wir mal wieder zurück denn ich möchte ja wissen, warum auf dieser Seite vielleicht etwas nicht so funktioniert, wie ich es erwarten würde. und ich kann jetzt hier auf meinem Tablet ganz normal damit arbeiten. Wenn ich jetzt hier den Edge Inspect-Service aufrufe, sehe ich alle angeschlossenen Geräte. Ich könnte also auf mehreren Tablets und Smartphones Edge Inspect jetzt laufen lassen. Die würden alle in der Liste hier auftauchen. Und ich möchte jetzt ganz gerne mal eine Remote Inspection durchführen. Das heißt, ich will jetzt die Entwickler-Tools, die ich vorher für die Webseite im Browser aufgerufen habe für mein Tablet aufrufen. Wir müssen hier einen Moment warten, das dauert ein bisschen. Er muss jetzt hier die angeschlossenen Geräte erkennen. Hier sieht er das jetzt und ich kann dieses Gerät anklicken. Es ist jetzt grün markiert, das heißt, wenn ich jetzt auf Elements klicke, dann holt er mi entsprechend die Stile, die Geräteinformationen, aus der Seite heraus, Und wenn ich mir das jetzt hier mal anschaue... Es dauert immer ein bisschen, bisschen langsamer als der normale Browser, aber hier kann ich jetzt gucken, was sozusagen auf dieser Webseite passiert. Ich sehe jetzt hier alle Elemente. kann die untersuchen, beispielsweise hier, so ein div-Grid-Container. Wenn ich mit der Maus da rüber fahre, hier beispielsweise über diesen header, dann wird der tatsächlich auch hier auf dem Tablet blau markiert und ich sehe die Stile, das heißt zum Beispiel die font-size, und könnte die jetzt hier entsprechend auch verändern. Geben wir mal hier font-size "2em" ein, drüken Return, und das hat dann jetzt auch Auswirkungen auf die Seite selber. Das ist natürlich nur virtuell, also nur eine Vorschau. Aber wenn jetzt irgendetwas nicht stimmt, wenn irgendetwas sich anders verhält, als ich es erwarten würde, dann kann ich auf die Art und Weise hier rausfinden, um welches Element es sich handelt, und was mit diesem Element vielleicht irgendwie fehlerhaft ist. Und das hier setze ich auf den Absatz hier "FEATURED ARTISTS". Und ich sehe hier entsprechende Stile dann angezeigt, die ich nun bearbeiten kann. Das ist die ganze Idee hinter Edge Inspect. Als Hinweis: Das lässt sich auch beispielsweise mit Edge Code in Verbindung bringen. Ich brauche dafür natürlich einen Webserver, wo ich das testen kann. Aber ich kann jetzt hier auf die Live Preview innerhalb von Edge Code gehen, und es startet jetzt hier auch den Browser. Und wenn mein IPad diese Seite jetzt hier entsprechend finden kann, was ein bisschen schwierig ist unter dieser Adresse. Das ist jetzt eine lokale Adresse. Ich bräuchte sozusagen eine Server-Adresse, das heißt, ich müsste hier hingehen in meine Project Settings, und hier einen lokalen Webserver installieren. Zum Beispiel einen Apache-Server, den ich hier lokal ausführen kann, wie xampp oder wamp. Und dann kann ich sozusagen auch mit Edge Code hier testen. Das heißt ich kann Edge Inspect entsprechend hier einschalten. Sehe jetzt: Das IPad ist angeschlossen. kann jetzt hier auf - jetzt habe ich auf Disconnect gedrückt, eigentlich wollte ich den Code mir aufrufen. Und dann kann ich sozusagen jetzt hierüber auch den Code von dieser Webseite testen. Also eine sehr schöne Entwicklungsumgebung, wenn man Webseiten überprüfen muss auf Basis von Tablets und Smartphones. Weil auf dem Gerät selber komme ich ja nicht an die Daten ran. Und über Edge Inspect Verbinde ich sozusagen mein Gerät mit meinem Computer und kann dann hier über diesen "weinre"-Service entsprechend auf dem Gerät die Informationen abrufen.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!