Koodin kopioiminen verkkosivustoilta Chromen, Firefoxin ja Edgen avulla

Verkkosivuston luominen tyhjästä voi jättää päätäsi raapumaan projektin monimutkaisuudesta riippuen. Tämän aikaa vievän taidon hallitseminen voi kestää kuukausia tai vuosia. Tämän seurauksena useimmat ammattikoodaajat ovat kehittäneet prosesseja ja pikakuvakkeita taitojensa hiomiseksi.

Tämä sisältää kätevän luettelon pitämisen suosituimmista ja toistuvista ohjelmointikoodeista. Tässä artikkelissa opit toisen tempun, jonka avulla voit vastuullisesti kopioida verkkosivuston koodia suosituilla selaimilla, kuten Chromella, Firefoxilla ja Edgellä. Se voi olla korvaamaton oppimisresurssi, joka tarjoaa esimerkkejä valmiista koodista.

Kuinka kopioida koodi verkkosivustoilta Chromen avulla

Voit kopioida koodin verkkosivustolta seuraavilla tavoilla Chromessa.

Sivun lähteen kautta

Tämä on ehkä paras ja helpoin tapa päästä käsiksi verkkosivuston tai verkkosivun koko koodikantaan selaimesta riippumatta. Voit tarkastella sivun lähdettä Chromessa siirtymällä kohdesivustolle ja napsauttamalla hiiren kakkospainikkeella mitä tahansa sivun osaa, lukuun ottamatta linkkejä, kuvia tai mainoksia.

Klikkaus Näytä sivun lähdekoodi tai yksinkertaisesti paina Ctrl + U (Windows, Linux) tai Komento + U (Mac käyttöjärjestelmä). Kopioi haluamasi koodin osa tai koko se ja liitä se haluamaasi koodieditoriin.

F12-pikakuvakkeen kautta

Pääset helposti Chromen kehittäjätyökaluihin siirtymällä verkkosivustolle ja painamalla F12. Chrome Developer Tools sisältää verkkosivuston koodin ja toimii myös kehittäjien virheenkorjaustyökaluna.

Valitse kaikki haluamasi koodi, kopioi se ja liitä se valitsemaasi koodieditoriin.

Toinen tapa päästä Chrome Developer Tools -paneeliin on Tarkastus-työkalu. Voit tehdä tämän käymällä kohdesivustolla, josta haluat kopioida koodin. Nyt paina Ctrl + Vaihto + I (Windows, Linux) tai Komento + Optio + I (macOS), tämä vie sinut suoraan Dev Toolsiin.

Vaihtoehtoisesti napsauta hiiren kakkospainikkeella mitä tahansa sivun selkeää osaa ja valitse Tarkastaa valikkovaihtoehdoista, aivan vaihtoehdon alapuolella nähdäksesi sivun lähteen.

Chromen Lisää toimintoja -valikon kautta

Toinen tapa tutustua verkkosivuston koodiin Chromen Dev Toolsin avulla on napsauttaa kolmen pisteen painiketta kohdesivuston oikeassa yläkulmassa. Valitse valikon vaihtoehdoista Lisää työkaluja, sitten Kehittäjän työkalut.

Kopioi kaikki haluamasi koodi ja liitä se mihin tahansa valitsemaasi koodieditoriin. Sen lisäksi, että se on virheenkorjaustyökalu, voit myös käytä Chrome Dev Toolsia ottamaan kuvakaappauksia.

Kuinka kopioida koodi verkkosivustoilta Firefoxin avulla

Tässä on erilaisia ​​tapoja kopioida verkkosivuston koodi Firefoxilla.

Näytä sivun lähdekoodi

Voit käyttää ja kopioida verkkosivuston koodia Firefoxissa tarkastelemalla sivun lähdettä napsauttamalla hiiren kakkospainikkeella kohdesivustoa ja napsauttamalla Näytä sivun lähdekoodi.

Vaihtoehtoisesti paina Ctrl + U (Windows, Linux) tai Komento + U (Mac käyttöjärjestelmä). Kopioi kaikki haluamasi koodi ja liitä se valitsemaasi koodieditoriin.

Voit yhtä helposti tarkastella sivun lähdettä Firefoxissa napsauttamalla kolmirivistä hampurilaisvalikkoa ja valitsemalla Lisää työkalujaja napsauttamalla Sivun lähde.

F12-pikanäppäimen kautta

Kuten Chrome, voit myös käyttää verkkosivuston koodia Firefox Dev Toolsissa painamalla näppäimistön F12-näppäintä.

Etsi etsimäsi koodi ja kiinnitä erityistä huomiota tyylieditoriin. Kopioi ja liitä kaikki tämä koodi suosikkikoodieditoriin ja käytä taikuuttasi.

Jälleen, kuten Chrome, voit yhtä hyvin käyttää verkkosivuston koodia Firefoxissa sisäänrakennetun tarkastustyökalun avulla. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella mitä tahansa selkeää osaa kohdesivustosta ja painamalla joko K tai napsauta Tarkastaa. Voit myös painaa Ctrl + Vaihto + I (Windows, Linux) tai Komento + Optio + I (Mac käyttöjärjestelmä).

Kuten selitettiin, voit silti käyttää tyylieditoria löytääksesi paikan, kunnes löydät etsimäsi koodin. Kopioi ja liitä se sitten mihin tahansa parhaat koodieditorit, joita voit löytää.

Firefoxin Lisää toimintoja -valikon kautta

Jos haluat kopioida verkkosivuston koodin Firefoxissa Lisää toimintoja -valikon kautta, napsauta sivulta, jonka koodin haluat kopioida, oikeasta yläkulmasta kolmirivistä hampurilaisvalikkoa.

Valitse Lisää työkaluja, napsauta sitten Verkkokehittäjätyökalut. Täältä voit kopioida haluamasi koodin joko Inspectorilla tai Style Editorilla.

Käytä Inspectorissa näppäimistön nuolinäppäimiä tai vierityspalkkia merkintöjen selailuun. Tyylieditorissa voit keskittyä tiettyihin rivikohtiin käyttämällä vasemmanpuoleista navigointipaneelia. Kun olet löytänyt haluamasi, liitä kopioitu koodi koodieditoriin ja muokkaa sitä makusi mukaan.

Kuinka kopioida koodi verkkosivustoilta Edgen avulla

Voit helposti kopioida verkkosivuston koodin eri tavoilla käyttämällä Edgeä seuraavasti.

Näytä sivun lähdekoodi

Jos haluat kopioida verkkosivuston koodin tarkastelemalla sivun lähdettä Microsoft Edgessä, napsauta hiiren kakkospainikkeella mitä tahansa selkeää kohdesivuston osaa ja valitse Näytä sivun lähdekoodi.

Vaihtoehtoisesti voit yksinkertaisesti painaa Ctrl + U (Windows, Linux) tai Komento + U (macOS), kopioi haluamasi osa, liitä se editoriin ja aloita koodin mukauttaminen.

F12-pikanäppäimen kautta

Jos käytät Edgeä, voit myös kopioida verkkosivuston koodin yksinkertaisesti painamalla F12-näppäintä, kun vierailet verkkosivustolla, jolta haluat kopioida koodin.

Vahvista valintasi napsauttamalla Avaa DevTools. Dev Tools -paneelissa voit helposti kopioida kaiken haluamasi koodin ja nopeuttaa työtäsi.

Jos haluat kopioida verkkosivuston koodin Edgen Inspect -työkalulla, siirry verkkosivustolle, jonka koodin haluat kopioida, napsauta mitä tahansa tyhjää osaa hiiren kakkospainikkeella ja valitse Tarkastaa.

Voit myös painaa Ctrl + Vaihto + I (Windows, Linux) tai Komento + Optio + I (Mac käyttöjärjestelmä). Voit sitten kopioida ja liittää koodin, jonka haluat monistaa ja muokata.

Edgen Lisää toimintoja -painikkeen kautta

Edgen avulla voit myös käyttää DevTools-paneeliaan Lisää toimintoja -valikon kautta. Voit tehdä tämän siirtymällä verkkosivustolle, jonka koodin haluat kopioida. Napsauta kolmen pisteen painiketta oikeassa yläkulmassa ja napsauta Lisää työkaluja, sitten Kehittäjän työkalut.

Jos selaimestasi puuttuu jokin näistä vaihtoehdoista tai ominaisuuksista, sinun kannattaa tarkistaa, onko se ajan tasalla. Tässä on kuinka tarkistaa ja päivittää Chrome, Firefox ja Edge.

Mitä tahansa lähestymistapaa käytät ja mitä Chromium-pohjaista selainta käytät (Chrome, Firefox tai Edge), sinä voi etsiä tiettyjä tiedostoja tai elementtejä napsauttamalla Dev Tools -paneelin kolmen pisteen valikkoa ja valitsemalla Hae. Vaihtoehtoisesti yksinkertaisesti paina Ctrl + Vaihto + F (Windows, Linux) tai Komento + Optio + F (Mac käyttöjärjestelmä).

The Avaa tiedosto ja Suorita komento vaihtoehdot ovat hyödyllisiä myös koodin löytämisessä verkkosivustolta, niin paljon kuin Tyylieditori Firefoxissa ja Elementit Chromen ja Edge dev -työkalujen paneelissa.

Tarkenna taitojasi käyttämällä olemassa olevaa verkkosivustokoodia

Käytätpä sitten Chromea, Firefoxia, Edgeä tai muita Chromium-pohjaisia ​​selaimia, voit säästää paljon aikaa ja energiaa yksinkertaisesti kopioimalla koodia jo olemassa olevilta verkkosivustoilta.

Sivuston koodin kopiointi tulisi kuitenkin tehdä vain omaa oppimista ja offline-tilassa näkemistä varten. Olemassa olevan verkkosivuston kopion luominen ja sen julkaiseminen sellaisenaan voi johtaa tekijänoikeusrikkomukseen. Voit myös ottaa koodaussi mukaan tien päällä mobiilikoodieditorien avulla.