En vejledning til Googles webværktøjer

Sep 11, 2025

hvordan

Side 1 af 5:

Se og skift HTML, CSS & AMP; Js.

Se og skift HTML, CSS & AMP; Js.
Ved hjælp af debugger.
Arbejder med enhedstilstand
Kom godt i gang med materiale design
Få fat i progressive web apps

Big G, AKA Google, giver udviklere en overflod af værktøjer, der er beregnet til at gøre webdesign nemt. I denne artikel går vi igennem nogle af de bedste Google-værktøjer derude, og viser dig, hvordan du bruger dem i dit webdesign og udviklingsarbejde.

Vi dækker en række forskellige Web Design Tools. Her har vi opdelt indholdet i sider for at gøre det nemmere at navigere. Brug rullemenuen ovenfor til at hoppe til det afsnit, du er interesseret i. Vil du designe et websted ved hjælp af en anden udbyder? Vores guider til Web Hosting. og toppen Website Builder. Har du dækket.

Så længe websites er unminificeret, kan deres indhold ses af nogen. Chrome's Devtools Gør dette enkelt - På denne side viser vi dig, hvordan du ser og ændrer HTML, CSS og JavaScript. På Side 2. , Vi ser nærmere på, hvordan man bruger Googles debugger til at fastsætte kodningsfejl hurtigt og nemt. Side 3. Sætter spotlyset på Googles enhedstilstand, som du kan bruge til at teste de mobile versioner af dine sider via din desktop-maskine. På Side 4. Vi introducerer det grundlæggende, du skal være opmærksom på at begynde at implementere materiale design principper i dine designs. Langt om længe, Side 5. Ser på progressive webapps, den seneste store ting i webdesignindustrien.

Se og skift HTML, CSS & AMP; Js.

Så længe en websteds kode ikke er blevet mineret, kan den ses af nogen, der bruger Chrome's Developer Tools. Først og fremmest kontrollerer versionen af Chrome - følgende trin arbejder på version 70.0.3538.67 kører på en 64-bit ubuntu arbejdsstation. Næste åbner Hamburger-menuen og klik på Flere værktøjer og GT; Udvikler værktøjer.

Launch Google's Developer Tools — Start udviklerværktøjerne, og du skal se en skærm svarende til dette [Klik på ikonet øverst til højre for at forstørre]

Browseren reagerer ved at åbne en rude på venstre side af skærmen. Det skal ændres i det første skridt - som standard, browseren tildeler ikke nok skærm fast ejendom. Når det er færdigt, ser skærmen ud til den, der vises i billedet ovenfor.

Som standard starter udviklerværktøjer op med den konsol faneblad. Den indeholder den udgang, der udsendes af invokationer af konsollogningsfunktionen. Gennemførelsesfejl vises også der - Hvis du finder røde linjer, er noget galt i markeringen eller koden på din side. Et klik på den lille 'URL' på højre side bringer dig til linjen, hvilket fik beskeden til at dukke op.

Undersøg markeringen

Hvis din interesse fokuserer på markering, skal du bruge fanen ELEMENTS vist i figuren. Det viser markeringen, som browseren i øjeblikket gør. Du kan udvide og kompakte den på en måde svarende til et træudsigt - skjul unødvendige elementer for at forhindre sensorisk overbelastning.

Det raison d'etre Af fanen er displayet af CSS-strukturen. Widgets 'Saml' CSS fra forskellige kilder, som vises pænt og ved siden af hinanden. I tilfælde af eksemplet vist i figuren ser vi, at stilarter blev leveret fra både 'div'-mærket og' Main '-market på siden.

Chrome giver dig mulighed for at redigere de fleste attributter på flugt. Dobbeltklik på en af de sorte tekster for at omdanne etiketten til en editor, og indtast derefter den ny ønskede værdi og tryk på returnøglen. Rendereren opfanger disse ændringer og anvender dem til Dom på flugt. Dette er især nyttigt, når man forsøger at optimere farver eller placeringsproblemer; At skulle genindlæse en side for at forhåndsvise ændringer bliver trættende.

Google's web tools — En gul baggrund angiver, at vinduesindholdet er underlagt filtrering [klik på ikonet øverst til højre for at forstørre]

Endelig tage et kig på tekstboksen oven på ruden. Det giver dig mulighed for at filtrere de viste markeringsgenstande: Indtast for eksempel 'MDC' for at begrænse visningen til alle stilarter, der er arvet fra det materielle designbibliotek, der bruges senere i denne artikel. Når et filter er aktivt, vises en gul baggrund på en måde svarende til den viste ovenfor.

Udfør en detaljeret analyse

I moderne webbrowsere er dommen ikke begrænset til 'statiske' præsentationsproblemer. Det regulerer også begivenhedsstrøm og placering. Skift til den beregnede fane for at afsløre en liste over 'dimensionelle' egenskaber. Dette er utroligt nyttigt, når man arrangerer widgets på skærmen på en præcis måde.

Flytning til fanen Hændelseslytter giver et overblik over hændelsesstrømme. Brug denne funktion til hurtigt at udrydde problemer relateret til brugerinteraktion: Hvis en begivenhed ikke udløser, skal du starte ud ved at tjekke eventehåndteringsforbindelserne.

Endelig giver vinduet Egenskaber dig mulighed for at kigge på de attributter, der er gemt inde i de enkelte domnoder. Hvis du nogensinde har brugt en masse tid på jagt ned DOM-manipulerende kode, er værdien klar.

Næste side: Sådan bruger du Googles debugger

Nuværende side: Se og skift HTML, CSS & AMP; Js.

Næste side Ved hjælp af debugger.

En vejledning til Googles webværktøjer

Se og skift HTML, CSS & AMP; Js.

Undersøg markeringen

Udfør en detaljeret analyse

hvordan - Mest populære artikler

Opret en brugerdefineret slap bot

Sådan Model Concept Art i Cinema 4D

Kom i gang med monotypeudskrivning

Vækker planter i Houdini

Design SVG Grafik i din browser

Skærpe dine skitseringsfærdigheder

Få fat i den våde-våd maleri teknik

Sådan perfekt hår i dine portrætter

Kategorier