☰

使用 Google Chrome 编辑 HTML 源代码

tag-icon • tag-icon google-chrome browser html notepad
使用 Google Chrome 编辑 HTML 源代码

在 Internet Explorer 中，我可以打开本地 .html 文件并通过在“查看”菜单中选择“源”来编辑它，进行快速更改，然后“刷新”（重新加载）网页。

我如何使用 Google Chrome 实现该功能？

我可以使用 Windows 记事本打开 .html 文件吗？（我喜欢记事本，因为它的速度非常快。）

答案1

Ctrl+Shift+I or F12-> 元素，它应该显示您的来源。右键单击任何元素，然后单击Edit as HTML

编辑：

有一些扩展看起来像您想要的：https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor&Live WebSite Editor看起来很有希望。

由 barlop 添加
我看到（按 ctrl-shift-I / F12 后），右键单击标签<HTML..> or </HTML>并单击“编辑为 html”。允许我在其中的任何位置进行编辑。选择开始标签意味着编辑弹出窗口仅覆盖那里的所有 html 源代码 - 在编辑时，这在空间方面非常整洁。选择结束标签可能会很有用，因为弹出窗口随后会出现在 html 下方，因此您可以看到前后对比。或者更好的是，正如本杰明所说，按 F2 进行编辑，按 ctrl-enter 进行提交。

答案2

  1. 打开 DevTools。
  2. 打开元素面板。
  3. 选择您想要的 html 或 body 或其他元素。
  4. 按 Esc 打开控制台。
  5. 写入 $0.contentEditable = true

现在您可以编辑页面上的文本并移动图像，但这并不是您真正想要的:)

答案3

您可以尝试使用这个 InlineEditor 来编辑和保存浏览器页面中的静态 html，这里是演示

答案4

如果您想要将文件作为 html 源文件（而不是单个元素）进行编辑，您可以执行以下操作：

  1. 选择左侧的“来源”标签
  2. 在“源”窗格中单击鼠标右键，选择“将文件夹添加到工作区”，然后添加包含源 HTML 文件的文件夹
  3. 右键单击要编辑的 html 文件并选择“映射到网络资源”

相关内容