在Chrome上面按F12修改页面的源代码里面的JS代码为什么无法生效

JavaScript026

在Chrome上面按F12修改页面的源代码里面的JS代码为什么无法生效,第1张

在Google Chrome浏览器中，按F12进入的是本地调试界面。在F12调试界面中修改的JS代码，是修改的“本地缓存文件”中的代码，而不是存在于服务器上的网页的真正代码，网页的真正代码在浏览器中是无法修改的。Chrome开发者调试工具（F12），可以在调试界面修改代码（包括JS、HTML和CSS）模拟本地运行，具体步骤大致如下：在需要修改的代码段上方合理代码行设置断点；按F5键刷新网页，并等待网页执行到断点；修改JS代码或其它需要修改的代码，修改后选择单步执行或继续执行即可。通常，调试中修改无效，是因为网页加载完成，其实就是运行已经完成了，修改代码不会再次执行。

js代码在页面渲染的时候已经执行了，就是说从请求一个页面到完整看到一个页面之后，这个页面相关的js代码已经执行完毕，下次执行的时候依然是页面再次刷新加载的时候。

f12修改代码刷新后还是会变回原来的代码，再次执行的还是原来的代码。

对于已经执行过的且已知在页面中不会再次执行的的代码，直接在debugger里修改是没有用的，即使保存了，但是只要一刷新页面，JS的代码内容是会重新从cache获取或者重新向服务器请求然后执行的，但是这不代表就是不能修改。

比如对于那些通过事件触发的代码，当修改并保存以后，是会生效的，前提是第一没有刷新页面，第二可以在不刷新页面的前提下执行这段修改过的代码（比如绑定事件）。

因为网速问题，浏览器不能每次打开一个页面都从新获取页面中的js，css,图片之类的资源。因为大部分页面被修改的频率不大。这样就可以在网络条件比较差的情况下流畅打开之前的页面。

如果需要浏览器不做缓存，可以在header里写一些信息(没测试过，直接粘的网上的代码)

<meta http-equiv="Expires" content="0">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Cache-control" content="no-cache">

<meta http-equiv="Cache" content="no-cache">

动态加载js文件，在js资源url后加随机数

<script> 

document.write("<script type='text/javascript' src='/js/test.js?"+Math.random()+"'></script>") 

</script>