Mitä tietää
- Ota käyttöön: Preferences > valitse Advanced-välilehti > vaihda Näytä kehitysvalikko valikkopalkissapäällä.
- Käyttö: valitse Kehitä > Syötä Responsive Design Mode Safari-työkaluriviltä.
Tässä artikkelissa kerrotaan, kuinka reagoiva suunnittelutila otetaan käyttöön Safari 9 - Safari 13 -käyttöjärjestelmässä ja OS X El Capitan -käyttöjärjestelmässä macOS Catalina.
Responsiivisen suunnittelutilan ottaminen käyttöön Safarissa
Safari Responsive Design Mode -tilan ja muiden Safari-kehittäjätyökalujen ottaminen käyttöön:
-
Siirry Safari-valikkoon ja valitse Preferences.
Paina pikanäppäintä Command+ , (pilkku) päästäksesi asetuksiin nopeasti.
-
Valitse Preferences-valintaikkunassa Advanced-välilehti.
Image -
Valitse valintaikkunan alareunassa Näytä kehitysvalikko valikkorivillä -valintaruutu.
Image -
Näet nyt Kehitä Safarin ylävalikkopalkissa.
Image -
Valitse Kehitä > Siirry Responsive Design Mode -tilaan Safari-työkalupalkissa.
Paina pikanäppäintä Option+ Command+ R siirtyäksesi reagoivaan suunnittelutilaan nopeasti.
Image -
Aktiivinen verkkosivu näkyy reagoivassa suunnittelutilassa. Valitse sivun yläreunasta iOS-laite tai näytön tarkkuus nähdäksesi, miten sivu hahmonnetaan.
Image -
Vaihtoehtoisesti voit nähdä, kuinka verkkosivusi hahmonnetaan eri alustoilla käyttämällä tarkkuuskuvakkeiden yläpuolella olevaa avattavaa valikkoa.
Image
Safari-kehittäjätyökalut
Responsive Design Mode -tilan lisäksi Safari Develop -valikko tarjoaa muita hyödyllisiä vaihtoehtoja.
Avaa sivu
Avaa aktiivisen verkkosivun missä tahansa Maciin asennetussa selaimessa.
Käyttäjäagentti
Kun vaihdat käyttäjäagentin, voit huijata verkkosivuston luulemaan, että käytät toista selainta.
Näytä Web Inspector
Näyttää kaikki verkkosivun resurssit, mukaan lukien CSS-tiedot ja DOM-tiedot.
Näytä virhekonsoli
Näyttää JavaScript-, HTML- ja XML-virheet ja -varoitukset.
Näytä sivun lähde
Voit tarkastella aktiivisen verkkosivun lähdekoodia ja etsiä sivun sisällöstä.
Näytä sivun resurssit
Näyttää asiakirjat, skriptit, CSS:n ja muut resurssit nykyiseltä sivulta.
Näytä katkelmaeditori
Voit muokata ja suorittaa koodinpätkiä. Tämä ominaisuus on hyödyllinen testauksen kann alta.
Näytä laajennuksen rakennustyökalu
Auttaa rakentamaan Safari-laajennuksia pakkaamalla koodisi vastaavasti ja liittämällä metatiedot.
Aloita aikajananauhoitus
Voit tallentaa verkkopyyntöjä, JavaScript-suorituksen, sivun renderöinnin ja muita tapahtumia WebKit Inspectorissa.
Tyhjät välimuistit
Poistaa kaikki tallennetut välimuistit Safarista, ei vain tavallisia verkkosivustojen välimuistitiedostoja.
Poista välimuistit käytöstä
Jos välimuisti on poistettu käytöstä, resurssit ladataan verkkosivustolta aina, kun käyttöpyyntö tehdään, toisin kuin paikallista välimuistia käytettäessä.
Salli JavaScript älykkäästä hakukentästä
Oletusarvoisesti poissa käytöstä turvallisuussyistä, tämä ominaisuus mahdollistaa JavaScriptin sisältävien URL-osoitteiden syöttämisen Safarin osoitepalkkiin.
