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

JavaScript020

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

对于已经执行过的且已知在页面中不会再次执行的的代码,直接在debugger里修改是没有用的,就像楼上说的,即使你保存了,但是只要一刷新页面,JS的代码内容是会重新从cache获取或者重新向服务器请求然后执行的,但是这不代表你就是不能修改,比如对于那些通过事件触发的代码,当你修改并保存以后,是会生效的,前提是第一你没有刷新页面,第二可以在不刷新页面的前提下执行这段修改过的代码(比如绑定事件)。比如下面这一段,我随便找了一个登陆页面的js在里面加了一句console.log,保存以后再执行,是可以看到console里输出了修改过的结果<img src="https://pic4.zhimg.com/397ce2bf64749b2e7dc3c9cd1561500f_b.jpg" data-rawwidth="325" data-rawheight="66" class="content_image" width="325">当你保存了修改的时候Chrome也会出一个warning<img src="https://pic3.zhimg.com/caccaeefd03149d7c106effe09d106e2_b.jpg" data-rawwidth="373" data-rawheight="83" class="content_image" width="373">提示你修改过的文件并未被保存到file system,也就是没有修改源代码提示你修改过的文件并未被保存到file system,也就是没有修改源代码

页面js是在页面加载的时候载入内存执行的,你在浏览器中修改了,不刷新页面是不生效的

一旦刷新了,你改的内容也就没了,所以页面js的修改是不能在浏览器做的,必须修改服务器上的js文件,才能在浏览器中生效