Nutzen Sie vorhandenen Code, um Ihre Fähigkeiten zu verfeinern und zu lernen. Hier erfahren Sie, wie Sie in den meisten gängigen Browsern Code von Websites kopieren.
Das Erstellen einer Website von Grund auf kann Ihnen je nach Komplexität des Projekts Kopfzerbrechen bereiten. Es kann Monate oder Jahre dauern, diese zeitaufwändige Fähigkeit zu beherrschen. Aus diesem Grund haben die meisten professionellen Programmierer Prozesse und Verknüpfungen entwickelt, um ihre Fähigkeiten zu verfeinern.
Dazu gehört auch, eine praktische Liste der beliebtesten und wiederkehrendsten Programmiercodes zu führen. In diesem Artikel lernen Sie einen weiteren Trick kennen, der es Ihnen ermöglicht, Website-Code verantwortungsvoll mit gängigen Browsern wie Chrome, Firefox und Edge zu kopieren. Es kann eine unschätzbar wertvolle Lernressource sein und Beispiele für fertigen Code bieten.
So kopieren Sie Code von Websites mit Chrome
Mit den folgenden Methoden können Sie in Chrome Code von einer Website kopieren.
Über Seitenquelle
Dies ist möglicherweise die beste und einfachste Möglichkeit, unabhängig vom Browser auf die gesamte Codebasis einer Website oder Webseite zuzugreifen. Um die Seitenquelle in Chrome anzuzeigen, gehen Sie zur Zielwebsite und klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite außer Links, Bildern oder Anzeigen.
Klicken Seitenquelle anzeigen oder einfach drücken Strg + U (Windows, Linux) oder Befehl + U (Mac OS). Kopieren Sie den gewünschten Teil des Codes oder den gesamten Code und fügen Sie ihn in Ihren bevorzugten Code-Editor ein.
Über die F12-Verknüpfung
Sie können ganz einfach auf die Chrome-Entwicklertools zugreifen, indem Sie eine Website aufrufen und einfach auf drücken F12. Chrome Developer Tools enthält Website-Code und dient gleichzeitig als Debugging-Tool für Entwickler.
Wählen Sie den gesamten gewünschten Code aus, kopieren Sie ihn und fügen Sie ihn in einen Code-Editor Ihrer Wahl ein.
Eine andere Möglichkeit, auf das Bedienfeld „Chrome Developer Tools“ zuzugreifen, ist das Inspect-Tool. Besuchen Sie dazu die Zielwebsite, von der Sie Code kopieren möchten. Jetzt drücken Strg + Umschalt + I (Windows, Linux) oder Befehl + Wahl + I (macOS) gelangen Sie direkt zu Dev Tools.
Alternativ können Sie mit der rechten Maustaste auf einen freien Teil der Seite klicken und auswählen Prüfen aus den Menüoptionen direkt unter der Option zum Anzeigen der Seitenquelle.
Über das Menü „Weitere Aktionen“ von Chrome
Eine weitere Möglichkeit, Website-Code über Dev Tools in Chrome zu erkunden, besteht darin, auf die Schaltfläche mit den drei Punkten in der oberen rechten Ecke der Zielwebsite zu klicken. Wählen Sie aus den Menüoptionen aus Mehr Werkzeuge, Dann Entwicklerwerkzeuge.
Kopieren Sie den gesamten gewünschten Code und fügen Sie ihn in einen beliebigen Code-Editor Ihrer Wahl ein. Abgesehen davon, dass es sich um ein Debugging-Tool handelt, können Sie es auch Verwenden Sie Chrome Dev Tools, um Screenshots zu machen.
So kopieren Sie Code von Websites mit Firefox
Es gibt verschiedene Möglichkeiten, Website-Code mit Firefox zu kopieren.
Seitenquelle anzeigen
Um auf Website-Code in Firefox zuzugreifen und ihn zu kopieren, indem Sie die Seitenquelle anzeigen, klicken Sie einfach mit der rechten Maustaste auf die Zielwebsite und klicken Sie auf Seitenquelle anzeigen.
Alternativ drücken Sie Strg + U (Windows, Linux) oder Befehl + U (Mac OS). Kopieren Sie den gesamten gewünschten Code und fügen Sie ihn in den Code-Editor Ihrer Wahl ein.
Sie können die Seitenquelle genauso einfach in Firefox anzeigen, indem Sie auf das dreizeilige Hamburger-Menü klicken und auswählen Mehr Werkzeuge, und klicken Seitenquelltext.
Über die Tastenkombination F12
Genau wie Chrome können Sie auch in Firefox Dev Tools auf den Code einer Website zugreifen, indem Sie einfach die Taste F12 auf Ihrer Tastatur drücken.
Schauen Sie sich nach dem spezifischen Code um, den Sie suchen, und achten Sie dabei besonders auf den Style-Editor. Kopieren Sie nun den gesamten Code, fügen Sie ihn in Ihren bevorzugten Code-Editor ein und lassen Sie Ihren Zauber wirken.
Auch hier können Sie wie in Chrome mit dem integrierten Inspect-Tool gleichermaßen auf Website-Code in Firefox zugreifen. Klicken Sie dazu mit der rechten Maustaste auf einen freien Teil der Zielwebsite und drücken Sie entweder Q oder klicken Prüfen. Sie können auch drücken Strg + Umschalt + I (Windows, Linux) oder Befehl + Wahl + I (Mac OS).
Wie bereits erläutert, können Sie sich weiterhin mit dem Style-Editor zurechtfinden, bis Sie den gesuchten Code gefunden haben. Kopieren Sie es dann und fügen Sie es in eines von ein die besten Code-Editoren, die Sie finden können.
Über das Firefox-Menü „Weitere Aktionen“.
Um Website-Code in Firefox über das Menü „Weitere Aktionen“ zu kopieren, klicken Sie auf der Website, deren Code Sie kopieren möchten, auf das dreizeilige Hamburger-Menü in der oberen rechten Ecke.
Wählen Mehr Werkzeuge, dann klick Webentwicklertools. Von hier aus können Sie entweder den Inspektor oder den Style-Editor verwenden, um den gewünschten Code zu kopieren.
Verwenden Sie für Inspector die Pfeiltasten auf Ihrer Tastatur oder die Bildlaufleiste, um durch die Einträge zu navigieren. Im Stil-Editor können Sie sich mithilfe des linken Navigationsbereichs auf bestimmte Werbebuchungen konzentrieren. Wenn Sie gefunden haben, was Sie suchen, fügen Sie den kopierten Code in Ihren Code-Editor ein und passen Sie ihn nach Ihrem Geschmack an.
So kopieren Sie Code von Websites mit Edge
Sie können mit Edge wie folgt ganz einfach Website-Code auf verschiedene Arten kopieren.
Seitenquelle anzeigen
Um Website-Code zu kopieren, indem Sie die Seitenquelle in Microsoft Edge anzeigen, klicken Sie einfach mit der rechten Maustaste auf einen beliebigen freien Teil der Zielwebsite und wählen Sie aus Seitenquelle anzeigen.
Alternativ können Sie auch einfach drücken Strg + U (Windows, Linux) oder Befehl + U (macOS), kopieren Sie den gewünschten Teil, fügen Sie ihn in einen Editor ein und beginnen Sie mit der Anpassung des Codes.
Über die Tastenkombination F12
Wenn Sie Edge verwenden, können Sie auch Website-Code kopieren, indem Sie einfach die Taste F12 drücken, wenn Sie die Website besuchen, von der Sie Code kopieren möchten.
Bestätigen Sie Ihre Auswahl durch Klicken Öffnen DevTools. Im Bereich „Dev Tools“ können Sie ganz einfach den gesamten gewünschten Code kopieren und so Ihre Arbeit beschleunigen.
Um Website-Code mit dem Inspect-Tool von Edge zu kopieren, gehen Sie zu der Website, deren Code Sie kopieren möchten, klicken Sie mit der rechten Maustaste auf einen freien Teil und wählen Sie aus Prüfen.
Sie können auch drücken Strg + Umschalt + I (Windows, Linux) oder Befehl + Wahl + I (Mac OS). Anschließend können Sie den Code, den Sie duplizieren und bearbeiten möchten, kopieren und einfügen.
Über die Schaltfläche „Weitere Aktionen“ von Edge
Edge ermöglicht Ihnen auch den Zugriff auf das DevTools-Bedienfeld über das Menü „Weitere Aktionen“. Gehen Sie dazu auf die Website, deren Code Sie kopieren möchten. Klicken Sie auf die Schaltfläche mit den drei Punkten in der oberen rechten Ecke und klicken Sie Mehr Werkzeuge, Dann Entwicklerwerkzeuge.
Wenn Ihrem Browser eine dieser Optionen oder Funktionen fehlt, sollten Sie prüfen, ob er auf dem neuesten Stand ist. Hier ist So überprüfen und aktualisieren Sie Chrome, Firefox und Edge.
Welchen Ansatz Sie auch wählen und welchen Chromium-basierten Browser Sie verwenden (Chrome, Firefox oder Edge), Sie Sie können nach bestimmten Dateien oder Elementen suchen, indem Sie auf das Drei-Punkte-Menü im Dev-Tools-Bedienfeld klicken Auswählen Suchen. Alternativ drücken Sie einfach Strg + Umschalt + F (Windows, Linux) oder Befehl + Wahl + F (Mac OS).
Der Datei öffnen Und Führen Sie den Befehl aus Optionen sind auch hilfreich, um Code auf einer Website zu finden, ebenso wie die Stil-Editor in Firefox und Elemente im Chrome- und Edge-Entwicklungstools-Panel.
Verfeinern Sie Ihre Fähigkeiten, indem Sie vorhandenen Website-Code verwenden
Unabhängig davon, ob Sie Chrome, Firefox, Edge oder andere Chromium-basierte Webbrowser verwenden, können Sie eine Menge Zeit und Energie sparen, indem Sie einfach Code von bereits vorhandenen Websites kopieren.
Das Kopieren des Website-Codes sollte jedoch nur zum eigenen Lernen und zum Offline-Schnüffeln erfolgen. Der Versuch, eine Replik einer bestehenden Website zu erstellen und diese unverändert zu veröffentlichen, kann zu einer Urheberrechtsverletzung führen. Mit mobilen Code-Editoren können Sie Ihre Codierung auch unterwegs durchführen.