首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[javascript] 利用chrome的overrides实时调试线上js

[javascript] 利用chrome的overrides实时调试线上js

作者头像
唯一Chat
发布2020-03-19 14:29:11
5.1K0
发布2020-03-19 14:29:11
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方。我们可以查看相应的变量值,在右侧可以手动改变变量值,进行调试。

这个地方有一个缺点,就是没有办法对代码表达式等进行手动修改,修改完再去运行调试。如果我们在编辑窗口更改了js,他并不能真正的作用于线上代码。你保存了也没有任何效果,你刷新了页面,直接就没有了,没有办法像css的调试那样,可以完全实时修改代码和查看效果。

经过我一番折腾,终于找到了下面这样的方法。在sources下,点击>> ,有一个overrides的选项卡,他的功能是覆盖。把本地的代码覆盖线上的代码,当然只是我们本机测试起作用,并不是真正覆盖。要求是本地的目录与线上的目录完全一致,比如线上的top,域名,层层目录,文件名,要完全一致。

本地新建这些目录,并且把js也新建好,点击overrides后选中top目录,就可以真正的实时映射覆盖了,我们在本地js里修改代码,会被激活。

经过这样的功能,我就解决了之前那个正则验证的问题。因为在家办公,不方便上线js代码,但是用户又急着想提交数据,他那条数据不符合正则的规则提交不上去。我就把本地代码的正则先去掉,帮他提交到后端接口,后端的正则里没有验证这条规则。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档