Bearbeiten von HTML-Quellcode mit Google Chrome

34

In Internet Explorer kann ich eine lokale .html-Datei öffnen und bearbeiten, indem ich im Menü "Ansicht" die Option "Quelle" auswähle, eine schnelle Änderung vornehme und dann die Webseite "aktualisieren" (neu laden).

Wie kann ich das mit Google Chrome machen?

Kann ich die HTML-Datei in Windows Notepad öffnen? (Ich mag Notizblock, weil es sehr schnell ist.)

google-chrome browser html notepad barlop
quelle

Antworten:

27

Ctrl+Shift+I or F12-> Elemente, sollte es Ihre Quelle zeigen. Klicken Sie mit der rechten Maustaste auf ein Element und klicken Sie aufEdit as HTML

Bearbeiten:

Es gibt einige Erweiterungen, die Ihren Wünschen entsprechen: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor& Live WebSite Editorvielversprechend aussehen.

Hinzugefügt von Barlop
Ich sehe, dass (nach Strg-Umschalt-I / F12), mit der rechten Maustaste auf das <HTML..> or </HTML>Tag und klicken Sie auf "Als HTML bearbeiten". Ermöglicht mir das Bearbeiten an einer beliebigen Stelle. Wenn Sie das Eröffnungs-Tag auswählen, deckt das Popup für die Bearbeitung nur die gesamte HTML-Quelle ab, die dort vorhanden ist - was in Bezug auf den Platzbedarf bei der Bearbeitung sehr ordentlich ist. Die Auswahl des schließenden Tags kann nützlich sein, da das Popup dann unter dem HTML-Code angezeigt wird, sodass ein Vorher / Nachher angezeigt wird. Oder besser, wie Benjamin sagt, F2 zum Bearbeiten, Strg-Enter zum Festschreiben.

Casual Coder
quelle
1
Klicken Sie beispielsweise genau auf den Tag-Namen<body>
Casual Coder
1
Dies ist ein Debugging-Tool. Es ist kein Bearbeitungswerkzeug. Verwenden Sie zum Erstellen von Seiten so etwas wie Aptana, Netbeans oder eine andere besser geeignete IDE. Mit Tag-Vervollständigung, Referenz, Javascript-Vervollständigung usw. Dies ist eine viel produktivere Methode zum Erstellen von Webseiten. Wenn Sie darauf bestehen, Chrome Developer Tools als HTML-Editor zu verwenden, gibt es eine copy as htmlKontextmenüoption. So können Sie es wieder in den Haupttexteditor Ihrer Wahl oder in ein anderes Tool einfügen.
Casual Coder
1
Am nächsten an dem, wovon Sie sprechen, ist das Firebug-Addon in Firefox. Unter vielen verschiedenen Javascript / CSS / Dom-Debugging-Tools bietet es Ihnen im Kontextmenü auf einer Seite Open with EditorOption. Sie können mehrere Editoren hinzufügen. Natürlich können Sie es so konfigurieren, dass es Notepad verwendet.
Casual Coder
2
Mit F2 zum Bearbeiten und Strg + Eingabetaste zum Festschreiben ist es etwas schneller
Benjamin
1
F2 und F2 machen wieder den gleichen Job wie Strg + Enter.
Frank Nocke
23
  1. Öffnen DevTools.
  2. Öffnen Sie das Bedienfeld Elemente.
  3. Wählen Sie HTML oder Body oder ein anderes Element, das Sie möchten.
  4. Öffnen Sie die Konsole mit Esc.
  5. Schreiben Sie $ 0.contentEditable = true

Jetzt können Sie Text auf der Seite bearbeiten und Bilder verschieben, aber das ist nicht das, was Sie wirklich wollen :)

loislo
quelle
4
nicht wirklich das, was ich will, aber das ist eine sehr amüsante Funktion!
Barlop
Habe ich recht, dass dies in aktuellen Chrome-Versionen standardmäßig aktiviert ist? Ich meine, ich kann bereits in der Registerkarte Elemente bearbeiten.
Alex
Ich habe dir mit dieser Funktion gerade +100 gegeben.
Benjamin
Wirklich erstaunliches Feature
iroel
@Benjamin Meinst du die +100 ernst (dh hast du ihm zusätzliche Stimmen in deiner lokalen Kopie gegeben, die sich natürlich nicht auf die Site selbst auswirken würden, aber immer noch), das wäre interessant. Wie hast du das gemacht? oder hast du einen sehr schlechten und irreführenden Witz gemacht?
Barlop
1

Sie können versuchen, diesen InlineEditor zu bearbeiten und statische HTML in Browserseiten zu speichern. Hier ist die Demo

MKK
quelle
1

Wenn Sie die Datei als HTML-Quelle (und nicht als einzelne Elemente) bearbeiten möchten, können Sie Folgendes tun:

  1. Wählen Sie die Registerkarte "Quellen" auf der linken Seite
  2. Klicken Sie mit der rechten Maustaste in den Bereich "Quellen" und wählen Sie "Ordner zum Arbeitsbereich hinzufügen" und fügen Sie einen Ordner mit der Quell-HTML-Datei hinzu
  3. Klicken Sie mit der rechten Maustaste auf die HTML-Datei, die Sie bearbeiten möchten, und wählen Sie "Zuordnung zur Netzwerkressource".
Paul Troon
quelle
Dies ist der richtige Weg, um in Browser zu entwickeln
Sidonaldson