我如何在Chrome调试器中“动态”编辑JavaScript代码?它不适合我,所以我没有权限访问源文件。我想编辑代码,看看它们对页面有什么影响,在这种情况下,阻止动画排队一堆次。
当前回答
Chrome覆盖
在sources面板中打开JS文件。
右击脚本src URL >显示在源代码面板
确保选中“启用本地覆盖”。
右键单击JS文件>保存覆盖的任何地方
都准备好了!
只需编辑文件,并使用CMD/CTRL + s保存。现在无论何时刷新页面,它都会使用修改后的文件。(只要文件名不变)
如果您在文件图标中看到一个紫色的点,您就知道它正在工作。
其他回答
我今天偶然发现了这个,当时我正在浏览别人的网站。
我意识到我可以在我想动态编辑的代码行之前,在调试器中附加一个断点。由于断点在重新加载页面后仍然存在,所以我可以在断点暂停时编辑我想要的更改,然后继续让页面加载。
所以作为一个快速的解决方法,如果它适合你的情况:
在脚本中较早的位置添加断点 重新加载页面 将更改编辑到代码中 CTRL + s(保存更改) 取消暂停调试器
你可以在Chrome中使用“Overrides”来保存页面加载之间的javascript更改,即使你没有托管原始源代码。
在开发人员工具> Sources > Overrides下创建一个文件夹 Chrome浏览器会请求访问该文件夹的权限,单击允许 在Sources>Page中编辑文件,然后保存(ctrl-s)。紫色点表示文件保存在本地。
由于这是一个非常流行的关于JS实时编辑的问题,我想指出另一个有用的选项。正如svjacob在他的回答中所描述的:
我意识到我可以在我想动态编辑的代码行之前,在调试器中附加一个断点。由于断点在重新加载页面后仍然存在,所以我可以在断点暂停时编辑我想要的更改,然后继续让页面加载。
上面的解决方案对我来说并不适用于相当大的JS (webpack bundle - 3.21MB缩小版,美化版130k行代码)- chrome崩溃,并要求重新加载页面,恢复任何保存的更改。在这种情况下的方法是Fiddler,你可以设置自动响应选项来替换任何远程资源与任何本地文件从你的计算机-参见这个SO问题的详细信息。
在我的情况下,我还必须添加CORS头提琴成功模拟响应。
下面是我在chrome中编写的js调试器的温和介绍。也许它会帮助其他人寻找这方面的信息:http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
如果它的javascript运行在一个按钮点击,然后在Sources>Sources(在chrome开发人员工具中)下进行更改,并按Ctrl +S保存,就足够了。我一直都这么做。
如果你刷新页面,你的javascript更改会消失,但chrome仍然会记住你的断点。
推荐文章
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 卸载Chrome开发工具
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 如何禁用文本选择使用jQuery?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?