En guide till Googles webbverktyg

Sep 17, 2025
Hur

Big G, aka Google, ger utvecklare en mängd verktyg som är avsedda att göra webbdesign lätt. I den här artikeln går vi igenom några av de bästa Google-verktygen där ute och visar hur du använder dem i ditt webbdesign och utvecklings arbetsflöde.

Vi täcker en rad olika Webbdesignverktyg Här, så har vi delat innehållet på sidor för att göra det lättare att navigera. Använd rullgardinsmenyn ovan för att hoppa till det avsnitt du är intresserad av. Vill du designa en webbplats med en annan leverantör? Våra guider till webbhotell och toppen Website Builder har du täckt.

Så länge som webbplatser är oförmögen kan deras innehåll ses av någon. Chrome's DevTools gör det här enkelt - På den här sidan visar vi hur du visar och byter HTML, CSS och JavaScript. På sida 2 , vi tittar närmare på hur man använder Googles debugger för att snabbt och enkelt fixa kodningsfel. Page 3 Anger strålkastaren på Googles enhetsläge, som du kan använda för att testa de mobila versionerna av dina sidor via din stationära maskin. På Page 4 Vi presenterar de grunder du behöver vara medveten om att börja implementera materiella designprinciper i dina mönster. Till sist, Page 5 Titta på progressiva webbapps, den senaste stora saken i webbdesignindustrin.

Visa och ändra HTML, CSS & AMP; Js

Så länge som en webbplatss kod inte har blivit minskad, kan den ses av någon som använder Chromes utvecklarverktyg. Först och främst, kontrollera versionen av Chrome - följande steg fungerar på version 70.0.3538.67 som körs på en 64-bitars Ubuntu-arbetsstation. Öppna sedan Hamburger-menyn och klicka på Fler verktyg och GT; Utvecklarverktyg.

Launch Google's Developer Tools

Starta utvecklarverktygen och du bör se en skärm som liknar den här [klicka på ikonen längst upp till höger för att förstora]

Webbläsaren svarar genom att öppna en rutan på vänster sida av skärmen. Det bör ändras i det första steget - som standard, webbläsaren tilldelar inte tillräckligt med skärmfastigheter. När det är klart, ser skärmen ut som den som visas i bilden ovan.

Som standard startar utvecklarverktygen med den aktuella konsolen. Den innehåller utgången som emitteras av invokationer av konsol-loggningsfunktionen. Rendering-fel visas också uppe - om du hittar röda linjer är något fel i markeringen eller koden på din sida. Ett klick på den lilla "url" på höger sida tar dig till linjen, vilket fick meddelandet att dyka upp.

Inspektera markeringen

Om ditt intresse fokuserar på markering, använd fliken Elements som visas i figuren. Det visar markeringen som webbläsaren för närvarande gör. Du kan expandera och kompakta den på ett sätt som liknar en trädvy - dölja onödiga element för att förhindra sensorisk överbelastning.

De existensberättigande Av fliken är displayen av CSS-strukturen. Widgets samla "CSS från olika källor, som visas snyggt och bredvid varandra. I fallet med exemplet som visas i figuren ser vi att stilar gavs från både "DIV" -taggen och "huvud" -markeringen på sidan.

Chrome låter dig redigera de flesta attribut på flugan. Dubbelklicka på någon av de svarta texterna för att omvandla etiketten till en redigerare och ange det nyligen önskade värdet och tryck på RETURN-tangenten. Renderer plockar upp dessa förändringar och tillämpar dem på DOM i flygningen. Detta är särskilt användbart när man försöker optimera färger eller placeringsproblem. Att behöva ladda om en sida för att förhandsgranska ändringar blir tråkig.

Google's web tools

En gul bakgrund indikerar att fönstrets innehåll är föremål för filtrering [klicka på ikonen längst upp till höger för att förstora]

Slutligen ta en titt på textrutan ovanpå panelen. Det gör att du kan filtrera de markup-objekt som visas: till exempel, ange "MDC" för att begränsa vyn till alla stilar som ärvda från materialdesignbiblioteket som används senare i den här artikeln. När ett filter är aktivt visas en gul bakgrund på ett sätt som liknar den som visas ovan.

Utför en detaljerad analys

I moderna webbläsare är DOM inte begränsat till "statiska" presentationsfrågor. Det styr också händelseflöde och placering. Byt till den beräknade fliken för att avslöja en lista med "dimensionella" egenskaper. Detta är otroligt användbart när du anordnar widgets på skärmen på ett exakt sätt.

Att flytta till fliken Evenemangslisters ger en översikt över händelseflöden. Använd den här funktionen för att snabbt utge problem relaterade till användarinteraktion: Om en händelse inte utlöses, börja med att kontrollera händelseshanterarna.

Slutligen låter du ta en titt på attributen som är lagrade inuti de enskilda Dom-noderna. Om du någonsin har spenderat mycket tid på att jaga DOM-manipuleringskoden är värdet klart.

Nästa sida: Så här använder du Googles debugger

  • 1
  • 2
  • 3
  • 4
  • 5

Nuvarande sida: Visa och ändra HTML, CSS & AMP; Js

Hur - Mest populära artiklar

Skapa en WebGL 3D-landningssida

Hur Sep 17, 2025

(Bildkredit: Framtida) Att skapa en WebGL 3D-landningssida är ett sätt att göra ett bra första intryck med din pu..

Hur man skapar glitchtext och bildeffekter i CSS

Hur Sep 17, 2025

I den här handledningen visar vi dig hur du skapar en glitchtexteffekt. Särskilda effekter och animationer kan hjälpa webbplatser att sticka ut, skapa en omedelbar inverkan på användaren..

Skapa en välkomnande inredning med hjälp av Line Art

Hur Sep 17, 2025

För den här verkstaden ska jag skapa en inre bakgrund med linjekonst och en texturerad färgstil. Jag vill sätta upp mig för ..

Hur man målar underbara miniatyrer

Hur Sep 17, 2025

Ursprunget av miniatyrmålning sträcker sig långt tillbaka till medeltiden, när miniatyrartister målade utsökta porträtt i ..

Lägg till vibrans på dina oljemålningar med dessa topptips

Hur Sep 17, 2025

Material Marjolein använder linolja som ett medium, vilket har fördelen att torka inom dagar. När du ar..

Hur man flyttar mellan DAZ Studio och Zbrush

Hur Sep 17, 2025

För nykomlingar till Zabrus , gränssnittet verkar väldigt annorlunda än andra 3D-modelleringsprogram, så kan ..

Ålder ett fotografi i Photoshop CC

Hur Sep 17, 2025

Åldrande ett fotografi i Photoshop är en klassisk teknik som kan vända jämn en ho-hum, full färgbild till något slående. O..

Skapa en film med Photoshop på 60 sekunder

Hur Sep 17, 2025

Önskar att du kunde hämta en ny färdighet men kan inte tyckas hitta tiden att sitta och lära dig? Adobe Gör det nu spellista kan vara precis vad du är ute efter. Fylld me..

Kategorier