MacOS: Ota Web Inspector käyttöön Safarissa

Jos haluat tarkastella verkkosivun lähdekoodia Apple Safarissa macOS Sierrassa, sinun on otettava käyttöön Safari Web Inspector -työkalu seuraavien menetelmien avulla.

Verkkoselainten kehittäjät, kuten Apple, Google jne., tarjoavat valmiiksi rakennettuja työkaluja peruskoodien tarkasteluun. Kehittäjät käyttävät tätä työkalua yleensä virheiden korjaukseen ja muutosten visualisointiin live-verkkosivustoilla häiritsemättä palvelimen todellista koodia. Tämä työkalu on kuitenkin nyt tullut suosituksi sisällönluojien ja digitaalisten asiantuntijoiden keskuudessa, jotka haluavat muokata live-verkkosivustoa henkilökohtaisista tai ammatillisista syistä. Jos olet yksi heistä, lue artikkeli loppuun saadaksesi kaikki tiedot Safari Web Inspectorista ja kuinka tarkastella elementtiä.

Sisältö

• 1 Mikä on Safari Web Inspector?
• 2 Kuinka aktivoida Safari Web Inspector Safarissa 10 ja yllä
• 3 Kuinka käyttää Safari Web Inspectoria macOS:ssä
• 4 Kuinka avata Safari Web Inspector vanhemmissa macOS-versioissa
  • 4.1 Safari Web Inspector: Lopputyypit

Mikä on Safari Web Inspector?

Web Inspector on osa kehitystyökalupakettia, jota Apple tarjoaa verkkosivustojen ja sovellusten kehittäjille ympäri maailmaa. Työkalu on saatavilla sekä macOS- että iOS-laitteille. Kehittäjät voivat vaivatta muokata, optimoida ja virheenkorjata verkkosivustoja saadakseen huipputehokkuuden verkkosivustoistaan.

Web Inspector -työkalu Safarissa tuo suurimman osan verkkosivustoresursseista yhden yhtenäisen käyttöliittymän alle. Työkalu erottelee myös resurssit ja niiden parametrit omissa välilehdissään, jotta et hätäänny niin monista koodeista ja vaihtoehdoista. Web Inspector antaa myös aikajanakuvan verkkosivuston muistista, joten voit virheenkorjata muistia helposti. Lisäksi kehittäjänä voit säätää ja optimoida yli 150 suosituinta CSS-ominaisuutta, joita tarvitset toimivan verkkosivuston kehittämiseen.

Web Inspector -työkalussa saat seuraavat välilehdet verkkosivustoresursseille:

• Elementit
• Konsole
• Lähteet
• Verkko
• Aikajänteet
• Tallennus
• Grafiikat
• Kerrokset
• Tarkastus

Kuinka aktivoida Safari Web Inspector Safarissa 10 ja yllä

Oletusarvoisesti Apple Mac poistaa Web Inspectorin käytöstä Safarissa. Tämä johtuu tarpeettoman häiriön estämisestä verkkoselaimen käyttöliittymässä. Jos olet kuitenkin kehittäjä, sisällönluoja ja asiantunteva Mac-käyttäjä, saatat haluta aktivoida tämän ominaisuuden seuraavien vaiheiden avulla:

• Avaa Safari-sovellus MacBookillasi tai iMacillasi.
• Varmista, että olet klikannut selainta saadaksesi Safari-ikonin Macin työkalupalkkiin.

• Napsauta Safari vasemmassa yläkulmassa ja valitse Asetukset.
• Vaihtoehtoisesti voit käyttää pikanäppäintä Command + , näyttääksesi Asetukset-valikon.
• Asetukset-valikossa sinun on oltava Yleinen -välilehdellä.

• Siirry Advanced -välilehdelle.
• Vielä Proxies-vaihtoehdon alapuolella näet valintaruudun Näytä Kehittäjä-valikkona valikkopalkissa. Ruksaa valintaruutu.

• Nyt Safari Kehittäjä -valikko tulee näkyviin Macin työkalupalkkiin.

Lue myös: Html 4.01

Toistaiseksi olet oppinut, kuinka saat Web Inspector -ominaisuuden Mac Safari -sovelluksessa. Opi alla, kuinka käyttää sitä Safari-selaimessa live-verkkosivustoilla:

Kuinka käyttää Safari Web Inspectoria macOS:ssä

Alla ovat vaiheet Web Inspector -työkalun kutsumiseen verkkokehitykseen, sisällön luomiseen tai muihin tarkoituksiin. Tässä artikkelissa näytän vaiheet käyttäen macOS Montereyn käyttöjärjestelmää. Vaiheet ovat kuitenkin varsin samanlaisia macOS Jaguarista Venturalle.

• Avaa Safari ja vieraile millä tahansa verkkosivustolla, jota haluat tarkastella.
• On kaksi tapaa tarkastella verkkosivuston taustalla olevia HTML/CSS-koodeja tai tehdä muutoksia Apple-kehittäjätyökalun Web Inspectorin avulla. Nämä ovat:
  • Kehittäjä > Näytä Web Inspector.
  • Hiiren oikealla painikkeella > Tarkista elementti.
• Jos haluat käyttää ensimmäistä, mene Macin työkalupalkkiin Safari-selaimelle ja napsauta Kehittäjä -valikkoa.

• Ponnahdusvalikosta napsauta Näytä Web Inspector. Tämän toiminnon pikanäppäin on Option + Command + I.

• Tämä avaa Web Inspector -työkalun verkkoselaimen alaosaan. Näkemäsi koodit ovat koko URL-osoitteen tai verkkosivun koodit, johon pääsit.
• Jos haluat visualisoida taustalla olevan koodin tietystä verkkosivuston elementistä ilman, että avaat koko verkkosivun koodia, valitse tarkasteltava elementti.

• Hiiren oikealla painikkeella napsauta ja valitse Tarkista elementti avautuvasta kontekstivalikosta.
• Safari Web Inspector avautuu.

• Tällä kertaa Safari vie sinut suoraan taustalla olevaan HTML- tai CSS-koodiin tarkasteltavasta elementistä.
• Tässä työkalussa saat HTML- ja CSS-koodit tarkastettavasta verkkosivuston elementistä.

Lue myös: Technipages selittää CSS

Kuinka avata Safari Web Inspector vanhemmissa macOS-versioissa

Oletetaan, että olet Macin käyttäjä, joka on vanhempi kuin Jaguar ja tarvitset Web Inspector -työkalua. Jos et löydä edellä mainittuja vaiheita kyseisestä Macista, voit suorittaa yksinkertaisen komennon Web Inspectorin aktivoimiseksi. Näin se tehdään:

• Avaa Sovellukset ja siirry Utility-kansioon.
• Utility-kansiossa sinun pitäisi löytää Terminaali. Se on macOS-tietokoneiden komentorivi.
• Nyt avaa Terminaali -komentoriviliittymä ja kirjoita seuraava yksinkertainen komento:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Viimeistele komento painamalla Return.
• Nyt voit avata verkkosivun Safarissa ja napsauttaa hiiren oikealla näppäimellä tai pitää painettuna hiiren painiketta missä tahansa sivulla, kunnes kontekstivalikko ilmestyy.
• Siellä napsauta Tarkista Elementti -vaihtoehtoa nähdäksesi verkkosivuston taustalla olevat CSS- ja HTML-koodit.

Safari Web Inspector: Lopputyypit

Nämä ovat menetelmiä ottaa Web Inspector käyttöön Safarissa vaivattomasti. Voit seurata vaiheita itse ja aloittaa kehittämisen tai sisällön luomisen muutamassa minuutissa. Olet oppinut menetelmät Inspector Elementin aktivoimiseksi Safarissa sekä uusissa että vanhoissa macOS-versioissa. Jos unohdin jonkin menetelmän Web Inspectorin saamiseksi ja käyttämiseksi, älä epäröi kertoa siitä kommentoimalla alla.

Seuraavaksi, parhaat koodaussovellukset iPadille.