一、误区

打开浏览器任意一个页面，右键单击页面有两个很相似的选项：“查看网页源代码（CTRL+U）”和"检查（审查元素 F12或者CTRL+SHIFT+I）"，之前一直认为这两项的代码内容没有区别，最近发现两者是有区别的。

二、网页中审查元素与查看网页源代码的区别

1、通过一个简单的页面，对比两者的区别

<!DOCTYPE html>
<html>
  <head>
  <script>
	   window.onload=function(){
		document.getElementById("second").innerHTML="这是JS动态生成的内容。";
		}
  </script>
  </head>
<body>
<div id='first'>源码内容</div>
<div id="second"></div>
</body>
</html>

2、“查看网页源代码”看到的效果

3、“审查元素”看到的效果

4、对比2和3的结果，可直观看到“查看网页源代码”的代码内容是服务器发送到浏览器的原封不动的源代码，不包括页面动态渲染的内容；“审查元素”包括源代码+js动态渲染的内容，即最终展示的html内容。

更多推荐

网页中审查元素与查看网页源代码的区别