För en person som inte är bekant med kodning är det lätt att bli rädd efter att ha öppnat Inspect Element av misstag. Men om du förblir lugn efter att ha tittat på den komplicerade koden låter Inspect Element dig utföra en massa användbara (och några inte så användbara) saker, förutsatt att du vet hur du gör det.
Här ska vi titta på sju roliga saker du kan göra med din webbläsares utvecklarverktyg och Inspect Element.
Inspect Element är ett utvecklarverktyg som erbjuds av webbläsare för att visa och tillfälligt ändra källkoden för alla webbsidor. Genom att använda det här verktyget kan utvecklare och designers kontrollera och ändra gränssnittet på vilken webbplats som helst.
När du ändrar koden fortsätter webbläsaren att uppdatera webbsidan i realtid. Denna förändring varar bara så länge som din session på webbplatsen och är endast synlig för dig på en enhet. Alla ändringar kommer att tas bort så snart du lämnar webbsidan.
Vanligtvis kan du enkelt ladda ner bilder från webben genom att högerklicka och spara dem. Men det kan du inte göra på alla webbplatser. I det här fallet kommer Inspect Element-funktionen väl till pass.
För att ladda ner en mediefil, högerklicka på den och välj Inspektera. Expandera
2. Ändra rubriker och text till Prank Friends
Istället för att skapa en falsk bild från början kan du använda DevTools för att ändra texten på webbsidan och dra spratt på dina vänner.
För att skapa en falsk webbsida, öppna en känd webbplatss sida och högerklicka på dess titel. Klicka sedan på Inspektera för att öppna rutan. Klicka på Mer ikonen för den markerade koden och välj Redigera som HTML. Byt sedan ut titeln mot din egen falska rubrik.
På samma sätt kan du ändra andra texter som utdrag, datum och författarens namn. För att ändra bilden, ta bort bildkällan med samma steg. Hitta sedan en relaterad bild från Google, kopiera dess bildadress och klistra in den i källan.
På så sätt kan du göra ett spratt på dina vänner utan större problem. Se dock till att skicka skärmdumpen med DevTools-rutan dold istället för en länk, eftersom ändringen är tillfällig.
3. Ändra färger och teckensnitt för en webbsida
En annan lömsk sak du kan göra med Inspect Element är att ändra färger och teckensnitt på vilken webbsida som helst. Högerklicka på objektet vars färger du vill ändra och välj Inspektera. Sedan i Stilar flik, hitta färg eller bakgrundsfärg och ange hex-koden. På samma sätt kan du ändra teckenstorlek och stil från fliken Stilar.
Du kan använda det här tricket för att ändra utseendet på vilken webbplats som helst och göra den lätt att läsa. Du kan till exempel skapa ett mörkt läge på vilken webbplats som helst, öka teckenstorleken för att öka läsbarheten och ta bort påträngande element genom att ta bort dem.
4. Visa dolda lösenord
Om någon webbplats har dolt ditt lösenord med asterisker kan du justera webbsideskoden för att se den. Gå till DevTools genom att högerklicka på det dolda lösenordet. Ändra sedan typen från lösenord till text inom inmatningstaggen och klicka på den tomma skärmen. Nu är ditt lösenord synligt.
Det här tricket är praktiskt när du glömmer ditt lösenord men har det sparat i en lösenordshanterare. Så du kan se och komma ihåg ditt lösenord direkt från webbsidan.
5. Visa den mobila versionen av en webbplats
Vi vet alla hur man visar skrivbordswebbplatsen på din mobiltelefon. Men du kan också använda Inspect Element för att se mobilversionen på skrivbordet. För att göra det, öppna DevTools och klicka på Växla enhetsverktygsfält knapp (andra knappen uppe till höger).
På samma sätt kan du byta användaragent och se olika versioner av webbplatsen. I utvecklarverktygen klickar du på Mer ikonen i det övre vänstra hörnet och välj nätverksvillkor. Avmarkera Använd standardwebbläsare låda i Användaragent och välj en annan användaragent från rullgardinsmenyn nedan.
6. Välj färger från en webbplats
Istället för att installera ett färgväljartillägg från tredje part kan du nu välja dina favoritfärger med Inspect Element. För att välja valfri färg från webbsidan, gå till Inspektera elementet. Gå sedan till Stilar fliken och hitta färg eller bakgrund. Klicka nu på den lilla rutan efter färg för att få fram färgväljaren.
Nu kan du klicka var som helst på sidan för att välja färg och kopiera hex-koden från Stilar flik. Om du vill ha RGB- eller HSLA-kod kan du se dem med hjälp av Pil knappar.
Så när du ser en bra färg på en webbplats som du kanske vill använda i framtiden, använd helt enkelt Inspect Element och spara koden som referens.
7. Ta skärmdumpar utan några tillägg
DevTools låter dig också ta rena och tydliga skärmdumpar. För att ta en skärmdump, öppna DevTools, Klicka på Mer ikonen och välj Kör ett kommando. Skriv skärmdump i sökrutan. Du kommer att se fyra olika typer av skärmdumpningsalternativ.
Genom att välja en områdesskärmdump kan du markera ett särskilt område i fönstret och din webbläsare sparar det som en PNG-fil.
Genom att ta en skärmdump i full storlek sparas en bild av hela webbsidan, inklusive saker som inte är synliga på din skärm. En skärmdump av en nod tar endast en bild av det specifika elementet. Slutligen sparar alternativet fånga skärmdump bilden av allt som är synligt på din skärm.
Lär dig de dolda tricks av Inspect Element
Det här var bara några knep som du kan utföra med Inspect Element. Det finns massor av andra användbara saker du kan göra med hjälp av DevTools.
Så om du vill bli en avancerad användare och imponera på dina vänner är det en bra idé att lära dig de mer dolda funktionerna i DevTools.
Om författaren
Syed Hammad Mahmood (55 artiklar publicerade)
Född och baserad i Pakistan, Syed Hammad Mahmood är författare på MakeUseOf. Sedan barndomen har han surfat på nätet, hittat verktyg och knep för att få ut det mesta av den senaste tekniken. Förutom teknik älskar han fotboll och är en stolt Culer.
Mer från Syed Hammad Mahmood
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
