这是一个创建于 2076 天前的主题，其中的信息可能已经有所发展或是发生改变。
例如 我在 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 MzM2ODkx 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 里的 sourc 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