在Chrome调试器中进行编辑

2020/10/10 09:21 · javascript ·  · 0评论

如何在Chrome调试器中“动态”编辑JavaScript代码?它不适合我,因此我无权访问源文件。我想编辑代码,看看它们在页面上有什么效果,在这种情况下,使动画无法排队很多次。

您可以在Chrome开发者工具的“脚本”标签下使用内置的JavaScript调试器(在更高版本中,它是“源代码”标签),但是您对代码进行的更改仅在执行通过它们时进行表达。这意味着更改页面加载后未运行的代码将不会生效。与例如更改鼠标悬停处理程序中驻留的代码不同,您可以即时进行测试。

Google I / O 2010活动中有一段视频介绍了Chrome开发者工具的其他功能。

今天,当我在和别人的网站玩耍时,我遇到了这个问题。

我意识到我可以在调试器中将断点附加到某些行上,然后再进行动态编辑。而且由于即使在重新加载页面后仍会保留断点,所以我可以在停在断点处时编辑所需的更改,然后继续让页面加载。

因此,作为一种快速解决方案,如果它适合您的情况,请执行以下操作:

  1. 在脚本的较早位置添加断点
  2. 重新载入页面
  3. 将更改编辑到代码中
  4. CTRL+ s(保存更改)
  5. 取消暂停调试器

这是您要寻找的:

1.-导航到“源”选项卡并打开javascript文件

2.-编辑文件,右键单击它,然后会出现一个菜单:单击“保存”并将其保存在本地。

为了查看差异或恢复您的更改,请右键单击并从菜单中选择选项Local Modifications ...。如果您扩展显示的时间戳,您将看到相对于原始文件的更改差异。

此处提供更多详细信息:http : //www.sitepoint.com/edit-source-files-in-chrome/

您可以在Chrome浏览器中使用“替代”来保留页面加载之间的javascript更改,即使您没有托管原始源代码也是如此。

  1. 在开发人员工具>源>替代下创建一个文件夹
  2. Chrome会询问该文件夹的权限,然后单击“允许”
  3. 在Sources> Page中编辑文件,然后保存(ctrl-s)。紫色点表示文件已保存在本地。

Chrome开发者工具中的“覆盖”子标签

相当容易,请转到“脚本”标签。然后选择所需的源文件,然后双击任何行对其进行编辑。

如果单击运行在按钮上的javascript,则在Sources> Sources(在chrome开发人员工具中)下进行更改,然后按Ctrl + S进行保存就足够了我一直都这样做。

如果刷新页面,您的javascript更改将消失,但是chrome仍会记住您的断点。

由于这是一个涉及JS实时编辑的非常普遍的问题,因此我想指出另一个有用的选择。如svjacob在他的回答中所述:

我意识到我可以在调试器中将断点附加到某些行上,然后再进行动态编辑。由于断点即使在重新加载页面后仍会保留,因此我能够在断点处暂停时编辑所需的更改,然后继续让页面加载。

上面的解决方案不适用于相当大的JS(Webpack软件包-压缩版为3.21MB,修饰版为130k行)-chrome崩溃并要求重新加载页面,该页面会还原所有已保存的更改。在这种情况下,解决方法是Fiddler,您可以在其中设置AutoRespond选项,以用计算机中的任何本地文件替换任何远程资源-有关详细信息,请参见此SO问题

就我而言,我还必须将CORS标头添加到提琴手才能成功模拟响应。

就像@mark的答案一样,我们可以在Chrome DevTools中创建override默认的JavaScript代码段最后,我们可以在页面上看到它们的影响。

图片

现在,谷歌浏览器引入了新功能。通过使用此功能,您可以在chrome浏览器中编辑代码。(永久更改代码位置)

为此,请按F12->“源”选项卡-(右侧)->“文件系统”,请选择您的代码位置。然后chrome浏览器会征求您的许可,然后该代码将以绿色下沉。并且您可以修改您的代码,它也会反映在您的代码位置(这意味着它将永久更改)

谢谢

这是我编写的chrome js调试器的简要介绍。也许它将帮助其他人查找有关此信息:http : //meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

您可以在Chrome调试器的Sources标签下动态编辑javascrpit文件,但是如果刷新页面,更改将丢失;要在执行更改之前暂停页面加载,您需要设置一个断点然后重新加载页面并编辑您的更改,最后取消暂停调试器以查看您的更改生效。
Chrome调试器

我一直在寻找一种更改脚本并调试该新脚本的方法。我设法做到的方式是:

  1. 在要更改和调试的脚本的第一行中设置断点。

  2. 重新加载页面,以便遇到断点

  3. 粘贴新脚本并在其中设置所需的断点

  4. Ctrl + s,页面将刷新,导致命中第一行中的该断点。

  5. F8继续,现在只要不进行重定向和重新加载,新粘贴的脚本将替换原始脚本。

Chrome DevTools具有“片段”面板,您可以在其中创建和编辑JavaScript代码,就像在编辑器中一样,然后执行它。打开DevTools,然后选择Sources面板,然后选择Snippets选项卡。

https://developers.google.com/web/tools/chrome-devtools/snippets

在此处输入图片说明

本文地址:http://javascript.askforanswer.com/zaichromediaoshiqizhongjinxingbianji.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!