01 vum 06
Aktivéiert a benotze bewäerten Designmodus bei Safari 9
Dëse Web-Entwéckler an der heiteger Welt bedeit datt e Bevy de Geräter a Plattformen ze ënnerstëtzen, déi heiansdo beandrockend Aufgab sinn. Och mat der am beschten entwéckelten Code mat den neitsten Webstandards, kënnt Dir nach ëmmer erausfannen, datt Portiounen vun Ärer Websäit keng Aart a Weis wéi se se op gewësse Apparate oder Resolutiounen kucken oder handelen. Wann Dir mat der Erausfuerderung vun esou enger grousser Rei vu Szenarien ze förderen ass, déi mat de richtege Simulatiounsinstrumenten zur Verfügung stinn, kënnt Dir wichtegen.
Wann Dir eng vun de ville Programmierer benotzt, déi e Mac benotzen, ass d'Safari's Developer-Toolset ëmmer nees praktesch komm. Mat der Verëffentlechung vu Safari 9 huet d'Breet vun dëser Funktionalitéit erheblech erweidert, haaptsächlech wéinst dem Responsive Design Mode_, wat Iech erlaabt Iech kucken ze kucken wéi Är Site op verschiddene Bildschirmaufléisungen wéi och op verschidde iPad, iPhone an iPod touch baut.
Dës Tutorial gëtt detailléiert wéi Dir de Responsive Design Mode aktivéieren an wéi Dir se fir Är Entwécklungszäite brauch.
Als éischt solle Äre Safari-Browser opmaachen.
02 vum 06
Safari Preferences
Klickt op Safari am Menu vum Browser, deen am Uewerkäerjeng steet. Wann de Fënster opmaachen ersaat, wielt d' Preferences option_ circled am oberen Beispill.
Maacht weg datt Dir déi folgend Tastaturkombinatioun unzehuelen an de sougenannten Menüpunkt: COMMAND + COMMA (,)
03 vum 06
Show Develop Menu
Den Safari's Preferences dialog muss elo ugewise ginn, deet Dir Är Browserfenster. Éischt klickt op den Advanced Advanced vun engem Gang an e läit an der oberer rechter Ecke vun der Fënster.
Déi erweiterte Präventiounen vum Browser soll elo sichtbar sinn. Am ënnen ass eng Optioun accompagnéiert vun engem Checkbox, label Mark Ze menën an mengem Bar uginn an am obskreß Beispill ass. Klickt op d'Checkbox ewech fir dës Kaart ze aktivéieren.
04 vun 06
Enter Responsive Design Mode
Eng nei Optioun sollt elo an Ärem Safari-Menü sinn, deen am Top vun der Écran steet, déi label entwéckelt sinn . Klickt op dës Optioun. Wann Dir d'Lëscht erof lanscht dréckt, wielt Dir den Responsive Design Mode _ an den eidelste Beispill.
Maacht weg datt Dir déi folgend Tastaturkombinatioun amplaz vu sougenannten Menüpunkt benotzt: OPTION + COMMAND + R
05 vum 06
Responsive Design Modus
D'aktive Websäit soll elo am Responsive Design Mode angezeigt ginn, wéi et am Beispill hei steet. Wann Dir e vun de iOS-Geräter esou wéi de iPhone 6 ausgewielt hutt oder eent vun de beschriwwe Bildschirmléisungen wéi 800 x 600, kënnt Dir direkt kucken wéi d'Säit op dësem Apparat oder an der Display-Resolutioun rendert.
Niewens den Apparaten an de Resolutiounen déi Dir agestallt hutt, kënnt Dir och Safari weisen fir eng aner Benotzer ze simuléieren - wéi z. B. ee vun engem verschiddene Browser - andeems Dir op de Dropdown-Menü direkt iwwert d'Resolutiounskiart klickt.
06 vum 06
Menüen erweichen: Aner Optiounen
Niewent dem Responsive Design Mode, Safari 9's Developmenumm bitt vill aner nëtzlech Optiounen_, e puer déi et hei ënnendrënner steet.
- Opersäits mat: Erlaubt Dir d'aktive Websäit an engem aneren Browser opzemaachen, deen de Moment op Ärem Mac installéiert ass.
- User Agent: Änneren de Benotzer Agent verursaacht Webserver fir Äre Browser als e puer aner wéi Safari 9 ze identifizéieren.
- Connect Web Inspector: De Safari 9's Web Inspector weist all Ressourcen vun der Websäit un, déi d'CSS-Informatioun, d'DOM-Metriken an d'Struktur, wéi och hir Heemecher Quellcode benotzt.
- Feeler Console weisen: Ee vun de meeschten erlaben Optionen am Develop Menu, dës Konsole weist JavaScript, HTML an XML Feeler a Warnungen.
- Informatiounsquell uweisen: Erlaabt Iech de aktuellen Webseite vum Quellcode ze gesinn an ze fannen.
- Ressourcen uweisen weisen: Déi dës Optioun wielt Dokumente, Skripte, CSS an aner Ressourcen vun der aktueller Säit.
- Show Snippet Editor: Gitt d'Fähigkeit fir Fragmenter vum Code auszeféieren an auszeféieren, am Géigesaz zu enger kompletter Säit. Dës Fonktioun ass ganz nëtzlech aus enger Testerperspektive.
- Extension Builder weisen: Erlaabt Iech Är Safari-Extanceren ze bauen andeems Dir Äre Code entsprëcht an Är Metadaten anhëllt.
- Start Timeline Recording: Schreiwt e puer Elementer, dorënner Netzwierker, JavaScript Ausféierung, Page Rendering an aner Ereignisse fir e userdefinéierten Period, all sichtbar am WebKit Inspector.
- Eidel Caches: Klickt op dës Optioun liesen all gespeichert Cache an Safari, net nëmmen déi Standard Websäit Cache Dateien.
- Cache ausschalten: Mat Cache net behënnert, ginn Ressourcen vun enger Websäit erofgeluede wann all Zougangsufro gëtt als opposéiert benotzt fir de lokalen Cache ze benotzen.
- Gitt JavaScript aus Smart Search Field aus: Defaalt vun de Sécherheetsrisiken Deaktivéiert dës Funktion kënnt Dir URLen déi Dir javascript enthält: an der Adressebar vun Safari.
- Gitt SHA-1 Zertifikater als Onsécherheet: Kürze fir Secure Hash Algorithmus, ass d'SHA-1 Hash-Funktion ass manner sécher wéi ursprünglech gedocht_ Den Daach vun dëser Optioun an Safari 9.
Verknäppt Lies
Wann Dir dëse Tutorial nëtzlech fonnt hutt, musst Dir sëcheres eisen aneren Safari 9 Walkthroughs kucken.