我如何在Chrome调试器中“动态”编辑JavaScript代码?它不适合我,所以我没有权限访问源文件。我想编辑代码,看看它们对页面有什么影响,在这种情况下,阻止动画排队一堆次。
当前回答
你可以在Chrome调试器中动态编辑javascrpit文件,在Sources选项卡下,但是如果你刷新页面,你所做的更改将会丢失,要在做更改之前暂停页面加载,你需要设置一个断点,然后重新加载页面并编辑您的更改,最后取消暂停调试器以查看更改生效。
其他回答
我今天偶然发现了这个,当时我正在浏览别人的网站。
我意识到我可以在我想动态编辑的代码行之前,在调试器中附加一个断点。由于断点在重新加载页面后仍然存在,所以我可以在断点暂停时编辑我想要的更改,然后继续让页面加载。
所以作为一个快速的解决方法,如果它适合你的情况:
在脚本中较早的位置添加断点 重新加载页面 将更改编辑到代码中 CTRL + s(保存更改) 取消暂停调试器
就像@mark的回答一样,我们可以在Chrome DevTools中创建一个snippet,来覆盖默认的JavaScript。最后,我们可以看到他们对页面的影响。
很简单,转到“脚本”选项卡。然后选择你想要的源文件,双击任意一行进行编辑。
由于这是一个非常流行的关于JS实时编辑的问题,我想指出另一个有用的选项。正如svjacob在他的回答中所描述的:
我意识到我可以在我想动态编辑的代码行之前,在调试器中附加一个断点。由于断点在重新加载页面后仍然存在,所以我可以在断点暂停时编辑我想要的更改,然后继续让页面加载。
上面的解决方案对我来说并不适用于相当大的JS (webpack bundle - 3.21MB缩小版,美化版130k行代码)- chrome崩溃,并要求重新加载页面,恢复任何保存的更改。在这种情况下的方法是Fiddler,你可以设置自动响应选项来替换任何远程资源与任何本地文件从你的计算机-参见这个SO问题的详细信息。
在我的情况下,我还必须添加CORS头提琴成功模拟响应。
现在谷歌chrome引入了新功能。通过使用此功能,您可以在chrome浏览器中编辑您的代码。(永久更改代码位置)
按F12—>源标签—(右侧)—>文件系统—在其中请选择您的代码位置。然后chrome浏览器会请求你的许可,之后的代码将下沉与绿色。你可以修改你的代码,它也会反映你的代码位置(这意味着它将永久改变)
谢谢
推荐文章
- 在Chrome浏览器下加载资源失败
- 如何使用javascript转义正则表达式的特殊字符?
- JavaScript中用于字符串匹配的Switch语句
- 如何在javascript中清除焦点?
- window.location.href=window.location。Href和window.location.reload()
- 如何将字符串转换为日期时间与格式规范在JavaScript?
- 在“DOMWindow”上执行“postMessage”失败:https://www.youtube.com !== http://localhost:9000
- Chrome: console.log, console.debug不工作
- D3数据和数据的区别是什么?
- 波浪号在表达式前面做什么?
- javascript toISOString()忽略时区偏移
- 如何在JavaScript中获得当前时间
- 我如何从一个元标签与JavaScript的信息?
- 匹配精确字符串
- 用JavaScript创建一个基于字符串的十六进制颜色