Safaris Web Inspector lader dig undersøge websider på macOS. Det er et praktisk værktøj til både webudviklere og nysgerrige brugere.For at bruge Web Inspector skal du slå det til i Safaris indstillinger.
Når den er aktiveret, åbner Web Inspector en verden af websidedetaljer. Du kan se HTML, CSS og JavaScript, der udgør en side. Dette værktøj hjælper dig med at finde fejl, teste designs og lære, hvordan websteder fungerer.
Web Inspector er nem at bruge. Højreklik på en hvilken som helst del af en webside, og vælg "Inspicer element." Et nyt vindue dukker op med al sidens kode. Du kan ændre tingene og se resultaterne med det samme på siden.
Safaris Arsenal af inspektionsværktøjer
Åbning af Udvikler-menuen
For at udnytte Safaris udviklerværktøjer skal du først aktivere menuen "Udvikl". Naviger tilSafari>Præferencer>Fremskredenog marker afkrydsningsfeltet ud for "Vis udviklingsmenu i menulinjen." Dette låser op for en række værktøjer designet til at forbedre din webudviklings workflow.
1. Klik på Præferencer i Safari-menuen
2. Klik på fanen Avanceret
3. Marker Vis funktioner for webudviklere
4. Udviklingsmenuen vises
Inspicering af elementer med præcision
Værktøjet "Inspicer Element" er din gateway til at forstå en websides struktur. Højreklik på ethvert element og vælg "Inspicer element". Et panel vises, der viser HTML-, CSS- og JavaScript-koden, der er ansvarlig for elementets udseende og adfærd.
Fejlretning af JavaScript-kode
Safaris JavaScript-konsol er afgørende for at identificere og rette fejl i din kode. Brug konsollen til at logge meddelelser, inspicere variabler og gå gennem din kodes eksekvering. Du kan få adgang til konsollen fra Udvikler-menuen eller ved at trykke påOption + Kommando + C.
Foreslået læsning:LØST: Websider ser mærkelige ud i Safari
Overvågning af netværksaktivitet
Fanen Netværk i Safaris udviklerværktøjer giver en detaljeret visning af alle netværksanmodninger, der er lavet af en webside. Dette kan hjælpe dig med at diagnosticere ydeevneflaskehalse, identificere ressourcer med langsom indlæsning og optimere dit websteds indlæsningshastighed.
Test af responsiv design
Safaris responsive designtilstand giver dig mulighed for at simulere forskellige skærmstørrelser og enheder for at sikre, at dit websted ser ud og fungerer korrekt på tværs af en lang række platforme. Denne funktion er uvurderlig til at skabe responsive hjemmesider, der tilpasser sig forskellige skærmopløsninger.
Yderligere udviklerværktøjer
| Værktøj | Beskrivelse |
|---|---|
| Opbevaring | Undersøg og administrer webstedsdata gemt i cookies, lokal lagring og sessionslagring. |
| Tidslinjer | Analyser ydeevnen af et websteds gengivelses-, script- og layoutprocesser. |
| Lag | Visualiser lagene på en webside og identificer gengivelsesproblemer. |
| Ressourcer | Se og rediger de ressourcer (billeder, skrifttyper osv.), der bruges af en webside. |
| Konsol | Se JavaScript-logfiler, advarsler og fejl. |
| Søge | Søg gennem HTML-, CSS- og JavaScript-koden på en webside. |
| Debugger | Gå gennem JavaScript-kode, indstil brudpunkter, og inspicér variabler. |
| Netværk | Overvåg netværksaktivitet, herunder anmodninger og svar. |
| Elementer | Se og rediger HTML og CSS på en webside. |
| Responsivt design | Simuler forskellige skærmstørrelser og enheder. |
| Præstation | Analyser hjemmesidens ydeevne og identificer områder til forbedring. |
| Hukommelse | Overvåg hukommelsesforbrug og opdag hukommelseslækager. |
| Sikkerhed | Se sikkerhedsdetaljer for et websted, herunder certifikater og forbindelsesoplysninger. |
| Revisioner | Få forslag til forbedring af webstedets tilgængelighed, ydeevne og SEO. |
| Web Inspector Extensions | Udvid funktionaliteten af Safaris udviklerværktøjer med tilpassede udvidelser. |
Nøgle takeaways
- Safaris Web Inspector skal være slået til i indstillingerne
- Web Inspector viser koden bag websider
- Du kan bruge Web Inspector til at teste og lære om websteder
Aktivering af Web Inspector i Safari
Web Inspector er et kraftfuldt værktøj til at undersøge websider i Safari. Det lader dig se kode og fejlfindingsproblemer.
Nøglebindingen er:⌘⌥i
Vis udviklingsmenuen i menulinjen
For at bruge Web Inspector skal du først slå menuen Udvikl til. Åbn Safari, og klik på Safari > Indstillinger i den øverste menulinje. Klik på fanen Avanceret. Marker afkrydsningsfeltet ud for "Vis udviklingsmenu i menulinjen."
Udvikl-menuen vises nu i Safaris menulinje. Denne menu har mange nyttige muligheder for webudviklere.
Adgang til Web Inspector-funktioner
Når menuen Udvikl er synlig, kan du åbne Web Inspector. Gå til den webside, du vil tjekke. Klik på Udvikl > Vis webinspektør i menulinjen. Du kan også bruge tastaturgenvejen Option + Kommando + I.
En anden måde at åbne Web Inspector på er at højreklikke på en hvilken som helst del af en webside og vælge "Inspicer Element." Dette åbner inspektøren og fokuserer på det specifikke element.
Web Inspector har flere faner med forskellige værktøjer. Fanen Elementer viser sidens HTML-struktur. Fanen Konsol viser JavaScript-output og fejl. Andre faner hjælper dig med at kontrollere netværksaktivitet, lagerplads og mere.
Brug af Web Inspector til udvikling
Web Inspector er et kraftfuldt værktøj til udviklere, der arbejder med Safari på macOS. Det lader dig se på og ændre websidekode direkte i browseren.
Inspicering og ændring af HTML og CSS
Webinspektør viser en sides HTML og CSS. Du kan se, hvordan elementer indlejres og styles. Klik på et element for at se dets detaljer. Du kan redigere CSS-egenskaber live for at teste ændringer. Dette hjælper med at løse layoutproblemer hurtigt.
Fanen Elementer viser sidestrukturen. Det viser HTML-tags og attributter. Du kan udvide og skjule sektioner for at fokusere på bestemte dele. Dobbeltklik på tekst for at redigere indhold direkte.
Ruden Typografier viser CSS-regler for det valgte element. Du kan slå regler til og fra eller ændre værdier. Nye stilarter kan tilføjes for hurtigt at teste ideer. Disse ændringer er midlertidige og nulstilles, når du genindlæser siden.
Fejlfinding og fejlfinding
Web Inspector hjælper med at finde og rette kodeproblemer. Fanen Konsol viser fejladvarsler og logfiler. Du kan køre JavaScript-kommandoer her for at teste ideer.
Fanen Kilder lader dig indstille brudpunkter i din kode. Dette sætter udførelsen på pause, så du kan gå igennem linje for linje. Du kan se variabler og se, hvordan værdier ændrer sig, mens koden kører.
Fanen Netværk viser alle ressourcer, der er indlæst af siden. Dette inkluderer billedscripts og datafiler. Du kan se indlæsningstider og filstørrelser. Dette hjælper med at finde præstationsproblemer.
Avancerede webinspektørværktøjer
Web Inspector har værktøjer til dybere analyse. Fanen Lager viser data, der er gemt af webstedet, såsom cookies og lokal lagring. Du kan se og redigere disse data.
Fanen Tidslinjer registrerer sideaktivitet over tid. Det viser, når scripts kører, og layouts opdateres. Dette hjælper med at finde langsomme dele af din kode.
Fanen Lag visualiserer sidens sammensatte lag. Dette er nyttigt til at opdage gengivelsesproblemer. Du kan se, hvordan elementer stables og males om.
Disse værktøjer giver udviklere et komplet overblik over deres websider. De gør det nemmere at bygge hurtige og fejlfrie websteder.
Safari inkluderer indbyggede udviklerværktøjer - du behøver ikke installere noget for at fejlfinde problemer i browseren.