上次关于“查看源代码”的概念有一些 短暂的活跃,我确实感觉到并非每个人都对它的含义达成一致。 Jim Nielsen
首先,当我们谈论“查看源代码”时,我们究竟在谈论什么?我认为澄清这一点很重要,因为它有时会被省略,因此许多假设会潜入对话中,我们可能会意识到我们并非都在谈论同一件事。
人们可能在谈论三件事
- 查看源代码(生成通过网络传递的 HTML 的代码)
- 查看页面源代码(通过网络传递的 HTML)
- 查看运行时源代码(活动的 HTML,即 DOM)
我将分配我认为每个值的占比,如同饼图切片一样
- 10%
- 5%
- 85%
每个主要浏览器都自带内置的开发者工具,您可以轻松查看“运行时源代码”。对我来说,那里是绝大多数价值所在。如果浏览器曾经谈论过删除它,我确信我们都会强烈反对。即使对于非开发者来说,此工具的存在也可能是培养初级 Web 开发者的火花。
开发者工具还提供了一种查看通过网络传递的 HTML 的方法,因此这是我之前坚持的立场
我根本不在乎查看源代码,如果它从浏览器中删除,我也不会想念它。我生活在开发者工具中,我敢打赌你也是。它完全取代了查看源代码,因为如果你愿意,你实际上可以在其中查看源代码。
Jim 的文章详细解释了三种“查看源代码”之间的区别。对于完全由客户端 JavaScript 构建的网站,查看网络上的 HTML 几乎毫无用处。但是,如果您能够查看整个代码库(例如,如果它在 GitHub 上是开源的),那么肯定存在价值。
在尝试调试网络问题或使用客户端水合进行服务器端渲染的应用程序时,查看实际发送到网络上的 HTML 仍然非常有用。
也就是说,在基于 Chromium 的浏览器中,我通常从开发者工具的“源代码”选项卡中获取此功能,而不是原始的“查看源代码”,因为我通常同时使用其他工具。
我个人不同意旧的“查看源代码”可以消失的说法。
在开发过程中,有些情况下我想要理解浏览器根本没有与 DOM 交互的情况…
如果我在某个地方有一个损坏的 HTML 标签,它会破坏 DOM,导致控制台充斥着错误,而在“查看源代码”页面中,您只需看到您遗漏了那个结束 div 标签的正斜杠
我再不同意不过了。浏览器非常棒,它们专注于能够渲染,并尽可能正确地渲染。但我有时想知道在它被整理到位之前我实际收到了什么。查找格式错误的标记、查看原始文档结构以及进行良好的纯文本搜索都非常有价值。此外,我有时希望能够浏览整个页面中的标记。
我承认我可能 95% 的时间都停留在开发者工具中,但当那 5% 需要查看源代码时,没有比它更好的了。
对我来说,“查看源代码”指的是字面意义上称为“查看源代码”的命令,并且在大多数浏览器中都有 Ctrl+U 快捷键。我很惊讶有人会用它来表示其他含义。使用“查看源代码”命令不会弹出开发者工具并查看活动的 DOM。
当我想查看原始代码时,我偶尔会发现此功能很有用。当在某个地方查找导致开发者工具以奇怪的方式渲染活动 DOM 的格式错误的标记时,它特别有用。这种情况并不常见,但当它发生时,“查看源代码”很有帮助。
开发者工具在使用 JavaScript 处理后渲染 DOM。即使将其保存到本地,您也无法获得实际的 HTML 响应,除非您使用“查看源代码”。例如,尝试保存 JSBin 网站。
“我生活在开发者工具中,我敢打赌你也是”
这完全是错误的。我确实广泛使用开发者工具,但我也像使用开发者工具一样多地使用“查看源代码”。仅仅因为作者不使用它并不意味着它应该被删除。
同感。开发者工具比“右键点击 + 查看源代码”重要得多。我几乎不记得自己多年来是否曾经使用过它。