chrome F12 面板是否支持直接修改 js 代码立即生效

[googleGirl]

例如 我在 source panel 里面直接修改代码 并且 ctrl+s 但是下次执行（例如这是某个点击事件的回调） 看上去还是没生效 这是为啥呢 这种操作是不是可以实现的呢

[googleGirl]

我发现其实是可以同步到本地代码的，
但是现在有一个问题，
1 开发环境下，我们运行的是本地构建好的代码，修改的也是构建完的代码 ，而刷新一下 重新构建 构建的代码就被覆盖了，那我们的修改有什么意义呢
2 线上环境，如果我们想直接通过修改 js，来达到我们想要的效果，可以实现吗

[emric]

之前某个版本是可以的，后来就不行了。还记得当年改了 B 站代码，拿到了个 6.1 拳王徽章。

[hrn961110]

首先是生效的，因为 js 文件已经下载到你浏览器了。但是页面刷新就又不生效了，因为服务器上的 js 文件不能通过浏览器去修改，反过来想一想如果浏览器可以修改服务器 js 文件，那还有什么安全性了。

[iMusic]

@googleGirl 线上的映射到本地文件吧

[googleGirl]

@emric 这么秀 哈哈哈

[chnwillliu]

@hrn961110 油猴脚本就是干这种事的，使用者自行承担对自己的账号风险。我觉得楼主的意思是把 devtools 里的 source tab 当本地开发时候的 editor，应该是可以的。但是要保证刷新页面后引用的 js URL 一致吧，可能还要缓存头配合？这样浏览器才会正确使用本地修改的版本？本地路径映射应该是没问题的。话说回来，vscode 配合 webpack hot reload 外加俩显示器还是挺香的，devtools 里的 source tab 的编辑功能差 vscode 太多了。

[hgc81538]

Local Overrides 可以實現你要的功能
https://developers.google.com/web/updates/2018/01/devtools#overrides

[muzuiget]

写成扩展，使用 webRequest 重定向大法就可以。

[enlight]

有两种方式看你用哪种。用 overrides 是你可以随便改写远程的代码，只在浏览器里生效，但要设置好临时目录，以及 format 以后的代码无法改。我一般都是把代码 format 以后再 overide 进去就可以了
另外一种是直接加入你的 workspace，也就是源码的目录。这种比较适合改 Html，在 chrome 里改的直接就可以存到你项目文件夹里即改即用很方便。

[ho121]

fiddler

[greatbody]

还有一种方式，就是僵尸浏览器，能够用代码控制的那种。可以拦截特定的请求，然后返回自己构造的内容。例如 Electron 就可以。

推荐下： https://github.com/getgauge/taiko

[mcfog]

不生效可能是因为事件已经绑定了老的 function

[googleGirl]

@hrn961110 嗯是的 我就是想在未刷新页面的时候修改生效的，当然不是修改到服务器的文件的~~~

[googleGirl]

@chnwillliu 是的 还是 vscode 方便，快捷键 插件提示之类的，但是有些场景下面直接改，看效果，快点，感觉方便~，现在其实会遇到一个问题，在 react 工程下面，我们是可以直接在 F12 中修改代码并且看效果的，但是修改的是构建结果，重新构建一下又没了哈哈哈~

[googleGirl]

@ho121 嗯线上调试用的是 fiddler 一类的代理工具调试的~~只是突然想到在浏览器改还蛮方便的~

[googleGirl]

@mcfog 嗯嗯 ，现在好像没看到能解决，直接在控制台修改代码，并且执行新逻辑的回答（不用代理工具的方案）

[xi_lin]

@googleGirl 上面说的 local override 不行吗

[googleGirl]

@xi_lin 可以的哈哈 试了下 css.. 并且刷新后还是生效的~

[ArtsXiaoLu]

js 不可以的，
只 CSS 可以，但也是临时的，刷新后，CSS 恢复原样