A mai világban a webes fejlesztő olyan eszközök és platformok támogatását jelenti, amelyek néha megrázó feladatnak bizonyulnak. Még a legelterjedtebb kóddal is, amely a legfrissebb webes szabványokhoz ragaszkodik, még mindig megtalálhatja, hogy webhelye egyes részei nem tekinthetők meg vagy működnek úgy, ahogyan azt bizonyos eszközökön vagy felbontásokon szeretné. Amikor szembesülünk azzal a kihívással, hogy támogatjuk az ilyen széles körű forgatókönyveket, rendelkezésünkre álló értékes szimulációs eszközök állnak rendelkezésünkre.
Ha Ön egyike a sok programozónak, aki Mac-et használ, a Safari fejlesztői eszközei mindig jól jönnek. A Safari 9 kiadásával a funkció széles sávja jelentősen bővült, elsősorban a Responsive Design Mode használatával, amely lehetővé teszi, hogy előnézeteket készítsen a webhely különböző képernyőfelbontásokon, valamint különböző iPad, iPhone és iPod touch buildeken.
Ez a bemutató részletezi, hogyan aktiválhatja az érzéki tervezési módot, valamint hogy hogyan használja azt az Ön fejlesztési igényeihez.
Safari beállítások
Először nyissa meg a Safari böngészőt.
Kattintson Szafari a böngésző menüjében, amely a képernyő tetején található. Ha megjelenik a legördülő menü, válassza a preferenciák lehetőség a körvonalazott példában.
jegyzet: A fent említett menüpont helyett a következő billentyűparancsot használhatja: COMMAND + COMMA (,)
02. 05. szFejlesztői menü megjelenítése
A Safari Beállítások párbeszédablakot most ki kell mutatni, a böngésző ablakának átfedése. Először kattintson a Fejlett ikont egy fogaskerék képviseli, és az ablak jobb felső sarkában található.
Most meg kell jelennie a böngésző speciális beállításainak. Az alján egy opció kíséri a jelölőnégyzetet Mutassa a Fejlesztés menüt a menüsorban és megkerülni a fenti példában. A menü aktiválásához kattintson a jelölőnégyzetre.
03. oldal, 05. oLépjen be az érzékeny tervezési módba
Mostantól új opciónak kell rendelkezésre állnia a Safari menüben, amely a képernyő tetején található, címkével ellátva fejleszt. Kattintson erre az opcióra.
Ha megjelenik a legördülő menü, válassza a lehetőséget Lépjen be az érzékeny tervezési módbakörvonalazva a példában.
jegyzet: A fent említett menüpont helyett a következő billentyűparancsot használhatja:OPTION + COMMAND + R
04. 05. szÉrzékeny tervezési mód
Az aktív weboldalt mostantól a Responsive Design módban kell megjeleníteni, amint az a fenti példában látható. Azáltal, hogy kiválasztja az egyik felsorolt iOS-eszközöket, például az iPhone 6-at vagy a kijelölt képernyőfelbontásokat, mint például a 800 x 600-at, azonnal megtekintheti, hogy az oldal hogyan fog megjelenni az eszközön vagy a képernyő felbontásában.
A megjelenített eszközökön és felbontásokon kívül a Safari egy másik felhasználói ügynök - például egy másik böngésző - szimulációját is utasíthatja, ha a felbontás ikonok fölött közvetlenül megjelenő legördülő menüre kattint.
05. 05Fejlesztés menü: Egyéb lehetőségek
A Responsive Design Mode mellett a Safari 9 Fejlesztés menüje számos más hasznos lehetőséget kínál, amelyek közül néhány az alábbiakban felsorolva található.
- Nyissa meg a következő oldalt: Lehetővé teszi az aktív weblap megnyitását bármely más böngészőben, amely jelenleg telepítve van a Mac rendszeren.
- Felhasználói ügynök: A felhasználói ügynök módosítása miatt a webszerverek azonosítják a böngészőt, mint más, mint a Safari 9.
- Csatlakoztassa a webfelügyelőt: A Safari 9 Web Inspector megjeleníti az összes weboldal erőforrásait, biztosítva a CSS információk, a DOM mutatók és struktúra, valamint a natív forráskód megismerését.
- A Hiba-konzol megjelenítése: A Fejlesztői menü egyik legszélesebb körben használt beállítása, ez a konzol JavaScript, HTML és XML hibákat és figyelmeztetéseket jelenít meg.
- Oldalforrás megjelenítése: Lehetővé teszi az aktív weboldal forráskódjának megtekintését és keresését.
- Oldalforrások megjelenítése: Ennek az opciónak a kiválasztásával az aktuális oldalon megjelenik a dokumentumok, szkriptek, CSS és egyéb források.
- Snippet-szerkesztő megjelenítése: Lehetővé teszi a kód töredékének szerkesztését és végrehajtását, szemben egy teljes oldalon. Ez a funkció nagyon hasznos a tesztelési szempontból.
- A bővítménykészítő megjelenítése: Lehetővé teszi a saját Safari kiterjesztéseinek kiépítését a kód megfelelő csomagolásával és a metaadatok hozzáadásával.
- Idővonal felvétel indítása: Számos elemet rögzít, beleértve a hálózati kéréseket, a JavaScript-végrehajtást, az oldalak megjelenítését és egyéb eseményeket egy, a WebKit-felügyelőn belül megtekinthető, felhasználó által meghatározott időtartamra.
- Üres Caches: Ha rákattint erre az opcióra, a Safari-ban tárolt összes tárolt gyorsítótárat törli, nem csak a standard webhelyek gyorsítótár fájljait.
- A gyorsítótár letiltása: A gyorsítótár letiltásával az erőforrások minden alkalommal letöltődnek a webhelyről, amikor hozzáférési kérelmet nyújtanak be, szemben a helyi gyorsítótár használatával.
- Engedélyezze a JavaScriptet az intelligens keresési mezőből: Biztonsági okokból alapértelmezés szerint letiltva ez a funkció lehetővé teszi a JavaScript tartalmú URL-ek beírását a Safari címsorába.
- Kezelje az SHA-1 tanúsítványokat bizonytalannak: Rövid a Secure Hash algoritmus számára, az SHA-1 hash függvény bizonyítottan kevésbé biztonságos, mint eredetileg, ezért ezt a lehetőséget a Safari 9-ben.
