Tips om hur du använder Inspect Element i webbläsaren Google Chrome

Google Chrome är designat inte bara för vanliga internetanvändare utan också för webbutvecklare, som ofta skapar en webbplats, designar bloggar etc. Alternativet Inspektera element(Inspect Element ) eller Inspektera(Inspect ) i Google Chrome hjälper användare att hitta information om en webbplats som är dold för synen . Här är några tips om hur du använder Inspect Element i webbläsaren Google Chrome för Windows PC .

Inspektera element i Google Chrome

1] Find hidden JavaScript/Media files

Inspektera element i Google Chrome

Många webbplatser visar popup-fönster om besökaren stannar på webbsidan i mer än 15 eller 20 sekunder. Eller många gånger öppnas en bild, annons eller ikon efter att ha klickat någonstans slumpmässigt. För att hitta dessa dolda filer på en webbsida kan du använda fliken Källor i (Sources)Inspektera element(Inspect Element) . Den visar en trädvylista på vänster sida som kan utforskas.

2] Get HEX/RGB color code in Chrome

Inspektera Element of Google Chrome tips och tricks

Ibland kanske vi gillar en färg och kanske vill ta reda på dess färgkod. Du kan enkelt hitta HEX- eller RGB -färgkoden som används på en viss webbsida med det inbyggda alternativet i Google Chrome . Högerklicka(Right-click) på färgen och klicka på Inspektera(Inspect) . För det mesta kommer du att få färgkoden på höger sida med annan CSS . Om du inte ser det, ja, du kanske måste använda något gratis färgväljarprogram.

TIPS(TIP) : Ta en titt på dessa onlineverktyg(Color Picker online tools) för färgväljare också.

3] Få tips om förbättring av webbsidans prestanda(3] Get web page performance improvement tips)

Inspektera Element of Google Chrome tips och tricks

Alla älskar att landa på en webbplats som öppnar snabbt. Om du designar din webbplats bör du alltid ha det i åtanke. Det finns många verktyg för att kontrollera och optimera sidladdningshastigheten. Men Google Chrome kommer också med ett inbyggt verktyg som gör att användare kan få tips för att förbättra webbplatsens laddningshastighet. För att komma åt dessa verktyg, gå till fliken Granskningar(Audits) och se till att Nätverksanvändning(Network Utilization) , Webbsideprestanda(Web Page Performance) och Ladda om sida och Granska vid laddning(Reload Page and Audit on Load) är valda. Klicka sedan på knappen Kör . (Run )Det kommer att ladda om sidan och visa dig lite information som kan användas för att göra sidan snabbare. Till exempel kan du få alla resurser som inte har någon cache-utgång, JavaScriptsom kan kombineras till en fil, och så vidare.

4] Kontrollera lyhördhet(4] Check responsiveness)

Inspektera Element of Google Chrome tips och tricks

Att göra en webbsida responsiv är avgörande nuförtiden. Det finns massor av verktyg som kan kontrollera om din webbplats är helt responsiv eller inte. Det här verktyget i Google Chrome hjälper dock användare att veta om webbplatsen är responsiv eller inte , samt att kontrollera hur den skulle se ut på en viss mobil enhet. Öppna vilken webbplats som helst, öppna fliken Inspektera element, klicka på mobilknappen , (Inspect Element )ställ(mobile ) in upplösningen eller välj önskad enhet för att testa webbsidan.

5] Redigera livewebbplats(5] Edit live website)

Inspektera Element of Google Chrome tips och tricks

Låt oss anta att du skapar en webbsida, men du är förvirrad över färgschemat eller navigeringsmenyns storlek eller innehåll eller sidofältsförhållande. Du kan redigera din livewebbplats med(Inspect Element) alternativet Inspektera element i Google Chrome . Även om du inte kan spara ändringarna på en livewebbplats, kan du få utföra all redigering så att du kan använda den vidare. För att göra det, öppna Inspect Element , välj HTML -egenskapen på vänster sida och gör stiländringar på höger sida. Om du gör någon ändring i CSS kan du klicka på fillänken, kopiera hela koden och klistra in den i originalfilen.

Inspect Element of Google Chrome är en riktig följeslagare för alla webbutvecklare. Det spelar ingen roll om du utvecklar en ensidig webbplats eller en dynamisk webbplats, du kan verkligen använda dessa tips.



Claes Öberg

About the author

Jag är en mjukvaruingenjör med erfarenhet av både Chrome och spelapplikationer. Jag har jobbat med lösningar för webbläsaren Google Chrome de senaste 4 åren och har även jobbat med spel för flera olika plattformar. Mina kunskaper ligger i att designa, testa och hantera mjukvaruprojekt. Utöver mitt arbete som mjukvaruingenjör har jag även erfarenhet av sekretess, användarkonton och familjesäkerhetsfrågor.


Related posts