使用Google Chrome编辑HTML源代码

34

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

如何使用Google Chrome浏览器？

我可以在Windows记事本中打开.html文件吗？（我喜欢记事本，因为它真的很快。）

— 巴洛普
source

27

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进行提交。

— 休闲编码器
source

1

请尝试完全点击标签名称，例如<body>

— Casual Coder 2010年

1

这是调试工具。它不是编辑工具。要创建页面，请使用Aptana，Netbeans或其他更合适的IDE。带有标记补全，参考，javascript补全等。这是创建网页的更有效的方法。如果您坚持使用Chrome开发者工具作为html编辑器，则可以使用copy as html上下文菜单选项。因此，您可以将其粘贴回您选择的主文本编辑器或其他工具。

— Casual Coder 2010年

1

我所知道的与您所说的最接近的是Firefox中的Firebug插件。在许多各种javascript / css / dom调试工具中，它在页面菜单的上下文菜单中为您Open with Editor提供。您可以添加几个编辑器。当然，您可以将其配置为使用记事本。

— Casual Coder 2010年

2

使用F2进行编辑并按Ctrl + Enter进行提交要快一些

— 本杰明·

1

F2和F2再次执行与Ctrl + Enter相同的工作。

— Frank Nocke

23

打开DevTools。
打开“元素”面板。
选择html或body或所需的其他元素。
通过Esc打开控制台。
写$ 0.contentEditable = true

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

— 路易洛
source

4

并不是我真正想要的，但这是一个非常有趣的功能！

— barlop

我当前的Chrome版本默认启用了此功能吗？我的意思是，我已经可以在“元素”标签中进行编辑。

— 亚历克斯

我刚刚给您+100使用此功能。

— 本杰明·

真正令人惊叹的功能

— iroel

@Benjamin您是否对+100认真（也就是说，您是否在本地副本中给他额外的票显然不会对站点本身产生影响，但仍然可以），那将很有趣。您是如何做到的？还是在开一个非常糟糕且具有误导性的玩笑？

— barlop

1

您可以尝试使用此InlineEditor在浏览器页面中编辑和保存静态html，此处为演示

— MKK
source

1

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

选择左侧的“来源”标签
右键单击“源”窗格，然后选择“将文件夹添加到工作区”，然后添加带有源HTML文件的文件夹
右键单击要编辑的html文件，然后选择“映射到网络资源”

— 保罗·特伦
source

这是在浏览器中进行开发的正确方法

— sidonaldson