这是一个创建于 1750 天前的主题，其中的信息可能已经有所发展或是发生改变。
例如 我在 source panel 里面直接修改代码 并且 ctrl+s 但是下次执行（例如这是某个点击事件的回调） 看上去还是没生效 这是为啥呢 这种操作是不是可以实现的呢
第 1 条附言 · 2020-02-08 11:33:25 +08:00
补充一下，我的问题主要用在两个场景
1 本地调试，
传统的方法，我们可以直接在 ide 改，
我是想在开发的时候，比如修改样式之类的，直接在 devtool 修改 比较快，并且可以查看效果.
但是发现一个情况，例如在 react 工程下，浏览器执行的是构建出来的结果，我们修改也是修改的构建成果（除非我们自己跑到源代码改），这就会导致重新构建后东西又没了
2 线上调试
传统的方式是，使用 fiddler charles 等代理工具 ，映射到本地文件，
我是希望可以直接 devtool 改 js 之类的，即时看一下效果，
但是现在好像还没找到解决方案
1 本地调试，
传统的方法，我们可以直接在 ide 改，
我是想在开发的时候，比如修改样式之类的，直接在 devtool 修改 比较快，并且可以查看效果.
但是发现一个情况，例如在 react 工程下，浏览器执行的是构建出来的结果，我们修改也是修改的构建成果（除非我们自己跑到源代码改），这就会导致重新构建后东西又没了
2 线上调试
传统的方式是，使用 fiddler charles 等代理工具 ，映射到本地文件，
我是希望可以直接 devtool 改 js 之类的，即时看一下效果，
但是现在好像还没找到解决方案
 |
1
googleGirl OP 我发现其实是可以同步到本地代码的，
但是现在有一个问题， 1 开发环境下，我们运行的是本地构建好的代码，修改的也是构建完的代码 ，而刷新一下 重新构建 构建的代码就被覆盖了，那我们的修改有什么意义呢 2 线上环境，如果我们想直接通过修改 js，来达到我们想要的效果，可以实现吗 |
 |
2
emric 2020-02-07 22:40:35 +08:00 via Android
之前某个版本是可以的，后来就不行了。还记得当年改了 B 站代码，拿到了个 6.1 拳王徽章。
|
 |
3
hrn961110 2020-02-07 22:46:07 +08:00 via Android
首先是生效的，因为 js 文件已经下载到你浏览器了。但是页面刷新就又不生效了，因为服务器上的 js 文件不能通过浏览器去修改，反过来想一想如果浏览器可以修改服务器 js 文件，那还有什么安全性了。
|
 |
4
iMusic 2020-02-07 22:57:21 +08:00
@googleGirl 线上的映射到本地文件吧
|
|
5
googleGirl OP @emric 这么秀 哈哈哈
|
 |
6
chnwillliu 2020-02-07 23:30:09 +08:00 via Android
@hrn961110 油猴脚本就是干这种事的，使用者自行承担对自己的账号风险。我觉得楼主的意思是把 devtools 里的 source tab 当本地开发时候的 editor，应该是可以的。但是要保证刷新页面后引用的 js URL 一致吧，可能还要缓存头配合？这样浏览器才会正确使用本地修改的版本？本地路径映射应该是没问题的。话说回来，vscode 配合 webpack hot reload 外加俩显示器还是挺香的，devtools 里的 source tab 的编辑功能差 vscode 太多了。
|
 |
7
hgc81538 2020-02-07 23:42:31 +08:00
Local Overrides 可以實現你要的功能
https://developers.google.com/web/updates/2018/01/devtools#overrides |
 |
8
muzuiget 2020-02-08 03:29:52 +08:00
写成扩展，使用 webRequest 重定向大法就可以。
|
 |
9
enlight 2020-02-08 03:42:48 +08:00
有两种方式看你用哪种。用 overrides 是你可以随便改写远程的代码，只在浏览器里生效，但要设置好临时目录，以及 format 以后的代码无法改。我一般都是把代码 format 以后再 overide 进去就可以了
另外一种是直接加入你的 workspace，也就是源码的目录。这种比较适合改 Html，在 chrome 里改的直接就可以存到你项目文件夹里即改即用很方便。 |
 |
10
ho121 2020-02-08 08:06:00 +08:00
fiddler
|
 |
11
greatbody 2020-02-08 08:29:25 +08:00
还有一种方式，就是僵尸浏览器，能够用代码控制的那种。可以拦截特定的请求，然后返回自己构造的内容。例如 Electron 就可以。
推荐下： https://github.com/getgauge/taiko |
 |
12
mcfog 2020-02-08 10:38:00 +08:00 via Android
不生效可能是因为事件已经绑定了老的 function
|
|
13
googleGirl OP @hrn961110 嗯是的 我就是想在未刷新页面的时候修改生效的，当然不是修改到服务器的文件的~~~
|
|
14
googleGirl OP @chnwillliu 是的 还是 vscode 方便，快捷键 插件提示之类的，但是有些场景下面直接改，看效果，快点，感觉方便~，现在其实会遇到一个问题，在 react 工程下面，我们是可以直接在 F12 中修改代码并且看效果的，但是修改的是构建结果，重新构建一下又没了哈哈哈~
|
|
15
googleGirl OP @ho121 嗯线上调试用的是 fiddler 一类的代理工具调试的~~只是突然想到在浏览器改还蛮方便的~
|
|
16
googleGirl OP @mcfog 嗯嗯 ，现在好像没看到能解决，直接在控制台修改代码，并且执行新逻辑的回答（不用代理工具的方案）
|
 |
17
xi_lin 2020-02-08 12:13:48 +08:00
@googleGirl 上面说的 local override 不行吗
|
|
18
googleGirl OP @xi_lin 可以的哈哈 试了下 css.. 并且刷新后还是生效的~
|
 |
19
ArtsXiaoLu 2020-02-09 11:34:00 +08:00
js 不可以的，
只 CSS 可以，但也是临时的，刷新后，CSS 恢复原样 |
Select Language