Hur man kopierar kod från webbplatser med Chrome, Firefox och Edge

Att skapa en webbplats från grunden kan få dig att klia dig i huvudet, beroende på projektets komplexitet. Denna tidskrävande färdighet kan ta månader eller år att bemästra. Som ett resultat har de flesta professionella kodare utvecklat processer och genvägar för att förfina sina färdigheter.

Detta inkluderar att hålla en praktisk lista över den mest populära och repetitiva programmeringskoden. I den här artikeln kommer du att lära dig ett annat knep som låter dig kopiera webbplatskod på ett ansvarsfullt sätt med populära webbläsare som Chrome, Firefox och Edge. Det kan vara en ovärderlig inlärningsresurs som ger exempel på färdig kod.

Hur man kopierar kod från webbplatser med Chrome

Du kan kopiera kod från en webbplats med följande metoder i Chrome.

Via sidkälla

Detta är kanske det bästa och enklaste sättet att komma åt hela kodbasen för en webbplats eller webbsida, oavsett webbläsare. För att se sidkällan i Chrome, gå till målwebbplatsen och högerklicka på någon annan del av sidan än länkar, bilder eller annonser.

Klick Visa sidans källa eller tryck helt enkelt Ctrl + U (Windows, Linux) eller Kommando + U (Mac OS). Kopiera den del av koden du vill ha eller hela den och klistra in den i din föredragna kodredigerare.

Via genvägen F12

Du kan enkelt komma åt Chrome Developer Tools genom att gå till en webbplats och helt enkelt trycka F12. Chrome Developer Tools innehåller webbplatskod och fungerar också som ett felsökningsverktyg för utvecklare.

Välj all kod du vill ha, kopiera den och klistra in den i en valfri kodredigerare.

Ett annat sätt att komma in i Chrome Developer Tools panel är via Inspect Tool. För att göra det, besök målwebbplatsen från vilken du vill kopiera koden. Tryck nu Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (macOS), detta tar dig direkt till Dev Tools.

Alternativt högerklickar du på en tydlig del av sidan och väljer Inspektera från menyalternativen, precis under alternativet för att visa sidkälla.

Via Chromes meny Fler åtgärder

Ett annat sätt att utforska webbplatskod via Dev Tools i Chrome är att klicka på knappen med tre punkter i det övre högra hörnet på målwebbplatsen. Välj från menyalternativen Fler verktyg, då Utvecklarverktyg.

Kopiera all kod du vill ha och klistra in i valfri kodredigerare. Förutom att vara ett felsökningsverktyg kan du också använd Chrome Dev Tools för att ta skärmdumpar.

Hur man kopierar kod från webbplatser med Firefox

Här är olika sätt att kopiera webbplatskod med Firefox.

Visa sidans källa

För att komma åt och kopiera webbplatskod i Firefox genom att visa sidkällan, högerklicka helt enkelt på målwebbplatsen och klicka Visa sidans källa.

Alternativt, tryck på Ctrl + U (Windows, Linux) eller Kommando + U (Mac OS). Kopiera all kod du vill ha och klistra in den i din valda kodredigerare.

Du kan lika enkelt visa sidkällan i Firefox genom att klicka på hamburgermenyn med tre rader och välja Fler verktygoch klickar Sidkälla.

Via F12 kortkommando

Precis som Chrome kan du också komma åt koden för en webbplats i Firefox Dev Tools genom att helt enkelt trycka på F12-tangenten på ditt tangentbord.

Titta runt efter den specifika koden du söker och ägna särskild uppmärksamhet åt Style Editor. Kopiera och klistra in all den koden i din favoritkodredigerare och utöva din magi.

Återigen, som Chrome, kan du komma åt webbplatskod i Firefox med det inbyggda Inspect-verktyget. För att göra det högerklickar du på valfri del av målwebbplatsen och trycker antingen på F eller klicka Inspektera. Du kan också trycka på Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (Mac OS).

Som förklarat kan du fortfarande använda Style Editor för att hitta tills du hittar koden du söker. Kopiera sedan och klistra in den i någon av de bästa kodredigerarna du kan hitta.

Via Firefox Fler åtgärder-menyn

För att kopiera webbplatskod i Firefox via menyn för fler åtgärder, från webbplatsen vars kod du vill kopiera, klicka på hamburgermenyn med tre rader i det övre högra hörnet.

Välj Fler verktyg, Klicka sedan Verktyg för webbutvecklare. Härifrån kan du använda antingen Inspector eller Style Editor för att kopiera önskad kod.

För Inspector, använd piltangenterna på tangentbordet eller rullningslisten för att navigera i posterna. För Style Editor kan du fokusera på specifika rader med hjälp av den vänstra navigeringspanelen. När du har hittat det du vill ha, klistra in den kopierade koden i din kodredigerare och anpassa den efter din smak.

Hur man kopierar kod från webbplatser med Edge

Du kan enkelt kopiera webbplatskod på olika sätt med Edge enligt följande.

Visa sidans källa

För att kopiera webbplatskod genom att visa sidkällan i Microsoft Edge, högerklicka helt enkelt på en tydlig del av målwebbplatsen och välj Visa sidans källa.

Alternativt kan du helt enkelt trycka på Ctrl + U (Windows, Linux) eller Kommando + U (macOS), kopiera den del du vill ha, klistra in den i en redigerare och börja anpassa koden.

Via F12 kortkommando

Om du använder Edge kan du likaså kopiera webbplatskod genom att helt enkelt trycka på F12-tangenten när du besöker webbplatsen som du vill kopiera koden från.

Bekräfta ditt val genom att klicka Öppna DevTools. På panelen Dev Tools kan du enkelt kopiera all kod du vill ha och göra ditt jobb snabbare.

För att kopiera webbplatskod med Edges Inspect-verktyg, gå till webbplatsen vars kod du vill kopiera, högerklicka på valfri del och välj Inspektera.

Du kan också trycka på Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (Mac OS). Du kan sedan kopiera och klistra in koden du vill duplicera och redigera.

Via Edges More Actions-knapp

Edge låter dig också komma åt dess DevTools-panel via menyn för fler åtgärder. För att göra det, gå till webbplatsen vars kod du vill kopiera. Klicka på knappen med tre punkter i det övre högra hörnet och klicka Fler verktyg, då Utvecklarverktyg.

Om din webbläsare saknar något av dessa alternativ eller funktioner, kanske du vill kontrollera om den är uppdaterad. Här är hur du kontrollerar och uppdaterar Chrome, Firefox och Edge.

Oavsett vilken strategi du använder och vilken Chromium-baserad webbläsare du än använder (Chrome, Firefox eller Edge), kan söka efter specifika filer eller element genom att klicka på menyn med tre punkter på panelen Dev Tools och väljer Sök. Alternativt trycker du bara på Ctrl + Shift + F (Windows, Linux) eller Kommando + Alternativ + F (Mac OS).

De Öppna fil och Kör kommando alternativen är också användbara för att hitta kod på en webbplats, lika mycket som Stilredigerare i Firefox och Element i Chrome och Edge dev verktygspanelen.

Förfina dina färdigheter genom att använda befintlig webbplatskod

Oavsett om du använder Chrome, Firefox, Edge eller andra Chromium-baserade webbläsare (för den delen), kan du spara massor av tid och energi genom att helt enkelt kopiera kod från redan befintliga webbplatser.

Kopiering av webbplatskod bör dock endast göras för din egen inlärning och för att leta runt offline. Att försöka skapa en kopia av en befintlig webbplats och publicera den i befintligt skick kan leda till upphovsrättsintrång. Du kan också ta med din kodning när du är på språng med mobilkodredigerare.