Bruk Safari 5 Web Inspector - en gave for webutviklere Mac Tips # 444, 7 juli 2010
Hvis du utvikle nettsteder for en levende kan du bli kjent med Firefox-utvidelse som heter Firebug. Hvis du ikke, bør du installere den umiddelbart. Men Safari har en lignende funksjon bygget rett i. Du trenger bare å vite hvor du finner den. Her ser du hvordan. Les instruksjonene lengre ned på siden eller se videoen for en rask start.
httpv: //www.youtube.com/watch? v = BUQaqn6DM4kPlease abonnere på MacTips kanal. Eller bare besøke denne videoen på YouTube, legge inn kommentarer og rangere det, som det bidrar til å spre ordet om MacTips.
Web Inspector
Hvis du er en webutvikler prøver å analysere eller feilsøke en nettside du vil bli kjent med å se på HTML-kilden og CSS stilark for å finne ut hvordan ting passe sammen.
Men noen ganger er det et mysterium som til nøyaktig hvorfor Det er der Web Inspector kan spare deg for tid og stress: Control (^) klikk på villfaren teksten og velge Inspiser Element fra kontekstmenyen. En vindusrute åpner opp og viser deg akkurat Slå på Utvikle menyen Det første trinnet er å slå på Utvikle-menyen: Utvikle-menyen gir enkle alternativer for ting som å åpne en side med en annen nettleser, invalidiserende bilder eller stiler, og debugging Javascript. Men du kan nå også Inspiser sideelementer. Control (^) klikk på et element på siden for å få opp en kontekstmeny. Velg Inspiser Element. Den nederste delen av Safari-vinduet skyves opp for å avsløre 2 ekstra ruter. Den venstre ruten viser HTML for siden, med elementet du klikket på valgt og markert. Den høyre ruten viser CSS-regler som gjelder for den valgte element. Hold markøren over ulike deler av HTML for å se dem fremhevet i hoveddelen av vinduet. Dobbeltklikk et element i Web Inspector ruten, og du kan redigere den. Gjør endringer og se dem gjenspeiles i hoveddelen av vinduet. Jeg kunne skrive flere flere tips om Web Inspector ruten alene. Hvis du foretrekker å se Web Inspector som et eget vindu, i stedet for bare en rute i hovedvinduet klikker du på Koble fra i eget vindu ikonet nederst til venstre i vinduet (vist forstørret i skjermbildet). Det ser ut som en boks dukker opp fra en annen. For å se en liste over feil og advarsler, klikker Console-knappen (ved siden av frakoblingsknappen). Web Inspector ruten skiller så den nedre delen kan vise eventuelle feil. Safari Web Inspector er et kraftig verktøy for webutviklere, og for alle som er interessert i å se hva som egentlig skjer bak en nettside. Dette Tip har egentlig bare fremhevet sin eksistens. Utforske det mer grundig for å få mest mulig ut av det. Jeg kan skrive mer om Web Inspector på min Knowit blogg. Jeg har allerede skrevet det om å bruke Firebug på en lignende måte i Firefox: Burn gjennom webutvikling med Firebug.
at overskriften er skjøvet ned for lavt, eller at teksten er svart, selv om du setter den til grønt. Og finne alle de riktige biter av HTML og CSS, og sette dem sammen kan være veldig hardt arbeid.
den riktige delen av HTML-koding og Selge CSS-reglene som blir brukt.
Slå på Utvikle-menyen.
Gå til Safari Preferences.
Klikk på fanen Avansert.
Merk av i boksen ved siden av Vis Utvikle-menyen i menylinjen. Et nytt menyelement Safari vises, merket Utvikle.
Lukk vinduet Innstillinger.
Utvikle-menyen tilbyr mye
Inspiser sideelementer.
Inspiser en Element
Merk: du faktisk ikke redigere levende nettside. Eventuelle endringer du gjør blir bare brukt på det du ser på skjermen din, og så er nyttige for testformål. Å faktisk redigere stedet bør du bruke dine vanlige metoder.
Web Inspector-vinduet
Web Inspector ruten.
Web Inspector Toolbar.
Et kraftig verktøy for webutviklere
Fortell oss i kommentarfeltet på nettsiden dine erfaringer med Safari Web Inspector.