Chrome 在线调试 JS 的问题

[云水千寻]

打开某个线上的网页（比如CSDN首页），通过 Chrome 浏览器的开发工具进行调试，在Sources面板里，如果修改了某个文件（通常需要修改的是JS），再次刷新页面，怎样才能让浏览器执行这个修改的文件，而不是原始请求的文件？或者，是否有办法不刷新页面重新执行下整个页面加载过程所要执行的内容，并且相关文件是本地修改的版本？

在在Sources面板里，如果修改了某个文件，主内容右键菜单里有“Local modifications...”一项，这个有什么用？如果是在调试时，可以随意切换文件的原始版本和本地修改的不同版本，那怎样才能切换？就算不能切换，是否有办法让浏览器执行本地修改的版本？尤其是页面加载过程云运行的代码？

如果Chrome的开发工具本身不具有这个功能，是否有插件可用？其它浏览器呢？

[人生难得一只鸡]

如果你可以修改JS并且去运行，前端也没有存在的必要了吧，还存在什么安全 虽然不知道为什么会有这样的需求，如果是自己的网站 你完全可以本地修改测试js代码 即便是别人上限的网站，你也可以扒到本地，至于js的话，你也可以下载到本地，修改并且调试，当然其他例如样式的东西，可以直接采用别人的线上地址，只是针对调整单独的js来讲

[豪情]

如果在本地修改后保存，chrome有类似的功能： http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/

[自然框架]

有个简单的方法，但是需要页面js的支持。 按F12 ，打开Console标签，在里面是可以写js脚本的 各种脚本。 如果你的页面有一个启动的函数，比如pageStat 。那么可以在这里调用这个函数，开始页面的js的执行。 或者你是一下 window.onload(); 如果用的jQuery.ready，还是匿名函数，那就没啥招了。

[恶心鬼]

sources里面的文件可以修改， 修改后就会执行你修改了的代码，但是页面一刷新就会没了，所以一些页面加载就运行了的代码你本地改了也没用~ 而那些点击事件之类的代码就可以生效, 个人感觉仅仅是方便调试，不用每次都去改源码

[云水千寻]

引用 1 楼 Return_false 的回复:

如果你可以修改JS并且去运行，前端也没有存在的必要了吧，还存在什么安全 虽然不知道为什么会有这样的需求，如果是自己的网站 你完全可以本地修改测试js代码 即便是别人上限的网站，你也可以扒到本地，至于js的话，你也可以下载到本地，修改并且调试，当然其他例如样式的东西，可以直接采用别人的线上地址，只是针对调整单独的js来讲

先抛开安全性不谈，如果浏览器开发商愿意，这个功能应该是很容易实现的。 只需要在开发工具里记录原始请求的文件以及本地修改的各个版本，页面刷新时，可以切换执行需要的版本。 再者说，安全性前端虽然要做，但安全性主要还是得后端保证的。 退一万步讲，没有绝对的安全性（当然，我们必须尽量使其安全）。 我只是问下有没有这个功能而已，并不代表我没有安全意识。

[云水千寻]

引用 2 楼 jikeytang 的回复:

如果在本地修改后保存，chrome有类似的功能： http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/

试了，只能在浏览器里修改然后保存到本地某个对应文件。 但依然不能在页面加载的时候执行本地修改的版本。

[云水千寻]

引用 5 楼 dcy190203 的回复:

sources里面的文件可以修改， 修改后就会执行你修改了的代码，但是页面一刷新就会没了，所以一些页面加载就运行了的代码你本地改了也没用~ 而那些点击事件之类的代码就可以生效, 个人感觉仅仅是方便调试，不用每次都去改源码

很多时候，关键就是要调试页面加载时的东西。

[Go 旅城通票]

把他代码提取出来控制台执行一次不行？

[云水千寻]

引用 7 楼 showbo 的回复:

把他代码提取出来控制台执行一次不行？

比如这样一个场景： 代码在开发阶段是没有压缩的，上线后都压缩在了一行。 但是上线后浏览器控制台报错，但因为是压缩的，错误位置就难以定位。 如果是首次加载错误就更难定位，因为可能js文件依赖较多。 当代码量很大时，都在控制台里执行不好吧，还是难以定位。 最好是在source里修改后，映射到本地修改的版本。

[wwc7654321]

有办法了吗？同样很.疑惑为什么没有这个功能。。