Question

您好我正在展示 CSS3 中新增的 html 标记，并且我正在制作文档，以便在比较源代码和源代码时轻松查看和解释输出。我很难找到源代码，然后选择文件并在浏览器上浏览

如果我能查看源代码和输出，那就太好了在同一个html页面上。

例如（我在下面的页面中说话）如果选择源代码，源代码必须显示在屏幕上或任何文本编辑器中。

我不知道是否有可能这样做，如果可能的话会很棒如果有人能引导我。

On clicking the source code link the source code must be viewed

Answer 1

要获得一个元素的来源，请执行以下操作：

HTML：<div id="one"><span id="two"></span></div>
JS：

document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>

要获取整个页面的来源，请执行以下操作：

document.doctype + document.documentElement.outerHTML

document.doctype会返回doctype，document.documentElement.outerHTML会返回<html>标记及其中所有内容的代码。

Answer 2

使用您在所有现代浏览器中使用的开发者工具（最先进的浏览器是Chrome和Firefox）。

您通常使用Ctrl-Uppercase-i快捷方式打开此类工具集。

然后你有很多有用的工具，如here for Chrome或here for Firefox所述。

其中一个似乎正是你所需要的。例如在Chrome中，第一个标签名为“Elements”，shows you the source code with a lot of goodies（解释css有原因，当你悬停鼠标时显示元素，搜索等）。

我建议您花点时间阅读链接文档，因为这是任何Web开发人员的基本工具。一旦你深入了解javascript或css，你就无法停止使用这些工具。

源代码查看器通过Html页面

2 个答案: