En veiledning til Googles webverktøy

Sep 13, 2025
hvordan
[1. 3]

Big G, AKA Google, gir utviklere en mengde verktøy som er ment å lage webdesign enkelt. I denne artikkelen går vi gjennom noen av de beste Google-verktøyene der ute, og viser deg hvordan du bruker dem i webdesign og utviklings arbeidsflyt.

Vi dekker en rekke forskjellige Webdesignverktøy Her, så vi har delt innholdet i sider for å gjøre det enklere å navigere. Bruk rullegardinmenyen over for å hoppe til delen du er interessert i. Vil du designe et nettsted med en annen leverandør? Våre guider til Web Hosting. og toppen Nettstedbygger Har du dekket.

Så lenge nettsteder er unminified, kan innholdet deres ses av noen. Chrome Devtools gjør dette enkelt - på denne siden viser vi deg hvordan du ser og bytter HTML, CSS og JavaScript. På Side 2 , Vi tar en nærmere titt på hvordan du bruker Googles debugger for å fikse kodingsfeil raskt og enkelt. Side 3 Setter spotlighten på Googles enhetsmodus, som du kan bruke til å teste de mobile versjonene av sidene dine via din stasjonære maskin. På Side 4 Vi introduserer det grunnleggende du må være oppmerksom på å begynne å implementere materielle designprinsipper i designene dine. Endelig, Side 5 Ser på progressive webapper, den siste store tingen i webdesignindustrien.

Se og endre HTML, CSS & AMP; JS.

Så lenge en nettside er ikke blitt minnet, kan den ses av alle som bruker Chromes utviklerverktøy. Først av alt, sjekk versjonen av Chrome - følgende trinn fungerer på versjon 70.0.3538.67 som kjører på en 64-bits Ubuntu arbeidsstasjon. Deretter åpner du Hamburger-menyen og klikker på Flere verktøy og GT; Utviklerverktøy.

Launch Google's Developer Tools

Start utviklerverktøyene, og du bør se en skjerm som ligner på dette [klikk på ikonet øverst til høyre for å forstørre]

Nettleseren reagerer ved å åpne en rute på venstre side av skjermen. Den skal endres i første trinn - som standard tilordner nettleseren ikke nok skjerm eiendomsmegling. Når du er ferdig, ser skjermen ut som den som vises i bildet ovenfor.

Som standard starter utviklerverktøyene opp med konsollfanen som er lastet inn. Den inneholder utgangen som sendes ut av invokasjoner av konsollloggingsfunksjonen. Rendering feil også vises der - Hvis du finner røde linjer, er noe galt i markeringen eller koden på siden din. Et klikk på den lille nettadressen 'på høyre side bringer deg til linjen, som førte til at meldingen skulle vises.

Kontroller markeringen

Hvis interessen fokuserer på Markup, bruk fanen Elements-fanen vist på figuren. Det viser markeringen nettleseren gjør det for tiden. Du kan utvide og komprimere den på en måte som ligner på en trevisning - skjul unødvendige elementer for å forhindre sensorisk overbelastning.

De raison d'etre av fanen er visningen av CSS-strukturen. Widgets 'Samle' CSS fra ulike kilder, som vises pent og ved siden av hverandre. I tilfelle av eksemplet som er vist på figuren, ser vi at stilene ble levert fra både "DIV" -taggen og "hovedoppslaget på siden.

Chrome lar deg redigere de fleste attributter på flyet. Dobbeltklikk på noen av de svarte tekstene for å transformere etiketten til en redaktør, og skriv deretter inn den nylig ønskede verdien og trykk på Return-tasten. Renderen plukker opp disse endringene og bruker dem til Dom på fly. Dette er spesielt nyttig når du prøver å optimalisere farger eller plasseringsproblemer; Å måtte laste på en side for å forhåndsvise endringer blir kjedelig.

Google's web tools

En gul bakgrunn indikerer at vinduets innhold er gjenstand for filtrering [Klikk på ikonet øverst til høyre for å forstørre]

Til slutt, ta en titt på tekstboksen på toppen av ruten. Det gjør at du kan filtrere markeringselementene som vises: for eksempel, skriv inn 'MDC' for å begrense visningen til alle stiler arvet fra det materielle designbiblioteket som brukes senere i denne artikkelen. Når et filter er aktivt, vises en gul bakgrunn på en måte som ligner den som er vist ovenfor.

Utfør en detaljert analyse

I moderne nettlesere er DOM ikke begrenset til "statiske" presentasjonsproblemer. Det styrer også hendelsesflyt og plassering. Bytt til den beregnede kategorien for å avsløre en liste over "dimensjonale" egenskaper. Dette er utrolig nyttig når du arrangerer widgets på skjermen på en eksakt måte.

Flytting til fanen Hendelser Lyttere gir en oversikt over hendelsesstrømmer. Bruk denne funksjonen til å raskt luke ut problemer relatert til brukerinteraksjon: Hvis en hendelse ikke utløser, starter du ved å sjekke hendelseshåndteringsforbindelsene.

Endelig lar egenskapsvinduet deg ta en titt på attributter som er lagret i de enkelte DOM noder. Hvis du noen gang har brukt mye tid på å jakte ned dom-manipulerende kode, er verdien klar.

Neste side: Slik bruker du Googles debugger

  • 1
  • 2.
  • 3.
  • 4.
  • 5.

Nåværende side: Se og endre HTML, CSS & AMP; JS.

hvordan - Mest populære artikler

Hvordan sette opp og optimalisere Smugmug Storefront

hvordan Sep 13, 2025

[1. 3] (Bilde Kreditt: Andre Furtado på Pexels) En enkel nettsidebygger som også fungerer som en av Beste Cl..

Lag en scene med Renderman for Maya

hvordan Sep 13, 2025

[1. 3] (Bildekreditt: Jeremy Heintz) I denne rendermannen for Maya-opplæring, vil vi dekke en rekke emner som starter..

Hvordan lage en lagdelt parallaxeffekt på nettstedet ditt

hvordan Sep 13, 2025

[1. 3] (Bildekreditt: www.beargrellls.com) Parallax bevegelse, begrepet bevegelige lag med forskjellige hastigheter, h..

Hvordan bygge en progressiv web app

hvordan Sep 13, 2025

[1. 3] Mobil står nå for over halvparten av webens trafikk, og webapplikasjoner gjør det mulig for brukere å gjøre ting i net..

4 enkle trinn for å forbedre din gjengivelse

hvordan Sep 13, 2025

[1. 3] Bruke Dome Lights har vært en av de største fremskrittene i CGI-opprettelsen de siste tiårene. Bading av en scene fra al..

En introduksjon til frontend testing

hvordan Sep 13, 2025

[1. 3] Side 1 av 2: Ulike typer frontend tester (og når du skal bruke dem) ..

Hvordan få mer fra gifs

hvordan Sep 13, 2025

[1. 3] GIF jobber i sømløse sykluser, som Rebecca mock. beskriver som "den perfekte sløyfen". Denne sløyfen bør ideelt ..

Kombinere tradisjonelle og digitale ferdigheter for å lage et tegneserie

hvordan Sep 13, 2025

[1. 3] I årevis ble jeg skremt ved å jobbe digitalt. Noe om plastnibaren på en plastoverflate følte seg for å knuse for meg. ..

Kategorier