Wie kann man in Chrome den Quelltext bearbeiten?

Melden
  1. Einführung in das Bearbeiten von Quelltext in Chrome
  2. Wie greift man auf den Quelltext in Chrome zu?
  3. Quelltext live bearbeiten mit den Entwicklertools
  4. Dauerhafte Änderungen am Quelltext durchführen
  5. Fazit

Einführung in das Bearbeiten von Quelltext in Chrome

Wenn man von "Quelltext bearbeiten" in Google Chrome spricht, meint man meistens das

Ändern oder Anpassen des HTML-, CSS- oder JavaScript-Codes einer Webseite, wie er im Browser

ermöglichen, den Quelltext live zu inspizieren und auch temporär zu verändern. Diese Änderungen

Wie greift man auf den Quelltext in Chrome zu?

Um den Quelltext einer Webseite in Chrome zu bearbeiten, öffnet man zunächst die Entwicklertools.

Dies kann man entweder über das Menü "Weitere Tools" > "Entwicklertools", über die rechte Maustaste

mit "Element untersuchen" oder mit der Tastenkombination Strg + Umschalt + I (Windows)

bzw. Cmd + Option + I (Mac) tun. In den Entwicklertools sieht man den HTML- und CSS-Code

der aktuellen Webseite und hat die Möglichkeit, diese live zu verändern und so das Aussehen und

Quelltext live bearbeiten mit den Entwicklertools

Innerhalb der Entwicklertools kann man im Bereich "Elemente" HTML-Tags bearbeiten, hinzufügen oder

löschen. Ebenso ist es möglich, CSS-Regeln zu verändern oder komplett neue Regeln hinzuzufügen.

Über den Tab "Konsole" können JavaScript-Befehle eingeben werden, womit man auch dynamische

Änderungen am DOM vornehmen kann. Alle Änderungen wirken sich unmittelbar auf die Darstellung der

Dauerhafte Änderungen am Quelltext durchführen

Chrome selbst bietet keine Möglichkeit, den originalen Quelltext einer Webseite dauerhaft zu

verändern, da man nur eine lokale Kopie sieht. Wer dauerhafte Änderungen vornehmen möchte, muss

zunächst die entsprechende Datei lokal speichern und anschließend mit einem Code-Editor bearbeiten.

Für Webentwickler bietet sich außerdem an, den Code in der eigenen Entwicklungsumgebung zu pflegen

Fazit

Mit den integrierten Entwicklertools von Google Chrome kann man den Quelltext einer Webseite bequem

inspizieren und temporär bearbeiten. Diese Funktion ist ideal zum Testen und Debuggen. Für

0
0 Kommentare