MacOS: Omogućite Web Inspector u Safariju

Ako želite pregledati izvorni kod web stranice u Apple Safariju za macOS Sierra, morat ćete omogućiti alat Safari Web Inspector koristeći sljedeće metode.

Razvijači web preglednika poput Applea, Googlea itd., pružaju alat iz kutije za pregled temeljnih kodova. Razvijači to više koriste za ispravljanje grešaka i vizualizaciju promjena na web stranici bez ometanja stvarnog koda na poslužitelju. Međutim, ovaj alat je sada postao popularan među kreatorima sadržaja i tehnološki potkovanim korisnicima interneta koji žele uređivati ​​živu web stranicu u osobne ili profesionalne svrhe. Ako ste jedan od njih, pročitajte članak do kraja kako biste saznali sve o Safari Web Inspectoru i kako pregledati element.

Sadržaj

• 1 Što je Safari Web Inspector?
• 2 Kako aktivirati Safari Web Inspector u Safariju 10 i novijim verzijama
• 3 Kako koristiti Safari Web Inspector na macOS-u
• 4 Kako otvoriti Safari Web Inspector u starijim verzijama macOS-a
  • 4.1 Safari Web Inspector: Završne riječi

Što je Safari Web Inspector?

Web Inspector je dio paketa razvojnih alata koje Apple nudi web i aplikacijskim programerima širom svijeta. Alat je dostupan za macOS i iOS uređaje. Programeri mogu lako modificirati, optimizirati i otkloniti pogreške na web stranicama kako bi postigli vrhunske performanse za svoje online proizvode.

Alat Web Inspector u Safariju okuplja većinu web resursa pod jednim jedinstvenim sučeljem. Alat također razdvaja resurse i njihove parametre u odvojene kartice kako ne biste bili preplavljeni prevelikim brojem kodova i opcija. Web Inspector također vam daje vremenski pregled memorije web stranice tako da možete lako otkloniti greške u memoriji. Štoviše, kao programer, možete prilagoditi i optimizirati više od 150 popularnih CSS svojstava koja su potrebna za razvoj funkcionalne web stranice.

U alatu Web Inspector, dobivate sljedeće kartice za resurse web stranice:

• Elementi
• Konzola
• Izvori
• Mreža
• Vremenske crte
• Skladište
• Grafika
• Slojevi
• Revizija

Kako aktivirati Safari Web Inspector u Safariju 10 i novijim verzijama

Prema zadanim postavkama, Apple Mac onemogućava Web Inspector u Safariju. To je kako bi se spriječilo nepotrebno zaglavlje na sučelju korisnika web preglednika (UI). Međutim, ako ste programer, kreator sadržaja ili stručni korisnik Mac-a, možda ćete htjeti aktivirati značajku slijedeći ove korake:

• Otvorite aplikaciju Safari na svom MacBooku ili iMac-u.
• Pobrinite se da ste kliknuli na preglednik kako biste dobili ikonu Safarija na alatnoj traci Mac-a.

• Kliknite Safari u gornjem lijevom kutu i odaberite Preferences.
• Alternativno, možete koristiti prečac Command + , da prikažete izbornik Postavke.
• Dok ste unutar izbornika Preferences, morate biti na kartici General.

• Idi na karticu Advanced.
• Točno ispod opcije Proxies, trebali biste vidjeti okvir za potvrdu za Show Develop menu in menu bar. Označite okvir.

• Sada će se izbornik Safari Develop pojaviti na alatnoj traci Mac-a.

Ovako možete aktivirati značajku Web Inspector na svom Mac pregledniku Safari. Koraci su slični za najnovije izdanja macOS-a Ventura, kao i ranija izdanje kao što su Monterey, Big Sur, Catalina, itd., sve do Jaguara.

Pogledajte također: Html 4.01

Do sada ste naučili kako dobiti značajku Web Inspector na aplikaciji Mac Safari. Saznajte u nastavku kako ga koristiti na Safariju za žive web stranice:

Kako koristiti Safari Web Inspector na macOS-u

Pronađite u nastavku korake za pozivanje alata Web Inspector za web razvoj, kreaciju sadržaja ili bilo koje druge svrhe. U ovom članku pokazujem korake koristeći operativni sustav macOS Monterey. Međutim, koraci su prilično slični od macOS Jaguara do Venture.

• Otvorite Safari i posjetite bilo koju web stranicu koju želite pregledati.
• Postoje dva načina za pregled temeljnih HTML/CSS kodova web stranice ili unositi promjene koristeći Apple Developer Tool Web Inspector. To su:
  • Razvoj > Prikaži Web Inspector.
  • Desni klik > Pregledaj element.
• Da biste koristili prvi, idite na alatnu traku Mac-a za preglednik Safari i kliknite na izbornik Razvoj.

• U kontekstnom izborniku koji se pojavljuje, kliknite Prikaži Web Inspector. Prečac za ovu radnju je Option + Command + I.

• Ovo će otvoriti alat Web Inspector u donjoj polovici web preglednika. Kodovi koje vidite se odnose na cijelu URL adresu ili web stranicu koju ste otvorili.
• Ako želite vizualizirati temeljni kod za određeni element na web stranici bez otvaranja koda cijele web stranice, odaberite element koji želite pregledati.

• Desni klik i odaberite Pregledaj element u kontekstnom izborniku koji se otvara.
• Web Inspector Safarija će se otvoriti.

• Ali ovoga puta, Safari će vas odvesti izravno do temeljnog HTML ili CSS koda elementa koji pregledavate.
• U ovom alatu dobivate HTML i CSS kodove elementa web stranice koji pregledavate.

Pogledajte također: Technipages objašnjava CSS

Kako otvoriti Safari Web Inspector u starijim verzijama macOS-a

Recimo, da ste na Mac-u starijem od Jaguara i trebate koristiti alat Web Inspector. Ako ne možete pronaći gornje korake na tom Mac-u, možete izvršiti jednostavnu komandu za aktiviranje Web Inspectora. Evo kako to učiniti:

• Otvorite Aplikacije i idite do Utilities mape.
• Unutar Utilities, trebali biste pronaći Terminal. To je naredbeni prompt macOS računala.
• Sada, pokrenite Terminal sučelje naredbenog retka i upišite sljedeću jednostavnu naredbu:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Pritisnite Return za izvršavanje naredbe.
• Sada možete otvoriti web stranicu u Safariju i desnom tipkom miša kliknuti ili držati dugme miša bilo gdje na stranici dok se ne pojavi kontekstni izbornik.
• Tamo kliknite opciju Pregledaj element kako biste pregledali temeljne CSS i HTML kodove web stranice.

Safari Web Inspector: Završne riječi

Dakle, ovo su metode za omogućavanje Web Inspectora u Safariju bez ikakvih problema. Možete slijediti korake sami i započeti razvoj ili kreaciju sadržaja u nekoliko minuta. Naučili ste metode za aktiviranje inspektora elemenata na Safariju za nova i starija izdanja macOS-a. Ako sam propustio bilo koju metodu za dobivanje i korištenje Web Inspectora, slobodno me obavijestite ostavljanjem komentara u nastavku.

Iduće, najbolje aplikacije za kodiranje za iPad.