Come copiare il codice dai siti Web utilizzando Chrome, Firefox e Edge

La creazione di un sito Web da zero può farti grattare la testa, a seconda della complessità del progetto. Questa abilità che richiede tempo può richiedere mesi o anni per essere padroneggiata. Di conseguenza, la maggior parte dei programmatori professionisti ha sviluppato processi e scorciatoie per affinare le proprie capacità.

Ciò include mantenere un pratico elenco del codice di programmazione più popolare e ripetitivo. In questo articolo imparerai un altro trucco che ti consente di copiare responsabilmente il codice del sito web utilizzando i browser più diffusi come Chrome, Firefox e Edge. Può essere una preziosa risorsa di apprendimento, offrendo esempi di codice completato.

Come copiare il codice dai siti Web utilizzando Chrome

Puoi copiare il codice da un sito Web utilizzando i seguenti metodi su Chrome.

Tramite la fonte della pagina

Questo è forse il modo migliore e più semplice per accedere all'intera base di codice di un sito Web o di una pagina Web, indipendentemente dal browser. Per visualizzare l'origine della pagina in Chrome, vai al sito Web di destinazione e fai clic con il pulsante destro del mouse su qualsiasi parte della pagina diversa da link, immagini o annunci.

Clic Visualizza il sorgente della pagina o semplicemente premere Ctrl + U (Windows, Linux) o Comando + U (Mac OS). Copia la parte del codice che desideri o tutto e incollalo nel tuo editor di codice preferito.

Tramite la scorciatoia F12

Puoi accedere facilmente agli strumenti per sviluppatori di Chrome accedendo a un sito Web e semplicemente premendo F12. Chrome Developer Tools ospita il codice del sito web e funge anche da strumento di debug per gli sviluppatori.

Seleziona tutto il codice che desideri, copialo e incollalo in un editor di codice a tua scelta.

Un altro modo per accedere al pannello degli strumenti per sviluppatori di Chrome è tramite lo strumento Ispeziona. Per fare ciò, visita il sito Web di destinazione da cui desideri copiare il codice. Ora, premi Ctrl + Maiusc + I (Windows, Linux) o Comando + Opzione + I (macOS), questo ti porterà direttamente a Dev Tools.

In alternativa, fai clic con il pulsante destro del mouse su qualsiasi parte libera della pagina e seleziona Ispezionare dalle opzioni del menu, appena sotto l'opzione per visualizzare il sorgente della pagina.

Attraverso il menu Altre azioni di Chrome

Un altro modo per esplorare il codice del sito Web tramite Dev Tools in Chrome è fare clic sul pulsante con tre punti nell'angolo in alto a destra del sito Web di destinazione. Dalle opzioni del menu, selezionare Più strumenti, Poi Strumenti di sviluppo.

Copia tutto il codice che desideri e incollalo in qualsiasi editor di codice di tua scelta. Inoltre, oltre ad essere uno strumento di debug, puoi anche usa Chrome Dev Tools per fare screenshot.

Come copiare il codice dai siti Web utilizzando Firefox

Ecco diversi modi per copiare il codice del sito Web utilizzando Firefox.

Visualizza sorgente pagina

Per accedere e copiare il codice del sito Web in Firefox visualizzando l'origine della pagina, è sufficiente fare clic con il pulsante destro del mouse sul sito Web di destinazione e fare clic su Visualizza sorgente pagina.

In alternativa, premere Ctrl + U (Windows, Linux) o Comando + U (Mac OS). Copia tutto il codice che desideri e incollalo nel tuo editor di codice preferito.

Puoi visualizzare altrettanto facilmente l'origine della pagina in Firefox facendo clic sul menu dell'hamburger a tre righe, selezionando Più strumentie facendo clic Sorgente della pagina.

Tramite la scorciatoia da tastiera F12

Proprio come Chrome, puoi anche accedere al codice di un sito Web in Firefox Dev Tools semplicemente premendo il tasto F12 sulla tastiera.

Cerca il codice specifico che cerchi, prestando particolare attenzione all'editor di stile. Ora, copia e incolla tutto quel codice nel tuo editor di codice preferito e fai la tua magia.

Ancora una volta, come Chrome, puoi ugualmente accedere al codice del sito Web in Firefox utilizzando lo strumento Inspect integrato. Per fare ciò, fai clic con il pulsante destro del mouse su qualsiasi parte chiara del sito Web di destinazione e premi Q o clicca Ispezionare. Puoi anche premere Ctrl + Maiusc + I (Windows, Linux) o Comando + Opzione + I (Mac OS).

Come spiegato, puoi ancora utilizzare l'editor di stile per orientarti finché non trovi il codice che cerchi. Quindi copialo e incollalo in uno qualsiasi dei i migliori editor di codice che puoi trovare.

Tramite il menu Altre azioni di Firefox

Per copiare il codice del sito Web in Firefox tramite il menu Altre azioni, dal sito Web di cui si desidera copiare il codice, fare clic sul menu dell'hamburger a tre righe nell'angolo in alto a destra.

Selezionare Più strumenti, quindi fare clic Strumenti per sviluppatori web. Da qui, puoi utilizzare Inspector o Style Editor per copiare il codice desiderato.

Per Inspector, utilizza i tasti freccia sulla tastiera o la barra di scorrimento per navigare tra le voci. Per Style Editor, puoi concentrarti su elementi pubblicitari specifici utilizzando il pannello di navigazione a sinistra. Quando hai trovato ciò che desideri, incolla il codice copiato nel tuo editor di codice e personalizzalo secondo i tuoi gusti.

Come copiare il codice dai siti Web utilizzando Edge

Puoi facilmente copiare il codice del sito Web in diversi modi utilizzando Edge come segue.

Visualizza sorgente pagina

Per copiare il codice del sito Web visualizzando l'origine della pagina in Microsoft Edge, fai semplicemente clic con il pulsante destro del mouse su qualsiasi parte chiara del sito di destinazione e seleziona Visualizza il sorgente della pagina.

In alternativa, puoi semplicemente premere Ctrl + U (Windows, Linux) o Comando + U (macOS), copia la parte che desideri, incollala in un editor e inizia a personalizzare il codice.

Tramite la scorciatoia da tastiera F12

Se utilizzi Edge, puoi ugualmente copiare il codice del sito Web semplicemente premendo il tasto F12 quando visiti il ​​sito Web da cui desideri copiare il codice.

Conferma la tua scelta cliccando Apri Strumenti di sviluppo. Nel pannello Dev Tools, puoi facilmente copiare tutto il codice che desideri e velocizzare il tuo lavoro.

Per copiare il codice del sito Web utilizzando lo strumento Ispeziona di Edge, vai al sito Web di cui desideri copiare il codice, fai clic con il pulsante destro del mouse su qualsiasi parte chiara e seleziona Ispezionare.

Puoi anche premere Ctrl + Maiusc + I (Windows, Linux) o Comando + Opzione + I (Mac OS). È quindi possibile copiare e incollare il codice che si desidera duplicare e modificare.

Tramite il pulsante Altre azioni di Edge

Edge ti consente anche di accedere al suo pannello DevTools tramite il menu Altre azioni. Per fare ciò, vai al sito Web di cui desideri copiare il codice. Fai clic sul pulsante con i tre puntini nell'angolo in alto a destra e fai clic Più strumenti, Poi Strumenti di sviluppo.

Se il tuo browser non dispone di una di queste opzioni o funzionalità, ti consigliamo di controllare se è aggiornato. Ecco come controllare e aggiornare Chrome, Firefox e Edge.

Qualunque sia l'approccio adottato e qualunque browser basato su Chromium utilizzi (Chrome, Firefox o Edge), tu può cercare file o elementi specifici facendo clic sul menu a tre puntini del pannello Dev Tools e selezionando Ricerca. In alternativa, premi semplicemente CTRL+MAIUSC+F (Windows, Linux) o Comando + Opzione + F (Mac OS).

IL Apri il file E Esegui comando opzioni sono anche utili per trovare il codice su un sito Web, tanto quanto il Editor di stile in Firefox e Elementi nel pannello degli strumenti di sviluppo di Chrome e Edge.

Affina le tue abilità utilizzando il codice del sito web esistente

Indipendentemente dal fatto che utilizzi Chrome, Firefox, Edge o altri browser Web basati su Chromium (del resto), puoi risparmiare un sacco di tempo ed energia semplicemente copiando il codice da siti Web già esistenti.

Tuttavia, la copia del codice del sito Web dovrebbe essere eseguita solo per il tuo apprendimento e per curiosare offline. Il tentativo di creare una replica di un sito Web esistente e pubblicarlo così com'è può comportare una violazione del copyright. Puoi anche portare la tua codifica in viaggio con gli editor di codice per dispositivi mobili.