Používanie existujúceho kódu, ktorý vám pomôže vylepšiť vaše zručnosti a učiť sa. Tu je návod, ako skopírovať kód z webových stránok vo väčšine hlavných prehliadačov.
Vytvorenie webovej stránky od nuly vám môže spôsobiť poškriabanie hlavy v závislosti od zložitosti projektu. Zvládnutie tejto časovo náročnej zručnosti môže trvať mesiace alebo roky. Výsledkom je, že väčšina profesionálnych programátorov vyvinula procesy a skratky na zdokonalenie svojich zručností.
To zahŕňa vedenie praktického zoznamu najpopulárnejších a opakujúcich sa programovacích kódov. V tomto článku sa dozviete ďalší trik, ktorý vám umožní zodpovedne kopírovať kód webových stránok pomocou populárnych prehliadačov ako Chrome, Firefox a Edge. Môže to byť neoceniteľný vzdelávací zdroj, ktorý ponúka príklady dokončeného kódu.
Ako skopírovať kód z webových stránok pomocou prehliadača Chrome
V prehliadači Chrome môžete skopírovať kód z webových stránok pomocou nasledujúcich metód.
Cez zdroj stránky
Toto je možno najlepší a najjednoduchší spôsob prístupu k celej kódovej základni webovej stránky alebo webovej stránky, bez ohľadu na prehliadač. Ak chcete zobraziť zdroj stránky v prehliadači Chrome, prejdite na cieľovú webovú lokalitu a kliknite pravým tlačidlom myši na ľubovoľnú časť stránky okrem odkazov, obrázkov alebo reklám.
Kliknite Zobraziť zdroj stránky alebo jednoducho stlačte Ctrl + U (Windows, Linux) resp Command + U (macOS). Skopírujte požadovanú časť kódu alebo celý kód a vložte ho do preferovaného editora kódu.
Cez klávesovú skratku F12
K nástrojom pre vývojárov prehliadača Chrome môžete jednoducho pristupovať tak, že prejdete na webovú stránku a jednoducho stlačíte F12. Chrome Developer Tools obsahuje kód webových stránok a slúži ako nástroj na ladenie pre vývojárov.
Vyberte všetok požadovaný kód, skopírujte ho a vložte do editora kódu podľa vlastného výberu.
Ďalším spôsobom, ako vstúpiť do panela nástrojov pre vývojárov prehliadača Chrome, je nástroj Inspect. Ak to chcete urobiť, navštívte cieľovú webovú stránku, z ktorej chcete skopírovať kód. Teraz stlačte Ctrl + Shift + I (Windows, Linux) resp Command + Option + I (macOS), dostanete sa priamo do Dev Tools.
Prípadne kliknite pravým tlačidlom myši na ľubovoľnú voľnú časť strany a vyberte Skontrolujte z možností ponuky, hneď pod možnosťou zobrazenia zdroja stránky.
Prostredníctvom ponuky Ďalšie akcie prehliadača Chrome
Ďalším spôsobom, ako preskúmať kód webových stránok prostredníctvom nástrojov pre vývojárov v prehliadači Chrome, je kliknúť na tlačidlo s tromi bodkami v pravom hornom rohu cieľového webu. Z možností ponuky vyberte Viac nástrojov, potom Nástroje pre vývojárov.
Skopírujte všetok požadovaný kód a prilepte ho do ľubovoľného editora kódu podľa vlastného výberu. Okrem toho, že ide o nástroj na ladenie, môžete tiež použite nástroje Chrome Dev Tools na vytváranie snímok obrazovky.
Ako skopírovať kód z webových stránok pomocou prehliadača Firefox
Tu sú rôzne spôsoby kopírovania kódu webových stránok pomocou prehliadača Firefox.
Zobraziť zdroj stránky
Ak chcete získať prístup a skopírovať kód webovej lokality vo Firefoxe zobrazením zdroja stránky, jednoducho kliknite pravým tlačidlom myši na cieľovú webovú lokalitu a kliknite Zobraziť zdroj stránky.
Prípadne stlačte Ctrl + U (Windows, Linux) resp Command + U (macOS). Skopírujte všetok požadovaný kód a vložte ho do zvoleného editora kódu.
Zdroj stránky môžete vo Firefoxe rovnako jednoducho zobraziť kliknutím na trojriadkovú ponuku hamburgerov a výberom Viac nástrojova kliknutím Zdroj stránky.
Cez klávesovú skratku F12
Rovnako ako Chrome môžete tiež pristupovať ku kódu webovej stránky v nástrojoch Firefox Dev Tools jednoduchým stlačením klávesu F12 na klávesnici.
Hľadajte konkrétny kód, ktorý hľadáte, pričom osobitnú pozornosť venujte editoru štýlu. Teraz skopírujte a prilepte celý tento kód do svojho obľúbeného editora kódu a pracujte podľa svojich predstáv.
Opäť, podobne ako Chrome, môžete rovnako pristupovať ku kódu webovej stránky vo Firefoxe pomocou vstavaného nástroja Inspect. Ak to chcete urobiť, kliknite pravým tlačidlom myši na ľubovoľnú voľnú časť cieľovej webovej lokality a buď stlačte Q alebo kliknite Skontrolujte. Môžete tiež stlačiť Ctrl + Shift + I (Windows, Linux) resp Command + Option + I (macOS).
Ako bolo vysvetlené, stále môžete použiť Editor štýlov na zorientovanie sa, kým nenájdete kód, ktorý hľadáte. Potom ho skopírujte a vložte do ľubovoľného z nich najlepšie editory kódu, ktoré nájdete.
Prostredníctvom ponuky Firefoxu Ďalšie akcie
Ak chcete skopírovať kód webovej stránky vo Firefoxe prostredníctvom ponuky ďalších akcií, z webovej lokality, ktorej kód chcete skopírovať, kliknite na trojriadkovú ponuku hamburgerov v pravom hornom rohu.
Vyberte Viac nástrojov, potom kliknite Nástroje pre vývojárov webu. Odtiaľ môžete použiť buď Inspector alebo Style Editor na skopírovanie požadovaného kódu.
V prípade Inspectora použite na navigáciu v záznamoch klávesy so šípkami na klávesnici alebo posúvač. V prípade Editora štýlu sa môžete zamerať na konkrétne riadkové položky pomocou ľavého navigačného panela. Keď nájdete to, čo chcete, vložte skopírovaný kód do editora kódu a upravte ho podľa svojho vkusu.
Ako skopírovať kód z webových stránok pomocou Edge
Pomocou Edge môžete jednoducho skopírovať kód webovej stránky rôznymi spôsobmi, a to nasledovne.
Zobraziť zdroj stránky
Ak chcete skopírovať kód webovej lokality zobrazením zdroja stránky v Microsoft Edge, jednoducho kliknite pravým tlačidlom myši na ľubovoľnú voľnú časť cieľovej lokality a vyberte Zobraziť zdroj stránky.
Prípadne môžete jednoducho stlačiť Ctrl + U (Windows, Linux) resp Command + U (macOS), skopírujte požadovanú časť, vložte ju do editora a začnite prispôsobovať kód.
Cez klávesovú skratku F12
Ak používate Edge, môžete rovnako skopírovať kód webovej stránky jednoduchým stlačením klávesu F12 pri návšteve webovej stránky, z ktorej chcete skopírovať kód.
Svoj výber potvrďte kliknutím Otvorte DevTools. Na paneli Dev Tools môžete jednoducho skopírovať všetok požadovaný kód a urýchliť tak svoju prácu.
Ak chcete skopírovať kód webovej lokality pomocou nástroja Inspect od spoločnosti Edge, prejdite na webovú lokalitu, ktorej kód chcete skopírovať, kliknite pravým tlačidlom myši na ľubovoľnú voľnú časť a vyberte Skontrolujte.
Môžete tiež stlačiť Ctrl + Shift + I (Windows, Linux) resp Command + Option + I (macOS). Potom môžete skopírovať a prilepiť kód, ktorý chcete duplikovať a upraviť.
Cez tlačidlo Viac akcií na Edge
Edge vám tiež umožňuje prístup k panelu DevTools prostredníctvom ponuky ďalších akcií. Ak to chcete urobiť, prejdite na webovú lokalitu, ktorej kód chcete skopírovať. Kliknite na tlačidlo s tromi bodkami v pravom hornom rohu a kliknite Viac nástrojov, potom Nástroje pre vývojárov.
Ak váš prehliadač nemá niektorú z týchto možností alebo funkcií, možno budete chcieť skontrolovať, či je aktuálny. Tu je ako skontrolovať a aktualizovať prehliadače Chrome, Firefox a Edge.
Bez ohľadu na to, aký prístup zvolíte a ktorý prehliadač založený na prehliadači Chromium použijete (Chrome, Firefox alebo Edge), môžete vyhľadať konkrétne súbory alebo prvky kliknutím na ponuku s tromi bodkami na paneli Dev Tools a výberom Vyhľadávanie. Prípadne stačí stlačiť Ctrl + Shift + F (Windows, Linux) resp Command + Option + F (macOS).
The Otvorený súbor a Spustiť príkaz možnosti sú tiež užitočné pri hľadaní kódu na webovej lokalite, rovnako ako Editor štýlu vo Firefoxe a Prvky na paneli nástrojov pre vývojárov Chrome a Edge.
Vylepšite svoje zručnosti pomocou kódu existujúcej webovej stránky
Či už používate Chrome, Firefox, Edge alebo iné webové prehliadače založené na prehliadači Chromium (v tomto prípade), môžete ušetriť veľa času a energie jednoduchým skopírovaním kódu z už existujúcich webových stránok.
Kopírovanie kódu webovej stránky by sa však malo vykonávať iba pre vaše vlastné učenie a hranie v režime offline. Pokus o vytvorenie repliky existujúcej webovej stránky a jej zverejnenie tak, ako je, môže viesť k porušeniu autorských práv. Svoje kódovanie si môžete vziať aj na cesty pomocou mobilných editorov kódu.