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

Posted 2023-04-16

在Google Chrome浏览器中，按F12进入的是本地调试界面。
在F12调试界面中修改的JS代码，是修改的“本地缓存文件”中的代码，而不是存在于服务器上的网页的真正代码，网页的真正代码在浏览器中是无法修改的。
Chrome开发者调试工具（F12），可以在调试界面修改代码（包括JS、html和CSS）模拟本地运行，具体步骤大致如下：
在需要修改的代码段上方合理代码行设置断点；
按F5键刷新网页，并等待网页执行到断点；
修改JS代码或其它需要修改的代码，修改后选择单步执行或继续执行即可。
通常，调试中修改无效，是因为网页加载完成，其实就是运行已经完成了，修改代码不会再次执行。 参考技术A Chrome 的F12调出的本地的调试台
只能从source里看到报错语句和报错类型，或是在console里看到之前在代码中用console.log()获取的值。
而不能直接做编辑修改代码，修改后也不会生效，那只是一份副本。
你需要打开编译器在相应位置做修改后再次运行。
不懂请追问，理解请采纳，O(∩_∩)O谢谢！本回答被提问者采纳 参考技术B 在Google Chrome浏览器中，按F12进入的是本地调试界面。 在F12调试界面中修改的JS代码，是修改的“本地缓存文件”中的代码，而不是存在于服务器上的网页的真正代码，网页的真正代码在浏览器中是无法修改的。 Chrome开发者调试工具（F12）

如何利用Chrome的控制台更改网页里面的Javascript代码并使得修改能够生效？

chrome可以使用“审查元素”功能实时编辑一个普通的网页的HTML代码，但是如果编辑的是Javascript，则不会生效。请问有什么办法直接修改网页内的Javascript并重新加载(不是刷新网页)使得修改生效？

　　js代码在页面渲染的时候已经执行了，就是说从请求一个页面到完整看到一个页面之后，这个页面相关的js代码已经执行完毕，下次执行的时候依然是页面再次刷新加载的时候。
　　f12修改代码刷新后还是会变回原来的代码，再次执行的还是原来的代码。
　　对于已经执行过的且已知在页面中不会再次执行的的代码，直接在debugger里修改是没有用的，即使保存了，但是只要一刷新页面，JS的代码内容是会重新从cache获取或者重新向服务器请求然后执行的，但是这不代表就是不能修改。
　　比如对于那些通过事件触发的代码，当修改并保存以后，是会生效的，前提是第一没有刷新页面，第二可以在不刷新页面的前提下执行这段修改过的代码（比如绑定事件）。 参考技术A 这还真没试过，不过直接在地址栏里可以直接敲入javascript代码来执行。你可以试试。

javascript:alert(document.cookie);

在地址栏输入这种形式的代码，然后回车确认，就会被执行。本回答被提问者采纳 参考技术B 我试了，可以啊，用edit text方法，可以使修改生效，不过这段代码如果是load时就已经用过的代码，你改了以后生效也没啥用了。