如何查看页面源 VS 检查？答案

【问题标题】：How to view page source VS inspect?如何查看页面源 VS 检查？
【发布时间】：2019-02-04 15:40:49
【问题描述】：

我在一个 asp.net 网络表单中使用了 jQuery：

<script>
    $(document).ready(function () {
        $('#MainContent').css('background-color', 'green')
    });
</script>

当我在Chrome中使用'Inspect'功能时，我可以看到内联CSS样式，但是如果你使用'view page source'，则没有inline style，那么view page source和inspect有什么区别？

【问题讨论】：

【解决方案1】：

“查看页面源代码”将向您显示 原始 HTML 文档，因为它是在任何脚本运行之前由服务器发送给您的（当然是在解压缩之后）。如果您打开开发者工具并查看“网络”选项卡，文档响应应该与“页面源”文本相同。

“检查”将向您显示文档当前的状态，包括脚本可能对其进行的所有更改。

【讨论】：

【解决方案2】：

查看页面源代码将显示 html 文件/请求内容（不被 JS 更改）。 JS执行后的“Inspect”功能显示DOM树（基于html文件）。

【讨论】：

【解决方案3】：

“查看页面源代码”将只显示您的浏览器从服务器获得响应的 HTML。

但是“检查”会向您显示页面的当前状态，这意味着脚本在该 HTML 上运行。它使您可以查看脚本完成的页面修改。

【讨论】：