如何在页面源代码中显示 JavaScript 输出答案

【问题标题】：How to show JavaScript output in page source code如何在页面源代码中显示 JavaScript 输出
【发布时间】：2019-10-11 08:48:48
【问题描述】：

在我的网页中，我使用了一些 JavaScript，它工作正常，结果显示了我需要的内容。但是当我查看页面源代码时，我只看到了 JavaScript 代码，但看不到输出。下面是我的代码。

  var link = document.createElement('link');
  link.setAttribute('rel', 'canonical');
  link.setAttribute('href', location.protocol + '//' + location.host + location.pathname);
  document.head.appendChild(link);
</script>

这段代码很好用。当我在谷歌浏览器上点击“检查”时，我可以看到它的作品。但是当我点击“查看页面源”时看不到输出。

谁能告诉我如何在源代码中显示输出结果？？

【问题讨论】：

查看页面源是 html 页面状态呈现假设没有运行 Javascript 即服务器发送原始 html（如果我没记错的话）
jQuery DOM changes not appearing in view source的可能重复
是的，“查看页面源代码”显示了从服务器传递的内容。您的 JavaScript 动态操作文档对象模型 (DOM)，可以在浏览器的开发工具中查看。

标签： javascript html

【解决方案1】：

view page source 上下文菜单选项仅显示从服务器端呈现的内容。它不包含在客户端呈现的任何内容。

如果您想查看客户端渲染，请使用inspect element。

【讨论】：

【解决方案2】：

在 Chrome 中，如果您右键单击元素并选择“检查”，则当前 DOM 将显示在 developer tools Elements panel 中。它将类似于“查看页面源代码”中的 HTML，并包含您通过 JS 对 DOM 所做的任何更改。

【讨论】：

【解决方案3】：

View Source 和 Inspect Element 是允许开发人员查看特定页面的 HTML 的两个浏览器功能。

视图只显示 HTML 从web server 传送到我们的browser or client side.

当我们在 Chrome 开发者工具中检查一个元素时（使用右键菜单或 F12），我们正在查看 DOM 树的当前状态：

浏览器或HTML normalization浏览器或DOM manipulation by JavaScript的HTML错误纠正

【讨论】：