V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Get Google Chrome
Vimium · 在 Chrome 里使用 vim 快捷键
googleGirl
V2EX  ›  Chrome

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

  •  
  •   googleGirl · 2020-02-07 22:16:09 +08:00 · 8690 次点击
    这是一个创建于 1733 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2020-02-08 11:33:25 +08:00
    补充一下,我的问题主要用在两个场景
    1 本地调试,
    传统的方法,我们可以直接在 ide 改,
    我是想在开发的时候,比如修改样式之类的,直接在 devtool 修改 比较快,并且可以查看效果.
    但是发现一个情况,例如在 react 工程下,浏览器执行的是构建出来的结果,我们修改也是修改的构建成果(除非我们自己跑到源代码改),这就会导致重新构建后东西又没了
    2 线上调试
    传统的方式是,使用 fiddler charles 等代理工具 ,映射到本地文件,
    我是希望可以直接 devtool 改 js 之类的,即时看一下效果,
    但是现在好像还没找到解决方案
    19 条回复    2020-02-09 11:34:00 +08:00
    googleGirl
        1
    googleGirl  
    OP
       2020-02-07 22:33:33 +08:00
    我发现其实是可以同步到本地代码的,
    但是现在有一个问题,
    1 开发环境下,我们运行的是本地构建好的代码,修改的也是构建完的代码 ,而刷新一下 重新构建 构建的代码就被覆盖了,那我们的修改有什么意义呢
    2 线上环境,如果我们想直接通过修改 js,来达到我们想要的效果,可以实现吗
    emric
        2
    emric  
       2020-02-07 22:40:35 +08:00 via Android
    之前某个版本是可以的,后来就不行了。还记得当年改了 B 站代码,拿到了个 6.1 拳王徽章。
    hrn961110
        3
    hrn961110  
       2020-02-07 22:46:07 +08:00 via Android
    首先是生效的,因为 js 文件已经下载到你浏览器了。但是页面刷新就又不生效了,因为服务器上的 js 文件不能通过浏览器去修改,反过来想一想如果浏览器可以修改服务器 js 文件,那还有什么安全性了。
    iMusic
        4
    iMusic  
       2020-02-07 22:57:21 +08:00
    @googleGirl 线上的映射到本地文件吧
    googleGirl
        5
    googleGirl  
    OP
       2020-02-07 23:12:19 +08:00
    @emric 这么秀 哈哈哈
    chnwillliu
        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 太多了。
    hgc81538
        7
    hgc81538  
       2020-02-07 23:42:31 +08:00
    muzuiget
        8
    muzuiget  
       2020-02-08 03:29:52 +08:00
    写成扩展,使用 webRequest 重定向大法就可以。
    enlight
        9
    enlight  
       2020-02-08 03:42:48 +08:00
    有两种方式看你用哪种。用 overrides 是你可以随便改写远程的代码,只在浏览器里生效,但要设置好临时目录,以及 format 以后的代码无法改。我一般都是把代码 format 以后再 overide 进去就可以了
    另外一种是直接加入你的 workspace,也就是源码的目录。这种比较适合改 Html,在 chrome 里改的直接就可以存到你项目文件夹里即改即用很方便。
    ho121
        10
    ho121  
       2020-02-08 08:06:00 +08:00
    fiddler
    greatbody
        11
    greatbody  
       2020-02-08 08:29:25 +08:00
    还有一种方式,就是僵尸浏览器,能够用代码控制的那种。可以拦截特定的请求,然后返回自己构造的内容。例如 Electron 就可以。

    推荐下: https://github.com/getgauge/taiko
    mcfog
        12
    mcfog  
       2020-02-08 10:38:00 +08:00 via Android
    不生效可能是因为事件已经绑定了老的 function
    googleGirl
        13
    googleGirl  
    OP
       2020-02-08 11:17:40 +08:00
    @hrn961110 嗯是的 我就是想在未刷新页面的时候修改生效的,当然不是修改到服务器的文件的~~~
    googleGirl
        14
    googleGirl  
    OP
       2020-02-08 11:22:49 +08:00
    @chnwillliu 是的 还是 vscode 方便,快捷键 插件提示之类的,但是有些场景下面直接改,看效果,快点,感觉方便~,现在其实会遇到一个问题,在 react 工程下面,我们是可以直接在 F12 中修改代码并且看效果的,但是修改的是构建结果,重新构建一下又没了哈哈哈~
    googleGirl
        15
    googleGirl  
    OP
       2020-02-08 11:24:20 +08:00
    @ho121 嗯线上调试用的是 fiddler 一类的代理工具调试的~~只是突然想到在浏览器改还蛮方便的~
    googleGirl
        16
    googleGirl  
    OP
       2020-02-08 11:25:09 +08:00
    @mcfog 嗯嗯 ,现在好像没看到能解决,直接在控制台修改代码,并且执行新逻辑的回答(不用代理工具的方案)
    xi_lin
        17
    xi_lin  
       2020-02-08 12:13:48 +08:00
    @googleGirl 上面说的 local override 不行吗
    googleGirl
        18
    googleGirl  
    OP
       2020-02-08 12:29:49 +08:00
    @xi_lin 可以的哈哈 试了下 css.. 并且刷新后还是生效的~
    ArtsXiaoLu
        19
    ArtsXiaoLu  
       2020-02-09 11:34:00 +08:00
    js 不可以的,
    只 CSS 可以,但也是临时的,刷新后,CSS 恢复原样
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1393 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 23:41 · PVG 07:41 · LAX 15:41 · JFK 18:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.