Elementinspektörsknep: 8 knep du måste känna till! 🛠️
Elementinspektören i din webbläsare kan verka som ett verktyg endast för utvecklare, men du kan faktiskt göra en del riktigt coola saker med den även om du inte vet någonting om programmering! 🚀
1 . Ladda ner bilder
Du kanske behöver ladda ner en bild från en webbplats. Du försöker högerklicka och klicka på "Spara bild", bara för att upptäcka att alternativet är gråmarkerat eller att knappen "Spara bild" inte visas. Andra gånger kanske du bara kan ladda ner en miniatyrbild av bilden, inte hela filen. 🤔 Vad händer?
Utvecklare inaktiverar ofta avsiktligt knappen "Spara bild", eller använder ett webbramverk som inte tillåter bildnedladdningar på det sättet. Men det finns en praktisk lösning i Element Inspector. Du kan hämta vilken bildresurs som helst från en webbplats, i full storlek, i tre enkla steg. 📸
Steg 1
Gör högerklicka på var som helst på sidan och välj ”Inspektera element” eller ”Inspektera”. Du kan också använda den specifika kortkommandot för inspektören i din webbläsare. F12 fungerar i de flesta webbläsare och operativsystem. Jag använder Firefox för den här demonstrationen, men stegen är identiska. 🖱️
Steg 2
I elementinspektörens fönster klickar du på fliken "Nätverk". Fliken Nätverk ska ha "Bilder" som en av undermenyerna. Klicka på "Bilder". 🖼️
Ladda nu om sidan så att alla bildresurser visas under fliken ”Bilder”. Använd uppdateringsknappen bredvid adressfältet från din webbläsare eller tryck Ctrl+R. 🔄
Steg 3
Och där har du det. Hela bildbiblioteket borde laddas in i listan. Listan uppdateras dynamiskt, så allt eftersom fler bilder laddas upp till webbplatsen kommer de att visas här också. 🖼️✨
Du kan hålla muspekaren över en fil för att se dess förhandsgranskning och dimensioner. Dubbelklicka för att öppna filen i en ny flik, där du kan spara den med hjälp av högerklicksmenyn. 💾
2 . Ladda ner videor
Precis som med bildmaterial tillåter webbplatser ibland inte ansvarsfrihet videor direkt. Men du kan ladda ner dem genom att läsa in dem i Elements-inspektören. När de har laddats i inspektören dubbelklickar du bara på filnamnet för att öppna den i en ny flik. 🎥
Steg 1
Öppna Elementinspektörsfönstret genom att trycka på kortkommandot F12 (det borde fungera på de flesta system). Alternativt kan du högerklicka var som helst på webbsidan och välja "Inspektera". Elementinspektörsfönstret borde visas. 🖱️
Steg 2
Klicka på fliken "Nätverk" och sedan på "Media" för att filtrera bort allt utom videofiler. Uppdatera sidan. Antingen genom att klicka på webbläsarens uppdateringsknapp eller trycka på Ctrl+R. 🔄
Steg 3
Videofilerna bör laddas i en lista. Du kan inte förhandsgranska dem direkt, men du kan dubbelklicka på en fil för att öppna den i en ny flik. Där kan du högerklicka och ladda ner den. 🎬
3 . Ta skärmdumpar av hela sidan
Om du vill spara en hel webbsida kan du snabbt ladda ner den som en PDF- eller HTML-fil. Men tänk om du vill ta en vanlig ögonblicksbild av hela sidan? Så här gör du. Jag ska förklara hur man gör det. 📸
Firefox har ett dedikerat skärmdumpsverktyg i snabbmenyn, så jag ska visa dig hur du gör det i Google Chrome och andra webbläsare. 🌐
Öppna inspektörsverktyget genom att högerklicka var som helst på sidan eller trycka på F12.
Tryck Ctrl+Skift+P för att öppna Kör-fönstret. Skriv Fånga fangst av fullstor skärm i det här fönstret. Klicka på det. 📄
Ett fönster med texten "Spara som" bör visas omedelbart, så att du kan spara helsidesskärmdumpen som en JPG. 💾
4 . Låtsas att du pratar i telefon
De flesta webbplatser laddas olika beroende på typ av enhet och skärmstorlek. Om du vill lura webbplatsen att tro att du använder en annan enhet (av någon anledning) kan du enkelt göra det med inspektörsverktyget. 📱
I Chrome öppnar du Elements Inspector-fönstret från högerklicksmenyn eller med F12. Klicka sedan på den lilla ikonen för laptop och telefon i det övre vänstra hörnet. Firefox har en liknande knapp som heter Responsivt designläge (Ctrl+Shift+M). 🖥️
Du får en lista över enheter som du kan emulera, och du kan också manuellt justera storleken på skärmNär du har valt en mobil enhet kommer du att märka att din webbläsare också simulerar pekgester. 📱✨
5 . Identifiera källor
Det här tipset är för kreatörer, men alla som är nyfikna på typsnitt på en webbplats kan använda det här tricket. Du kan använda inspektörsverktyg för att identifiera och ibland till och med ladda ner typsnitt. 🖋️
Öppna först verktyget Element Inspector. Klicka sedan på fliken "Nätverk" (den kan vara dold i överflödesmenyn) och välj "Källa".
Tryck sedan Ctrl+R. De renderade teckensnitten laddas in i listan, troligen i WOFF-format. Du kan ladda ner dem direkt genom att dubbelklicka på teckensnittsnamnet. Till exempel använder How-To Geek Roboto som standardteckensnitt. 🔤
Om du behöver mer detaljerad information om typsnittet, gå till fliken "Element" och välj "Stilar". Scrolla ner till typsnittsfamiljens egenskap och klicka på den. Motsvarande text kommer att markeras på webbsidan. På så sätt kan du identifiera ett typsnitt exakt. 🎨
6 . Redigera text på en sida (tillfälligt)
Visste du att du tillfälligt kan redigera nästan allt på en webbsida med hjälp av inspektören? Det här verktyget låter dig redigera koden som webbplatsen består av, så om du vet lite om kod kan du få sidan att se ut precis som du vill (endast på din dator, tills du laddar om sidan). 🛠️
Även om du inte kan någonting om kodning kan du redigera enkel text på vilken webbsida som helst. Det kan vara ett roligt litet skämt att spela dina vänner. 😉
Markera texten på sidan du vill redigera och högerklicka på den. Välj sedan "Inspektera" eller "Inspektera element".
Det relevanta textavsnittet bör visas på fliken Element. Dubbelklicka bara på det och ersätt det med vad du vill. ✏️
Stäng elementinspektören så är du klar! Kom ihåg att om du laddar om sidan kommer dina ändringar att ångras. 🔄
7 . Ta bort objekt
Precis som du redigerar text kan du även ta bort specifika element från en webbsida. Återigen, ändringarna gäller bara tills du laddar om sidan. ❌
Högerklicka på det element du vill ta bort och välj sedan ”Inspektera” eller ”Inspektera element”.
Håll muspekaren över etiketterna "
” tills hela elementet är markerat. Tryck sedan helt enkelt på Delete-tangenten. 🔚
Bara sådär, den är borta! 🕵️♂️
8 . Identifiera färgvärden
Ett annat tips för kreatörer: du kan få RGB- och HEX-värdena för vilken som helst färg på en webbsida med pipettverktyget som finns i elementinspektören. 🎨
Högerklicka var som helst på sidan och öppna inspektören. Som standard öppnas fönstret Regler i fliken Inspektör. Scrolla ned för att hitta en egenskap märkt med färg.
Färgegenskapen ska ha en färgad cirkel eller fyrkant bredvid sig. Klicka på den för att öppna färgväljaren och tryck på pipettikonen bredvid den. 🖌️
Du kan hålla muspekaren över pipetten var som helst på sidan för att hitta färgvärden. Om du klickar på pipetten fylls egenskapen automatiskt i med det färgvärde du just valt. Du kan enkelt kopiera det härifrån. 📋
Dessa tipsen skrapar knappt på ytan av vad som faktiskt är möjligt med Elements Inspector. Om du vill fördjupa dig i webbutveckling finns här en guide som hjälper dig att komma igång. 💻
