我如何在Chrome调试器中“动态”编辑JavaScript代码?它不适合我,所以我没有权限访问源文件。我想编辑代码,看看它们对页面有什么影响,在这种情况下,阻止动画排队一堆次。
当前回答
Chrome DevTools有一个片段面板,你可以创建和编辑JavaScript代码,就像你会在一个编辑器,并执行它。 打开DevTools,然后选择Sources面板,然后选择Snippets选项卡。
https://developers.google.com/web/tools/chrome-devtools/snippets
其他回答
由于这是一个非常流行的关于JS实时编辑的问题,我想指出另一个有用的选项。正如svjacob在他的回答中所描述的:
我意识到我可以在我想动态编辑的代码行之前,在调试器中附加一个断点。由于断点在重新加载页面后仍然存在,所以我可以在断点暂停时编辑我想要的更改,然后继续让页面加载。
上面的解决方案对我来说并不适用于相当大的JS (webpack bundle - 3.21MB缩小版,美化版130k行代码)- chrome崩溃,并要求重新加载页面,恢复任何保存的更改。在这种情况下的方法是Fiddler,你可以设置自动响应选项来替换任何远程资源与任何本地文件从你的计算机-参见这个SO问题的详细信息。
在我的情况下,我还必须添加CORS头提琴成功模拟响应。
如果它的javascript运行在一个按钮点击,然后在Sources>Sources(在chrome开发人员工具中)下进行更改,并按Ctrl +S保存,就足够了。我一直都这么做。
如果你刷新页面,你的javascript更改会消失,但chrome仍然会记住你的断点。
这就是你要找的东西:
1.—进入“Source”页签,打开javascript文件
2.-编辑文件,右键单击,弹出菜单:单击“保存”,保存到本地。
为了查看差异或恢复您的更改,右键单击并选择选项“本地修改…”菜单上的。如果展开显示的时间戳,您将看到您的更改相对于原始文件有所不同。
更多详细信息请访问:http://www.sitepoint.com/edit-source-files-in-chrome/
放置断点 右键单击断点并选择“编辑断点” 插入代码。使用SHIFT+ENTER创建新行。
你可以在Chrome调试器中动态编辑javascrpit文件,在Sources选项卡下,但是如果你刷新页面,你所做的更改将会丢失,要在做更改之前暂停页面加载,你需要设置一个断点,然后重新加载页面并编辑您的更改,最后取消暂停调试器以查看更改生效。
推荐文章
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔
- TypeScript枚举对象数组
- 在React.js中正确的img路径
- 在React.js中更新组件onScroll的样式
- onClick ReactJS调用多个函数
- 如何在JavaScript中转义单引号(')?
- Chrome开发工具:如何找出什么是覆盖CSS规则?
- Ng-repeat结束事件
- 谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空
- 模糊vs聚焦-有什么真正的区别吗?
- 如何使用JavaScript创建和样式一个div ?