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

发机制不一样。JS是后期需要加入的。浏览器内置了一个JS解析引擎。直接改动dom和CSS浏览器会重新渲染页面。

但是你改动JS是木有用的，默认浏览器载入页面源码会阻塞执行JS代码。当然你也可以绑定Click事件神马的，考事件去驱动程序。但是木有修改源码介个事件。

因为页面样式可以被CSS和JS修改，改了尺寸就要重绘，但是JS是逻辑层不是展示层，不需要这个功能。

所以Chrome有浏览器扩展可以开发，但是改了JS还是需要重新载入。

对于已经执行过的且已知在页面中不会再次执行的的代码，直接在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，也就是没有修改源代码

可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

1.下载“火狐浏览器”。如果电脑上没有安装“火狐浏览器”，可以在百度中搜索并下载，如图：

2.使用火狐浏览器打开需要调试页面（也可以在开发工具设置火狐浏览器来打开），如图：

3.按F12打开“开发者工具”。界面如图：

4.选择“调试器”选项，然后选择需要调试的JS代码，接着在合适的位置加入断点，如图：

5.按F11或者F10单步调试JS（F11和F10的区别：F11调试，单步执行,进入调用的其它函数；F10调试，单步执行，不进入调用的其它函数）。也可以单机页面上相应的按钮进行调试。如图：

---