La création d’un site web à partir de zéro peut vous laisser perplexe, en fonction de la complexité du projet. Il faut parfois des mois, voire des années, pour maîtriser cette compétence qui prend du temps. C’est pourquoi la plupart des codeurs professionnels ont mis au point 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 permettra 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 complété.
Comment copier le code d’un site web avec Chrome
Vous pouvez copier du code à partir d’un site web en utilisant les méthodes suivantes sur Chrome.
Via la source de la page
C’est peut-être le meilleur moyen, et le plus simple, d’accéder à l’ensemble du code d’un site ou d’une page web, quel que soit le navigateur. Pour afficher la source de la page dans Chrome, rendez-vous sur le site web cible et cliquez avec le bouton droit de la souris sur n’importe quelle partie de la page, à l’exception des liens, des images et des publicités.
Cliquer Voir la source de la page ou appuyez simplement sur Ctrl + U (Windows, Linux) ou Commande + U (macOS). Copiez la partie du code que vous souhaitez ou la totalité et collez-la dans votre éditeur de code préféré.
Via le raccourci F12
Vous pouvez facilement accéder à Chrome Developer Tools en allant sur un site web et en appuyant simplement sur F12. Chrome Developer Tools héberge le code des sites web et sert d’outil de débogage pour les développeurs.
Sélectionnez tout le code que vous voulez, copiez-le et collez-le dans l’éditeur de code de votre choix.
Via l’outil Inspecter
L’outil Inspecter est un autre moyen d’accéder au panneau Chrome Developer Tools. Pour ce faire, visitez le site web cible à partir duquel vous souhaitez copier le code. Appuyez ensuite sur Ctrl + Shift + I (Windows, Linux) ou Commande + Option + I (macOS), cela vous amènera directement aux outils de développement.
Vous pouvez également cliquer avec le bouton droit de la souris sur n’importe quelle partie claire de la page et sélectionner Inspecter dans les options du menu, juste en dessous de l’option permettant d’afficher la source de la page.
Une autre façon d’explorer le code d’un site web via Dev Tools dans Chrome est de cliquer sur le bouton à trois points dans le coin supérieur droit du site web cible. Dans le menu d’options, sélectionnez Plus d’outils, puis Outils pour développeurs.
Copiez tout le code que vous souhaitez et collez-le dans l’éditeur de code de votre choix. En plus d’être un outil de débogage, Chrome Dev Tools vous permet également de faire des captures d’écran.
Comment copier le code d’un site web avec Firefox
Voici différentes façons de copier le code d’un site web à l’aide de Firefox.
Voir la source de la page
Pour accéder et copier le code d’un site web dans Firefox en affichant la source de la page, il suffit de cliquer avec le bouton droit de la souris sur le site web cible et de cliquer sur Voir la source de la page.
Vous pouvez également appuyer 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 bien afficher la source de la page dans Firefox en cliquant sur le menu hamburger à trois lignes, en sélectionnant Plus d’outilset en cliquant sur Page Source.
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 cherchez, 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 opérez votre magie.
Via l’outil d’inspection
Comme pour 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 de la souris sur n’importe quelle partie claire du site web cible et appuyez sur Q ou cliquez Inspecter. Vous pouvez également appuyer sur Ctrl + Shift + I (Windows, Linux) ou Commande + Option + I (macOS).
Comme expliqué, vous pouvez toujours utiliser l’éditeur de style pour vous y retrouver jusqu’à ce que vous trouviez le code que vous cherchez. Copiez-le ensuite et collez-le dans l’un des meilleurs éditeurs de code que vous pouvez trouver.
Pour copier le code d’un site web dans Firefox via le menu Plus d’actions, à partir du site web dont vous voulez copier le code, cliquez sur le menu hamburger à trois lignes dans le coin supérieur droit.
Sélectionner Plus d’outils, puis cliquez sur Outils du développeur Web. À partir de là, vous pouvez utiliser l’inspecteur ou l’éditeur de style pour copier le code souhaité.
Pour l’inspecteur, utilisez les touches fléchées de votre clavier ou la barre de défilement pour naviguer dans les entrées. Pour l’Éditeur de style, vous pouvez vous concentrer sur des lignes spécifiques à l’aide du panneau de navigation de gauche. Lorsque vous avez trouvé ce que vous vouliez, collez le code copié dans votre éditeur de code et personnalisez-le à votre goût.
Comment copier le code d’un site Web à l’aide d’Edge
Vous pouvez facilement copier le code d’un site Web de différentes manières à l’aide de Edge.
Voir la source de la page
Pour copier le code d’un site Web en affichant la source de la page dans Microsoft Edge, il suffit de cliquer avec le bouton droit de la souris sur n’importe quelle partie claire du site cible et de sélectionner Afficher la source de la page.
Vous pouvez également appuyer sur Ctrl + U (Windows, Linux) ou Commande + U (macOS), copiez la partie que vous souhaitez, 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 d’un site web en appuyant simplement sur la touche F12 lorsque vous visitez le site web dont vous voulez copier le code.
Confirmez votre choix en cliquant sur Ouvrir DevTools. Dans le panneau Dev Tools, vous pouvez facilement copier tout le code que vous voulez et rendre votre travail plus rapide.
Via l’outil Inspecter
Pour copier le code d’un site web à l’aide de l’outil Inspecter de Edge, allez sur le site web dont vous souhaitez copier le code, cliquez avec le bouton droit de la souris sur une partie claire et sélectionnez Inspecter.
Vous pouvez également appuyer sur Ctrl + Shift + I (Windows, Linux) ou Commande + Option + I (macOS). Vous pouvez ensuite copier et coller le code que vous souhaitez dupliquer et modifier.
Le bouton « Plus d’actions » de Edge
Edge vous permet également d’accéder à son panneau DevTools via le menu Plus d’actions. Pour ce faire, rendez-vous sur le site web dont vous souhaitez copier le code. Cliquez sur le bouton à trois points dans le coin supérieur droit, puis cliquez sur Plus d’outils, puis Outils du développeur.
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 votre approche et quel que soit le navigateur basé sur Chromium que vous utilisez (Chrome, Firefox ou Edge), vous pouvez rechercher des fichiers ou des éléments spécifiques en cliquant sur le menu à trois points du panneau Outils de développement et en sélectionnant Rechercher. Vous pouvez également appuyer sur Ctrl + Shift + F (Windows, Linux) ou Commande + Option + F (macOS).
Le Ouvrir le fichier et Exécuter la commande sont également utiles pour trouver du code sur un site web, tout comme les options Éditeur de style dans Firefox et Éléments dans le panneau d’outils de développement de Chrome et Edge.
Le développement des compétences en utilisant le code d’un site web existant
Que vous utilisiez Chrome, Firefox, Edge ou d’autres navigateurs web basés sur Chromium, vous pouvez économiser beaucoup de temps et d’énergie en copiant simplement le code de sites web existants.
Cependant, copier le code d’un site web ne devrait être fait que pour votre propre apprentissage et pour fouiller hors ligne. Tenter de créer une réplique d’un site web existant et la publier telle quelle peut conduire à une violation des droits d’auteur. Vous pouvez également vous déplacer pour coder grâce aux éditeurs de code mobiles.