Kuinka aktivoida ja käyttää reagoivaa suunnittelutilaa Safarissa

Sisältö

• Käytä kehittäjän työkaluja Applen selaimella
• Kuinka ottaa käyttöön reagoiva muotoilutila Safarissa
• Safari -kehittäjän työkalut

Käytä kehittäjän työkaluja Applen selaimella

Verkkokehittäjille on tärkeää varmistaa, että verkkosivustot ja verkkosovellukset tukevat useita laitteita ja alustoja. Applen Safari-selaimeen sisältyy Responsive Design -tila, jonka avulla voit esikatsella sitä, kuinka sivustosi näyttää eri näytön tarkkuuksilla ja erilaisilla iPad-, iPhone- ja iPod touch-rakennelmilla.

Tämän artikkelin ohjeet koskevat Mac OS -käyttöjärjestelmää Safari 13. Responsiivinen suunnittelu -tila ei ole käytettävissä Windows-versiossa.

Kuinka ottaa käyttöön reagoiva muotoilutila Safarissa

Safarin kehittäjätyökalujen ja Responsive Design -tilan ottaminen käyttöön:

1. valita Safari > Asetukset Safari-työkalurivillä.

   

   
   

   Voit käyttää myös pikanäppäintä Komento+Pilkku (,) päästäksesi Asetukset-valikkoon.

2. Valitse Asetukset-valikosta Pitkälle kehittynyt välilehti ja valitse vieressä oleva valintaruutu Näytä Kehitä-valikko valikkopalkissa. Uuden vaihtoehdon pitäisi olla nyt saatavana Safari-työkalurivillä näytön yläosassa.

   

3. valita Kehittää > Siirry reagoivaan suunnittelutilaan Safari-työkalurivillä.

   

   
   

   Voit käyttää myös pikanäppäintä Vaihtoehto+Komento+R siirtyäksesi Responsive Design -tilaan.

4. Aktiivinen verkkosivu tulisi nyt näyttää reagoivassa suunnittelutilassa. Valitse sivun yläosasta iOS-laite tai näytön resoluutio nähdäksesi kuinka sivu tulee.

   

Voit myös määrätä Safarin simuloimaan erilaisia ​​käyttäjäagentteja avattavan valikon avulla suoraan tarkkuuskuvakkeiden yläpuolella.

Safari -kehittäjän työkalut

Responsiivisen suunnittelutilan lisäksi Safarin Kehitys-valikossa on monia muita hyödyllisiä vaihtoehtoja, kuten:

• Avaa sivu: Avaa aktiivinen verkkosivu missä tahansa muussa selaimessa, joka on asennettu Mac-tietokoneellesi.
• Käyttäjä agentti: Käyttäjäagentin vaihtaminen saa Web-palvelimet tunnistamaan selaimesi jollain muulla kuin Safarilla.
• Yhdistä Web-tarkastaja: Näytä kaikki verkkosivun resurssit, mukaan lukien CSS-tiedot ja DOM-tiedot.
• Näytä virhekonsoli: Näytä JavaScript-, HTML- ja XML-virheet ja varoitukset.
• Näytä sivulähde: Tarkastele ja etsi aktiivisen verkkosivun lähdekoodia.
• Näytä sivuresurssit: Näytä nykyisen sivun asiakirjat, skriptit, CSS ja muut resurssit.
• Näytä katkelmaeditori: Muokkaa ja suorita koodin fragmentit. Tämä ominaisuus on erittäin hyödyllinen testauksen kannalta.
• Näytä laajennusrakentaja: Luo omat Safari-laajennuksesi pakkaamalla koodisi vastaavasti ja lisäämällä metatiedot.
• Aloita aikajanan tallennus: Tallenna verkkopyynnöt, JavaScriptin suorittaminen, sivun renderointi ja muut tapahtumat WebKit Inspectorissa.
• Tyhjät välimuistit: Poista kaikki Safarin tallennetut välimuistit, ei vain tavalliset verkkosivustovälimuistitiedostot.
• Poista välimuistit käytöstä: Kun välimuisti on poistettu käytöstä, resurssit ladataan verkkosivustolta joka kerta, kun pääsypyyntö tehdään paikallisen välimuistin sijaan.
• Salli JavaScripti älyhaun kentästä: Poistettu käytöstä oletuksena turvallisuussyistä. Tämän ominaisuuden avulla voit kirjoittaa JavaScriptiä sisältäviä URL-osoitteita Safarin osoitepalkkiin.
• Kohtele SHA-1-varmenteita epävarmoina: Lyhenne sanoista Secure Hash Algorithm, SHA-1-hash-toiminto on osoittautunut vähemmän turvalliseksi kuin alun perin ajateltiin, joten tämän vaihtoehdon lisääminen Safariin.