Budući da je web developer u današnjem svijetu znači podupiranje hrpe uređaja i platformi, što ponekad može biti zastrašujući zadatak. Čak i uz najbolje oblikovane kodove koji se pridržavaju najnovijih web standarda, i dalje možete pronaći da dijelovi vaše web stranice možda neće izgledati ili djelovati onako kako ih želite na određenim uređajima ili rezolucijama. Kada se suočite s izazovom podupiranja takvog širokog spektra scenarija, imate prave alate za simulaciju na raspolaganju neprocjenjivo.
Ako ste jedan od mnogih programera koji koriste Mac, Safariov alat za razvojne programere uvijek je bio praktičan. S izdavanjem Safari 9 širina ove funkcionalnosti znatno se proširila, prvenstveno zahvaljujući načinu responzivnog dizajna koji vam omogućuje da pregledate kako će se Vaša web stranica prikazivati na različitim razlučivostima zaslona, kao i na različitim iPad, iPhone i iPod touch buildovima.
Ovaj vodič detalje o aktivaciji reaktivnog dizajna, kao io tome kako ga iskoristiti za vaše razvojne potrebe.
Postavke Safari
Najprije otvorite Safari preglednik.
Kliknite na Safari u izborniku preglednika, koji se nalazi na vrhu zaslona. Kad se pojavi padajući izbornik, odaberite Postavke opcija koja je zaokružena u prikazanom primjeru.
Bilješka: Umjesto gore spomenute opcije izbornika možete koristiti sljedeći prečac na tipkovnici: COMMAND + COMMA (,)
02 od 05Prikaži Razviti izbornik
Sada bi se trebao prikazati dijaloški okvir Safari's Preferences, preklapajući prozor vašeg preglednika. Prvo, kliknite na Napredna ikona označena zupčanikom i smještena u gornjem desnom kutu prozora.
Sada bi trebalo biti vidljivo napredne postavke preglednika. Na dnu je opcija popraćena potvrdnim okvirom, označen Prikaži izbornik Razviti u traci izbornika i zaokružuju se u gornjem primjeru. Kliknite jedan potvrdni okvir da biste aktivirali ovaj izbornik.
03 od 05Unesite način responzivnog dizajna
Nova opcija sada bi trebala biti dostupna na vašem Safari izborniku, koji se nalazi na vrhu zaslona i označen je Razviti, Kliknite ovu opciju.
Kada se prikaže padajući izbornik, odaberite Unesite način responzivnog dizajnakružio u prikazanom primjeru.
Bilješka: Umjesto gore spomenute opcije izbornika možete koristiti sljedeći prečac na tipkovnici:OPTION + COMMAND + R
04 od 05Odgovorni način izvođenja
Aktivna web stranica sada bi trebala biti prikazana u Responsive Design modu, kao što je prikazano u gornjem primjeru. Odabirom jednog od ponuđenih iOS uređaja kao što je iPhone 6 ili jedne od dostupnih razlučivosti zaslona, kao što je 800 x 600, možete odmah vidjeti kako će se stranica prikazivati na tom uređaju ili u toj rezoluciji zaslona.
Osim prikazanih uređaja i rezolucija, također možete uputiti Safari da simulira drugi korisnički agent - poput one iz drugog preglednika - klikom na padajući izbornik prikazan izravno iznad ikona razlučivosti.
05 od 05Razviti Izbornik: Ostale opcije
Osim moda reaktivnog dizajna, izbornik Safari 9's Develop nudi mnoge druge korisne opcije, od kojih su neke navedene u nastavku.
- Otvaranje stranice sa: Omogućuje vam otvaranje aktivne web stranice u bilo kojem drugom pregledniku koji je trenutno instaliran na Mac računalu.
- Korisnički agent: Promjena korisničkog agenta uzrokuje da web poslužitelji prepoznaju vaš preglednik kao nešto drugo osim Safari 9.
- Povežite web preglednika: Web preglednik Safari 9 prikazuje sve resurse web stranice, pružajući mogućnost da proučite CSS informacije, DOM mjerne podatke i strukturu, kao i izvorni izvorni kod.
- Prikaži konzolu pogreške: Jedna od najčešće korištenih opcija u Izborniku za razvoj, ova konzola prikazuje JavaScript, HTML i XML pogreške i upozorenja.
- Prikaži izvor stranice: Omogućuje vam pregled i pretraživanje izvornog koda aktivne web stranice.
- Prikaži resurse stranice: Odabirom ove opcije prikazuju se dokumente, skripte, CSS i ostali resursi s trenutne stranice.
- Prikaži uređivač isječaka: Omogućuje uređivanje i izvršavanje fragmenata koda, za razliku od potpune stranice. Ova značajka je vrlo korisna iz perspektive testiranja.
- Prikaži alat za proširenje: Omogućuje vam da izradite vlastite Safari ekstenzije pakiranjem koda u skladu s tim i dodavanjem metapodataka.
- Započnite snimanje vremenske trake: Zapisuje niz stavki, uključujući zahtjeve za mrežu, izvršavanje JavaScripta, renderiranje stranica i druge događaje za korisnički definirano razdoblje koje se mogu pregledavati unutar WebKit inspektora.
- Prazne predmemorije: Klikom na tu opciju brišu se sve pohranjene predmemorije unutar Safari, a ne samo standardne datoteke predmemorije web stranica.
- Onemogućivanje predmemorije: Uz privremeno spremanje u predmemoriju, resursi se preuzimaju s web-mjesta svaki put kada se radi o zahtjevu za pristup umjesto korištenja lokalne predmemorije.
- Dopusti JavaScript iz polja Smart Search: Onemogućen je prema zadanim postavkama iz sigurnosnih razloga, ova značajka omogućuje unos URL-ova koji sadrže JavaScript u Safari adresnoj traci.
- Prihvatite certifikate SHA-1 kao nesigurne: Kratak za Secure Hash algoritam, SHA-1 hash funkcija dokazano je manje sigurna nego što je izvorno mislilo, stoga dodatak ove opcije u Safari 9.
