F\u00f6r en person som inte \u00e4r bekant med kodning \u00e4r det l\u00e4tt att bli r\u00e4dd efter att ha \u00f6ppnat Inspect Element av misstag. Men om du f\u00f6rblir lugn efter att ha tittat p\u00e5 den komplicerade koden l\u00e5ter Inspect Element dig utf\u00f6ra en massa anv\u00e4ndbara (och n\u00e5gra inte s\u00e5 anv\u00e4ndbara) saker, f\u00f6rutsatt att du vet hur du g\u00f6r det.<\/p>\n
H\u00e4r ska vi titta p\u00e5 sju roliga saker du kan g\u00f6ra med din webbl\u00e4sares utvecklarverktyg och Inspect Element.<\/p>\n
Inspect Element \u00e4r ett utvecklarverktyg som erbjuds av webbl\u00e4sare f\u00f6r att visa och tillf\u00e4lligt \u00e4ndra k\u00e4llkoden f\u00f6r alla webbsidor. Genom att anv\u00e4nda det h\u00e4r verktyget kan utvecklare och designers kontrollera och \u00e4ndra gr\u00e4nssnittet p\u00e5 vilken webbplats som helst.<\/p>\n
N\u00e4r du \u00e4ndrar koden forts\u00e4tter webbl\u00e4saren att uppdatera webbsidan i realtid. Denna f\u00f6r\u00e4ndring varar bara s\u00e5 l\u00e4nge som din session p\u00e5 webbplatsen och \u00e4r endast synlig f\u00f6r dig p\u00e5 en enhet. Alla \u00e4ndringar kommer att tas bort s\u00e5 snart du l\u00e4mnar webbsidan.<\/p>\n
Vanligtvis kan du enkelt ladda ner bilder fr\u00e5n webben genom att h\u00f6gerklicka och spara dem. Men det kan du inte g\u00f6ra p\u00e5 alla webbplatser. I det h\u00e4r fallet kommer Inspect Element-funktionen v\u00e4l till pass.<\/p>\n
F\u00f6r att ladda ner en mediefil, h\u00f6gerklicka p\u00e5 den och v\u00e4lj Inspektera<\/strong>. Expandera <\/p>\n Ist\u00e4llet f\u00f6r att skapa en falsk bild fr\u00e5n b\u00f6rjan kan du anv\u00e4nda DevTools f\u00f6r att \u00e4ndra texten p\u00e5 webbsidan och dra spratt p\u00e5 dina v\u00e4nner.<\/p>\n F\u00f6r att skapa en falsk webbsida, \u00f6ppna en k\u00e4nd webbplatss sida och h\u00f6gerklicka p\u00e5 dess titel. Klicka sedan p\u00e5 Inspektera<\/strong> f\u00f6r att \u00f6ppna rutan. Klicka p\u00e5 Mer<\/strong> ikonen f\u00f6r den markerade koden och v\u00e4lj Redigera som HTML<\/strong>. Byt sedan ut titeln mot din egen falska rubrik.<\/p>\n P\u00e5 samma s\u00e4tt kan du \u00e4ndra andra texter som utdrag, datum och f\u00f6rfattarens namn. F\u00f6r att \u00e4ndra bilden, ta bort bildk\u00e4llan med samma steg. Hitta sedan en relaterad bild fr\u00e5n Google, kopiera dess bildadress och klistra in den i k\u00e4llan.<\/p>\n P\u00e5 s\u00e5 s\u00e4tt kan du g\u00f6ra ett spratt p\u00e5 dina v\u00e4nner utan st\u00f6rre problem. Se dock till att skicka sk\u00e4rmdumpen med DevTools-rutan dold ist\u00e4llet f\u00f6r en l\u00e4nk, eftersom \u00e4ndringen \u00e4r tillf\u00e4llig.<\/p>\n En annan l\u00f6msk sak du kan g\u00f6ra med Inspect Element \u00e4r att \u00e4ndra f\u00e4rger och teckensnitt p\u00e5 vilken webbsida som helst. H\u00f6gerklicka p\u00e5 objektet vars f\u00e4rger du vill \u00e4ndra och v\u00e4lj Inspektera<\/strong>. Sedan i Stilar<\/strong> flik, hitta f\u00e4rg eller bakgrundsf\u00e4rg och ange hex-koden. P\u00e5 samma s\u00e4tt kan du \u00e4ndra teckenstorlek och stil fr\u00e5n fliken Stilar.<\/p>\n Du kan anv\u00e4nda det h\u00e4r tricket f\u00f6r att \u00e4ndra utseendet p\u00e5 vilken webbplats som helst och g\u00f6ra den l\u00e4tt att l\u00e4sa. Du kan till exempel skapa ett m\u00f6rkt l\u00e4ge p\u00e5 vilken webbplats som helst, \u00f6ka teckenstorleken f\u00f6r att \u00f6ka l\u00e4sbarheten och ta bort p\u00e5tr\u00e4ngande element genom att ta bort dem.<\/p>\n Om n\u00e5gon webbplats har dolt ditt l\u00f6senord med asterisker kan du justera webbsideskoden f\u00f6r att se den. G\u00e5 till DevTools<\/strong> genom att h\u00f6gerklicka p\u00e5 det dolda l\u00f6senordet. \u00c4ndra sedan typen fr\u00e5n l\u00f6senord till text inom inmatningstaggen och klicka p\u00e5 den tomma sk\u00e4rmen. Nu \u00e4r ditt l\u00f6senord synligt.<\/p>\n Det h\u00e4r tricket \u00e4r praktiskt n\u00e4r du gl\u00f6mmer ditt l\u00f6senord men har det sparat i en l\u00f6senordshanterare. S\u00e5 du kan se och komma ih\u00e5g ditt l\u00f6senord direkt fr\u00e5n webbsidan.<\/p>\n Vi vet alla hur man visar skrivbordswebbplatsen p\u00e5 din mobiltelefon. Men du kan ocks\u00e5 anv\u00e4nda Inspect Element f\u00f6r att se mobilversionen p\u00e5 skrivbordet. F\u00f6r att g\u00f6ra det, \u00f6ppna DevTools<\/strong> och klicka p\u00e5 V\u00e4xla enhetsverktygsf\u00e4lt<\/strong> knapp (andra knappen uppe till h\u00f6ger).<\/p>\n P\u00e5 samma s\u00e4tt kan du byta anv\u00e4ndaragent och se olika versioner av webbplatsen. I utvecklarverktygen klickar du p\u00e5 Mer<\/strong> ikonen i det \u00f6vre v\u00e4nstra h\u00f6rnet och v\u00e4lj n\u00e4tverksvillkor. Avmarkera Anv\u00e4nd standardwebbl\u00e4sare<\/strong> l\u00e5da i Anv\u00e4ndaragent<\/strong> och v\u00e4lj en annan anv\u00e4ndaragent fr\u00e5n rullgardinsmenyn nedan.<\/p>\n Ist\u00e4llet f\u00f6r att installera ett f\u00e4rgv\u00e4ljartill\u00e4gg fr\u00e5n tredje part kan du nu v\u00e4lja dina favoritf\u00e4rger med Inspect Element. F\u00f6r att v\u00e4lja valfri f\u00e4rg fr\u00e5n webbsidan, g\u00e5 till Inspektera elementet<\/strong>. G\u00e5 sedan till Stilar<\/strong> fliken och hitta f\u00e4rg eller bakgrund. Klicka nu p\u00e5 den lilla rutan efter f\u00e4rg f\u00f6r att f\u00e5 fram f\u00e4rgv\u00e4ljaren.<\/p>\n Nu kan du klicka var som helst p\u00e5 sidan f\u00f6r att v\u00e4lja f\u00e4rg och kopiera hex-koden fr\u00e5n Stilar<\/strong> flik. Om du vill ha RGB- eller HSLA-kod kan du se dem med hj\u00e4lp av Pil<\/strong> knappar.<\/p>\n S\u00e5 n\u00e4r du ser en bra f\u00e4rg p\u00e5 en webbplats som du kanske vill anv\u00e4nda i framtiden, anv\u00e4nd helt enkelt Inspect Element och spara koden som referens.<\/p>\n DevTools l\u00e5ter dig ocks\u00e5 ta rena och tydliga sk\u00e4rmdumpar. F\u00f6r att ta en sk\u00e4rmdump, \u00f6ppna DevTools<\/strong>, Klicka p\u00e5 Mer<\/strong> ikonen och v\u00e4lj K\u00f6r ett kommando<\/strong>. Skriv sk\u00e4rmdump i s\u00f6krutan. Du kommer att se fyra olika typer av sk\u00e4rmdumpningsalternativ.<\/p>\n Genom att v\u00e4lja en omr\u00e5dessk\u00e4rmdump kan du markera ett s\u00e4rskilt omr\u00e5de i f\u00f6nstret och din webbl\u00e4sare sparar det som en PNG-fil.<\/p>\n Genom att ta en sk\u00e4rmdump i full storlek sparas en bild av hela webbsidan, inklusive saker som inte \u00e4r synliga p\u00e5 din sk\u00e4rm. En sk\u00e4rmdump av en nod tar endast en bild av det specifika elementet. Slutligen sparar alternativet f\u00e5nga sk\u00e4rmdump bilden av allt som \u00e4r synligt p\u00e5 din sk\u00e4rm.<\/p>\n Det h\u00e4r var bara n\u00e5gra knep som du kan utf\u00f6ra med Inspect Element. Det finns massor av andra anv\u00e4ndbara saker du kan g\u00f6ra med hj\u00e4lp av DevTools.<\/p>\n S\u00e5 om du vill bli en avancerad anv\u00e4ndare och imponera p\u00e5 dina v\u00e4nner \u00e4r det en bra id\u00e9 att l\u00e4ra dig de mer dolda funktionerna i DevTools.<\/p>\n Om f\u00f6rfattaren<\/strong><\/p>\n Syed Hammad Mahmood (55 artiklar publicerade) F\u00f6dd och baserad i Pakistan, Syed Hammad Mahmood \u00e4r f\u00f6rfattare p\u00e5 MakeUseOf. Sedan barndomen har han surfat p\u00e5 n\u00e4tet, hittat verktyg och knep f\u00f6r att f\u00e5 ut det mesta av den senaste tekniken. F\u00f6rutom teknik \u00e4lskar han fotboll och \u00e4r en stolt Culer.<\/p>\n Mer fr\u00e5n Syed Hammad Mahmood<\/p>\n G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n <\/span> 2. \u00c4ndra rubriker och text till Prank Friends<\/span><\/h2>\n
<\/span> 3. \u00c4ndra f\u00e4rger och teckensnitt f\u00f6r en webbsida<\/span><\/h2>\n
<\/span> 4. Visa dolda l\u00f6senord<\/span><\/h2>\n
\n
<\/span> 5. Visa den mobila versionen av en webbplats<\/span><\/h2>\n
\n
<\/span> 6. V\u00e4lj f\u00e4rger fr\u00e5n en webbplats<\/span><\/h2>\n
\n
<\/span> 7. Ta sk\u00e4rmdumpar utan n\u00e5gra till\u00e4gg<\/span><\/h2>\n
\n
<\/span> L\u00e4r dig de dolda tricks av Inspect Element<\/span><\/h2>\n
<\/strong><\/p>\n<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n