Web-kehittäjä nykymaailmassa tarkoittaa laitteiden ja alustojen tukemista, mikä voi joskus osoittautua pelottavaksi tehtäväksi. Jopa parhaiten suunnitellulla koodilla, joka noudattaa uusimpia verkkostandardeja, voit silti löytää, että sivustosi osat eivät välttämättä näytä tai toimivat tavalla, jota haluat niiden käytön tietyissä laitteissa tai päätöslauselmissa. Kun kohtaat haasteen tukea tällaisia laaja valikoima skenaarioita, joilla on oikea simulointi työkaluja käytettävissänne voi olla korvaamaton.
Jos olet yksi monista ohjelmista, jotka käyttävät Macia, Safarin kehittäjätyökalut ovat aina olleet käyttökelpoisia. Safari 9: n julkaisun myötä toiminnon laajuus on laajentunut huomattavasti, pääasiassa Responsive Design -tilan ansiosta, jonka avulla voit esikatsella, miten sivustosi tekee eri näytön tarkkuuksilla sekä erilaisilla iPad-, iPhone- ja iPod touch -rakenteilla.
Tämä opetusohjelma kertoo kuinka aktivoida Responsive Design Mode ja miten se voidaan hyödyntää kehitystarpeistasi.
Safarin asetukset
Avaa ensin Safari-selain.
Klikkaa Safari selaimen valikossa, joka sijaitsee näytön yläosassa. Kun pudotusvalikko tulee näkyviin, valitse Asetukset vaihtoehto kiertynyt esimerkissä.
Huomautus: Voit käyttää seuraavia pikanäppäimiä edellä mainitun valikkokohteen sijasta: COMMAND + COMMA (,)
02/05Näytä kehitysvalikko
Safarin Asetukset-valintaikkunan pitäisi nyt näkyä ja selata selainikkunasi. Napsauta ensin Pitkälle kehittynyt kuvake, jota edustaa vaihde ja joka sijaitsee ikkunan oikeassa yläkulmassa.
Selaimen lisäasetukset pitäisi nyt näkyä. Alareunassa on valintaruutu, johon on merkitty rasti Näytä valikkorivin Kehitä-valikko ja ympyröity edellä olevassa esimerkissä. Aktivoi tämä valikko napsauttamalla valintaruutua kerran.
03/05Anna Responsive Design Mode
Nyt on oltava uusi vaihtoehto Safari-valikossa, joka sijaitsee näytön yläosassa, ja se on merkitty Kehittää. Napsauta tätä vaihtoehtoa.
Kun avattava valikko tulee näkyviin, valitse Anna Responsive Design Modekiertää esimerkissä.
Huomautus: Voit käyttää seuraavia pikanäppäimiä edellä mainitun valikkokohteen sijasta:OPTION + COMMAND + R
04/05Responsive Design Mode
Aktiivinen web-sivu olisi nyt näytettävä Responsive Design -tilassa, kuten yllä olevassa esimerkissä esitetään. Valitsemalla jonkin luettelossa olevista iOS-laitteista, kuten iPhone 6: sta tai jollakin määrätyistä näyttösivustosta, kuten 800 x 600, voit tarkastella heti, miten sivu näkyy kyseisellä laitteella tai näytön tarkkuudella.
Näytettävien laitteiden ja päätöslauselmien lisäksi voit myös ohjata Safariä simuloimaan eri käyttäjäagenttiä - kuten toisesta selaimesta - napsauttamalla pudotusvalikkoa, joka näkyy suoraan resoluutio-kuvakkeiden yläpuolella.
05/05Kehitä valikko: Muut asetukset
Responsive Design -tilan lisäksi Safari 9: n Develop-valikossa on monia muita hyödyllisiä vaihtoehtoja, joista osa on lueteltu alla.
- Avaa sivu: Voit avata aktiivisen WWW-sivun missä tahansa muussa Macissa asennetusta selaimesta.
- Käyttäjä agentti: Käyttäjäagentin muuttaminen aiheuttaa Web-palvelimia tunnistamaan selaimesi muuksi kuin Safari 9: ksi.
- Yhdistä Web-tarkastaja: Safari 9: n Web-tarkastaja näyttää kaikki verkkosivun resurssit, jotka tarjoavat kykyä kerätä CSS-tietoja, DOM-mittareita ja rakennetta sekä sen alkuperäistä lähdekoodia.
- Näytä virhekonsoli: Yksi yleisimmistä vaihtoehdoista Kehitysvalikossa, tämä konsoli näyttää JavaScript-, HTML- ja XML-virheitä ja varoituksia.
- Näytä sivu Lähde: Voit tarkastella ja etsiä aktiivisen Web-sivun lähdekoodia.
- Näytä sivun resurssit: Tämän vaihtoehdon valitseminen näyttää asiakirjat, komentosarjat, CSS ja muut resurssit nykyisestä sivusta.
- Näytä leikkauseditori: Tarjoaa mahdollisuuden muokata ja suorittaa koodinpätkiä, toisin kuin täydellinen sivu. Tämä ominaisuus on erittäin hyödyllinen testauksen näkökulmasta.
- Näytä laajennuksen rakentaja: Voit luoda omia Safari-laajennuksia pakkaamalla koodisi vastaavasti ja lisäämällä metatietoja.
- Aloita aikajanan tallennus: Tallentaa useita kohteita, kuten verkkopyyntöjä, JavaScript-suoritusta, sivunäyttöä ja muita tapahtumia käyttäjän määrittämän ajanjakson aikana, kaikki näkyvissä WebKit-tarkastajan sisällä.
- Tyhjät välimuistit: Napsauttamalla tätä vaihtoehtoa kaikki Safarissa olevat tallennetut välimuistit poistetaan, ei pelkästään tavallisten verkkosivustojen välimuistitiedostoja.
- Poista välimuistit käytöstä: Kun välimuisti poistetaan käytöstä, resurssit ladataan verkkosivustolta joka kerta, kun pääsypyyntö tehdään paikallisen välimuistin käyttämisen sijasta.
- Salli JavaScript Smart Search -kentästä: Oletusarvoisesti pois käytöstä turvallisuussyistä, tämä ominaisuus antaa sinun syöttää URL-osoitteet, jotka sisältävät JavaScriptin Safarin osoiteriville.
- Käsittele SHA-1-sertifikaatit epävarmoina: Lyhyt Secure Hash -algoritmille, SHA-1-hajautusfunktio on osoittautunut epävarmaisemmaksi kuin alunperin ajateltu, joten lisäys tämä vaihtoehto Safari 9: ssä.
