Question

在我的网页上，我使用了一些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>

此代码可以正常运行。当我点击Google chrome上的“检查”时，我可以看到其工作原理。但是当我单击“查看页面源代码”时看不到输出。

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

Answer 1

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

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

Answer 2

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

Answer 3

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

视图仅显示从web server到我们的browser or client side.

的HTML。

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

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

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

3 个答案: