01/06
Aktiválja és használja a felelősségteljes tervezési módot a Safari 9-ben
Webfejlesztés a mai világban olyan eszközök és platformok támogatását jelenti, amelyek néha beidegző feladatnak bizonyulnak. Még a legmegfelelőbb kóddal is, amely a legújabb webes szabványokhoz ragaszkodik, továbbra is megállapíthatja, hogy webhelye egyes részei nem tekinthetők meg vagy működnek úgy, ahogyan azokat 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öztárai mindig jól jöttek. A Safari 9 kiadásával a funkciók szélessége 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.
Először nyissa meg a Safari böngészőt.
02. 06. sz
Safari beállítások
Kattintson a Safari lehetőségre a böngésző menüjében, amely a képernyő tetején található. Ha megjelenik a legördülő menü, válassza ki a fenti példában kerülő Beállítások opciót.
Vegye figyelembe, hogy a fent említett menüpont helyett a következő billentyűparancsot használhatja: COMMAND + COMMA (,)
03/06
Fejlesztő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 az Advanced ikonra, amelyet egy fogaskerék képvisel é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 egy jelölőnégyzetet, amely a menüsorban megjelenik a Fejlesztés megjelenítése menüben, és a fenti példában körvonalazódik. A menü aktiválásához kattintson a jelölőnégyzetre.
04/06
Lépjen be az érzékeny tervezési módba
Mostantól egy új opciónak kell rendelkezésre állnia a Safari menüben, amely a képernyő tetején található, a Fejlesztés címkével. Kattintson erre az opcióra. Ha megjelenik a legördülő menü, válassza a fenti példában körvonalazott Enter Responsible Design Mode parancsot .
Kérjük, vegye figyelembe, hogy a fent említett menüpont helyett a következő billentyűparancsot használhatja: OPTION + COMMAND + R
05/06
Érzékeny tervezési mód
Az aktív weblapot mostantól a Responsive Design módban kell megjeleníteni, amint a fenti példa is mutatja. 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.
06, 06
Fejlesztés menü: Egyéb lehetőségek
A Responsive Design Mode mellett a Safari 9 Fejlesztés menüje számos egyéb hasznos lehetőséget kínál, amelyek közül néhányat felsorolunk.
- 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 a Mac számítógépére van telepítve.
- Felhasználói ügynök: A felhasználói ügynök módosítása miatt a webkiszolgálók 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ési 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: Az opció kiválasztásával az aktuális oldalon megjelenik a dokumentumok, szkriptek, CSS és egyéb források.
- Snippet-szerkesztő megjelenítése: Képes szerkeszteni és végrehajtani a kód töredékeit, ellentétben egy teljes oldallal. Ez a funkció nagyon hasznos a tesztelési szempontból.
- Bővítmény-készítő megjelenítése: Lehetővé teszi a saját Safari-bővítmények létrehozá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érelmeket, a JavaScript-végrehajtást, az oldalak megjelenítését és egyéb eseményeket egy felhasználó által meghatározott időtartamra. Mindez látható a WebKit-felügyelőn belül.
- Üres gyorsítótár: Ha ezt az opciót választja, a Safarion 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.
- A JavaScript engedélyezése az intelligens keresési mezőből: Biztonsági okokból alapértelmezés szerint letiltva ez a szolgáltatás lehetővé teszi a javascriptet tartalmazó URL-ek beírását a Safari címsorába.
- Az SHA-1 tanúsítványokat bizonytalanná téve: Rövid a Secure Hash algoritmus számára, az SHA-1 hash függvény bizonyítottan kevésbé biztonságos, mint az eredetileg gondolkodott, ezért ezt a lehetőséget a Safari 9-ben is hozzáadta.
Kapcsolódó olvasmány
Ha hasznosnak találta ezt az oktatóanyagot, győződjön meg róla, hogy megnézzük a többi Safari 9-es áttörést.
- Hogyan kezelheti a weboldalra mutató értesítéseket
- Weblap exportálása PDF fájlba
- A Safari 9 bővítmények automatikus frissítésének konfigurálása
- A ragasztott webhelyek funkció használata