Sådan kopieres kode fra websteder ved hjælp af Chrome, Firefox og Edge

At oprette en hjemmeside fra bunden kan få dig til at klø dig i hovedet, afhængigt af projektets kompleksitet. Denne tidskrævende færdighed kan tage måneder eller år at mestre. Som følge heraf har de fleste professionelle kodere udviklet processer og genveje til at forfine deres færdigheder.

Dette inkluderer at holde en praktisk liste over den mest populære og gentagne programmeringskode. I denne artikel lærer du et andet trick, der giver dig mulighed for ansvarligt at kopiere webstedskode ved hjælp af populære browsere som Chrome, Firefox og Edge. Det kan være en uvurderlig læringsressource, der giver eksempler på gennemført kode.

Sådan kopierer du kode fra websteder ved hjælp af Chrome

Du kan kopiere kode fra et websted ved hjælp af følgende metoder på Chrome.

Via sidekilde

Dette er måske den bedste og nemmeste måde at få adgang til hele kodebasen på et websted eller en webside, uanset browser. For at se sidekilden i Chrome skal du gå til målwebstedet og højreklikke på en hvilken som helst anden del af siden end links, billeder eller annoncer.

Klik Vis kildetekst eller bare tryk Ctrl + U (Windows, Linux) eller Kommando + U (macOS). Kopier den del af koden, du ønsker, eller hele den, og indsæt den i din foretrukne kodeeditor.

Via F12-genvejen

Du kan nemt få adgang til Chrome Developer Tools ved at gå til et websted og blot trykke F12. Chrome Developer Tools indeholder webstedskode og fungerer også som et fejlfindingsværktøj til udviklere.

Vælg al den kode, du ønsker, kopier den, og indsæt den i en kodeeditor efter eget valg.

En anden måde at gå ind i panelet Chrome Developer Tools er via Inspect-værktøjet. For at gøre det skal du besøge målwebstedet, hvorfra du vil kopiere kode. Tryk nu på Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (macOS), dette fører dig direkte til Dev Tools.

Alternativt kan du højreklikke på en fri del af siden og vælge Inspicere fra menuindstillingerne lige under muligheden for at se sidekilde.

Gennem Chromes menu Flere handlinger

En anden måde at udforske webstedskode via Dev Tools i Chrome er at klikke på knappen med tre prikker i øverste højre hjørne af målwebstedet. Vælg fra menuindstillingerne Flere værktøjer, derefter Udvikler værktøjer.

Kopiér al den kode, du ønsker, og indsæt den i en kodeeditor efter eget valg. Udover at være et fejlfindingsværktøj kan du også bruge Chrome Dev Tools til at tage skærmbilleder.

Sådan kopieres kode fra websteder ved hjælp af Firefox

Her er forskellige måder at kopiere webstedskode ved hjælp af Firefox.

Vis kildetekst

For at få adgang til og kopiere webstedskode i Firefox ved at se sidekilden, skal du blot højreklikke på målwebstedet og klikke Vis kildetekst.

Alternativt, tryk på Ctrl + U (Windows, Linux) eller Kommando + U (macOS). Kopier al den kode, du ønsker, og indsæt den i din valgte kodeeditor.

Du kan lige så nemt se sidekilden i Firefox ved at klikke på hamburgermenuen med tre linjer og vælge Flere værktøjer, og klikker Sidekilde.

Via F12-tastaturgenvejen

Ligesom Chrome kan du også få adgang til koden for et websted i Firefox Dev Tools ved blot at trykke på F12-tasten på dit tastatur.

Se dig omkring efter den specifikke kode, du søger, og vær særlig opmærksom på Style Editor. Kopier og indsæt nu al den kode i dit yndlingskoderedigeringsprogram, og udfør din magi.

Igen, ligesom Chrome, kan du lige så få adgang til webstedskode i Firefox ved hjælp af det indbyggede Inspect-værktøj. For at gøre det skal du højreklikke på en vilkårlig del af målwebstedet og enten trykke på Q eller klik Inspicere. Du kan også trykke på Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (macOS).

Som forklaret kan du stadig bruge Style Editor til at finde rundt, indtil du finder den kode, du søger. Kopier og indsæt det derefter i en af ​​dem de bedste kodeeditorer du kan finde.

Via Firefox-menuen Flere handlinger

For at kopiere webstedskode i Firefox via menuen flere handlinger, fra webstedet, hvis kode du vil kopiere, skal du klikke på hamburgermenuen med tre linjer i øverste højre hjørne.

Vælg Flere værktøjer, klik derefter Webudviklerværktøjer. Herfra kan du bruge enten Inspector eller Style Editor til at kopiere den ønskede kode.

For Inspector skal du bruge piletasterne på dit tastatur eller rullepanelet til at navigere i posterne. For Style Editor kan du fokusere på specifikke linjeposter ved hjælp af venstre navigationspanel. Når du har fundet det, du vil have, skal du indsætte den kopierede kode i din kodeeditor og tilpasse den til din smag.

Sådan kopieres kode fra websteder ved hjælp af Edge

Du kan nemt kopiere webstedskode på forskellige måder ved hjælp af Edge som følger.

Vis kildetekst

For at kopiere webstedskode ved at se sidekilden i Microsoft Edge skal du blot højreklikke på en vilkårlig del af målwebstedet og vælge Vis kildetekst.

Alternativt kan du blot trykke på Ctrl + U (Windows, Linux) eller Kommando + U (macOS), kopier den del, du ønsker, indsæt den i en editor, og begynd at tilpasse koden.

Via F12-tastaturgenvejen

Hvis du bruger Edge, kan du ligeledes kopiere webstedskode ved blot at trykke på F12-tasten, når du besøger webstedet, som du vil kopiere kode fra.

Bekræft dit valg ved at klikke Åbn DevTools. På panelet Dev Tools kan du nemt kopiere al den kode, du ønsker, og gøre dit job hurtigere.

For at kopiere webstedskode ved hjælp af Edge's Inspect-værktøj skal du gå til webstedet, hvis kode du vil kopiere, højreklikke på en vilkårlig del og vælge Inspicere.

Du kan også trykke på Ctrl + Shift + I (Windows, Linux) eller Kommando + Alternativ + I (macOS). Du kan derefter kopiere og indsætte den kode, du vil duplikere og redigere.

Via Edge's More Actions-knap

Edge giver dig også adgang til dets DevTools-panel via menuen flere handlinger. For at gøre det skal du gå til den hjemmeside, hvis kode du vil kopiere. Klik på knappen med tre prikker i øverste højre hjørne, og klik Flere værktøjer, derefter Udvikler værktøjer.

Hvis din browser mangler nogen af ​​disse muligheder eller funktioner, kan du tjekke, om den er opdateret. Her er hvordan man tjekker og opdaterer Chrome, Firefox og Edge.

Uanset hvilken tilgang du vælger, og hvilken Chromium-baseret browser du bruger (Chrome, Firefox eller Edge), kan søge efter specifikke filer eller elementer ved at klikke på menuen med tre prikker i panelet Dev Tools og vælge Søg. Alternativt skal du blot trykke på Ctrl + Shift + F (Windows, Linux) eller Kommando + Alternativ + F (macOS).

Det Åben fil og Kør kommando muligheder er også nyttige til at finde kode på et websted, lige så meget som Style Editor i Firefox og Elementer i Chrome og Edge-udviklerværktøjspanelet.

Forfin dine færdigheder ved at bruge eksisterende webstedskode

Uanset om du bruger Chrome, Firefox, Edge eller andre Chromium-baserede webbrowsere (for den sags skyld), kan du spare masser af tid og energi ved blot at kopiere kode fra allerede eksisterende websteder.

Kopiering af webstedskode bør dog kun ske for din egen læring og for at finde rundt offline. Forsøg på at oprette en kopi af et eksisterende websted og offentliggøre det, som det er, kan føre til krænkelse af ophavsretten. Du kan også tage din kodning med på farten med mobilkodeeditorer.