Question

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

Answer 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，也就是没有修改源代码

Answer 2

因为function已经被定义赋值过了，你直接修改function的内容没用，因为那是value本身，function没有被再次赋值。
可以把你要变更的function复制出来修改，然后在console里再次赋值就好了，例如在console中输入：
var funcReqData = function(){
// function body

}
funcReqData就是你要变更的function。

Answer 3

F12又叫做“检查”，只能调试页面的样式，不会改变逻辑代码。

Answer 4

你需要把所有源码复制一下然后修改里面的粘贴到输入框运行一下。只修改没有运行是不会生效的。