Comment copier du code à partir de sites Web à l'aide de Chrome, Firefox et Edge

Créer un site Web à partir de zéro peut vous laisser perplexe, selon la complexité du projet. Cette compétence chronophage peut prendre des mois ou des années à maîtriser. En conséquence, la plupart des codeurs professionnels ont développé des processus et des raccourcis pour affiner leurs compétences.

Cela inclut la tenue d'une liste pratique des codes de programmation les plus populaires et les plus répétitifs. Dans cet article, vous apprendrez une autre astuce qui vous permet de copier de manière responsable le code d'un site Web à l'aide de navigateurs populaires tels que Chrome, Firefox et Edge. Il peut s'agir d'une ressource d'apprentissage inestimable, offrant des exemples de code terminé.

Comment copier du code à partir de sites Web à l'aide de Chrome

Vous pouvez copier le code d'un site Web en utilisant les méthodes suivantes sur Chrome.

Via la source de la page

C'est peut-être le moyen le meilleur et le plus simple d'accéder à l'intégralité de la base de code d'un site Web ou d'une page Web, quel que soit le navigateur. Pour afficher la source de la page dans Chrome, accédez au site Web cible et cliquez avec le bouton droit sur n'importe quelle partie de la page autre que les liens, les images ou les publicités.

Cliquez sur Afficher la source de la page ou appuyez simplement sur Ctrl + U (Windows, Linux) ou Commande + U (macOS). Copiez la partie du code que vous voulez ou la totalité et collez-la dans votre éditeur de code préféré.

Via le raccourci F12

Vous pouvez facilement accéder aux outils de développement Chrome en accédant à un site Web et en appuyant simplement sur F12. Chrome Developer Tools héberge le code du site Web et sert également d'outil de débogage pour les développeurs.

Sélectionnez tout le code que vous voulez, copiez-le et collez-le dans un éditeur de code de votre choix.

Une autre façon d'accéder au panneau Outils de développement Chrome consiste à utiliser l'outil Inspecter. Pour ce faire, visitez le site Web cible à partir duquel vous souhaitez copier le code. Maintenant, appuyez sur Ctrl + Maj + I (Windows, Linux) ou Commande + Option + I (macOS), cela vous mènera directement aux outils de développement.

Vous pouvez également cliquer avec le bouton droit sur une partie claire de la page et sélectionner Inspecter dans les options de menu, juste en dessous de l'option permettant d'afficher la source de la page.

Via le menu Plus d'actions de Chrome

Une autre façon d'explorer le code du site Web via Dev Tools dans Chrome consiste à cliquer sur le bouton à trois points dans le coin supérieur droit du site Web cible. Dans les options du menu, sélectionnez Plus d'outils, alors Outils de développement.

Copiez tout le code que vous voulez et collez-le dans n'importe quel éditeur de code de votre choix. De plus, en plus d'être un outil de débogage, vous pouvez également utiliser Chrome Dev Tools pour prendre des captures d'écran.

Comment copier du code à partir de sites Web à l'aide de Firefox

Voici différentes manières de copier le code d'un site Web à l'aide de Firefox.

Afficher la source de la page

Pour accéder et copier le code du site Web dans Firefox en affichant la source de la page, faites simplement un clic droit sur le site Web cible et cliquez sur Afficher la source de la page.

Sinon, appuyez sur Ctrl + U (Windows, Linux) ou Commande + U (macOS). Copiez tout le code que vous voulez et collez-le dans l'éditeur de code de votre choix.

Vous pouvez tout aussi facilement afficher la source de la page dans Firefox en cliquant sur le menu hamburger à trois lignes, en sélectionnant Plus d'outils, et en cliquant Source de la page.

Via le raccourci clavier F12

Tout comme Chrome, vous pouvez également accéder au code d'un site Web dans Firefox Dev Tools en appuyant simplement sur la touche F12 de votre clavier.

Recherchez le code spécifique que vous recherchez, en accordant une attention particulière à l'éditeur de style. Maintenant, copiez et collez tout ce code dans votre éditeur de code préféré et travaillez votre magie.

Encore une fois, comme Chrome, vous pouvez également accéder au code du site Web dans Firefox à l'aide de l'outil Inspect intégré. Pour ce faire, cliquez avec le bouton droit sur n'importe quelle partie claire du site Web cible et appuyez sur Q ou cliquez Inspecter. Vous pouvez également appuyer sur Ctrl + Maj + I (Windows, Linux) ou Commande + Option + I (macOS).

Comme expliqué, vous pouvez toujours utiliser l'éditeur de style pour vous repérer jusqu'à ce que vous trouviez le code que vous recherchez. Ensuite, copiez-le et collez-le dans l'un des les meilleurs éditeurs de code que vous pouvez trouver.

Via le menu Plus d'actions de Firefox

Pour copier le code du site Web dans Firefox via le menu Plus d'actions, à partir du site Web dont vous souhaitez copier le code, cliquez sur le menu hamburger à trois lignes dans le coin supérieur droit.

Sélectionner Plus d'outils, puis clique Outils de développement Web. À partir de là, vous pouvez utiliser l'inspecteur ou l'éditeur de style pour copier le code souhaité.

Pour Inspector, utilisez les touches fléchées de votre clavier ou la barre de défilement pour parcourir les entrées. Pour l'éditeur de style, vous pouvez vous concentrer sur des éléments de ligne spécifiques à l'aide du panneau de navigation de gauche. Lorsque vous avez trouvé ce que vous voulez, collez le code copié dans votre éditeur de code et personnalisez-le à votre goût.

Comment copier du code à partir de sites Web à l'aide de Edge

Vous pouvez facilement copier le code du site Web de différentes manières en utilisant Edge comme suit.

Afficher la source de la page

Pour copier le code du site Web en affichant la source de la page dans Microsoft Edge, cliquez simplement avec le bouton droit sur n'importe quelle partie claire du site cible et sélectionnez Afficher la source de la page.

Alternativement, vous pouvez simplement appuyer sur Ctrl + U (Windows, Linux) ou Commande + U (macOS), copiez la partie souhaitée, collez-la dans un éditeur et commencez à personnaliser le code.

Via le raccourci clavier F12

Si vous utilisez Edge, vous pouvez également copier le code du site Web en appuyant simplement sur la touche F12 lorsque vous visitez le site Web à partir duquel vous souhaitez copier le code.

Confirmez votre choix en cliquant Ouvrir DevTools. Dans le panneau Dev Tools, vous pouvez facilement copier tout le code que vous voulez et accélérer votre travail.

Pour copier le code du site Web à l'aide de l'outil d'inspection d'Edge, accédez au site Web dont vous souhaitez copier le code, cliquez avec le bouton droit sur n'importe quelle partie claire et sélectionnez Inspecter.

Vous pouvez également appuyer sur Ctrl + Maj + I (Windows, Linux) ou Commande + Option + I (macOS). Vous pouvez ensuite copier et coller le code que vous souhaitez dupliquer et modifier.

Via le bouton Plus d'actions d'Edge

Edge vous permet également d'accéder à son panneau DevTools via le menu Plus d'actions. Pour cela, rendez-vous sur le site dont vous souhaitez copier le code. Cliquez sur le bouton des trois points dans le coin supérieur droit, puis cliquez sur Plus d'outils, alors Outils de développement.

Si votre navigateur ne dispose pas de l'une de ces options ou fonctionnalités, vous pouvez vérifier s'il est à jour. Voici comment vérifier et mettre à jour Chrome, Firefox et Edge.

Quelle que soit l'approche que vous adoptez et le navigateur basé sur Chromium que vous utilisez (Chrome, Firefox ou Edge), vous peut rechercher des fichiers ou des éléments spécifiques en cliquant sur le menu à trois points du panneau Outils de développement et sélection Recherche. Sinon, appuyez simplement sur Ctrl + Maj + F (Windows, Linux) ou Commande + Option + F (macOS).

Le Fichier ouvert et Exécuter la commande sont également utiles pour trouver du code sur un site Web, autant que le Éditeur de styles dans Firefox et Éléments dans le panneau des outils de développement Chrome et Edge.

Affinez vos compétences en utilisant le code de site Web existant

Que vous utilisiez Chrome, Firefox, Edge ou d'autres navigateurs Web basés sur Chromium (d'ailleurs), vous pouvez économiser beaucoup de temps et d'énergie en copiant simplement le code de sites Web déjà existants.

Cependant, la copie du code du site Web ne doit être effectuée que pour votre propre apprentissage et pour fouiller hors ligne. Tenter de créer une réplique d'un site Web existant et de le publier tel quel peut entraîner une violation du droit d'auteur. Vous pouvez également emporter votre codage en déplacement avec les éditeurs de code mobiles.