在任何页面上运行代码片段

优质
小牛编辑
183浏览
2023-12-01

代码片段是可以在Chrome DevTools的Sources(源文件)面板中创建和执行的小脚本。您可以从任何页面访问和运行它们。 当您运行代码段时,它在当前打开的页面的上下文中执行。

如果你有小的实用程序或调试脚本需要在多个页面上反复使用,请考虑将脚本另存为代码片段。您还可以使用代码片段替代 书签。

TL;DR

  • 代码片段是可以从任何页面上运行的小脚本(类似于书签)。
  • 使用Evaluate in Console(在控制台中评估)功能在控制台中运行部分的代码片段。
  • 请记住,Sources(源文件)面板中的热门功能(如断点)也适用于代码片段。

在原生Android应用启用WebView调试;在Chrome DevTools中调试WebView。

  • 通过chrome://inspect访问可调试的 WebView 列表。
  • WebView调试与通过[远程调试][remote debugging]一个网页是相同的。

创建代码片段

要创建代码片段,请打开Sources(源文件)面板,单击Snippets(代码片段)选项卡,在导航器中右键单击,然后选择New(新建)。

在编辑器中输入您的代码。当你有未保存的更改时,您的脚本名称旁边有一个星号(*),如下面的截图。按Command+S(Mac) 或Ctrl+S(Windows, Linux)保存更改。

运行代码片段

有三种方法可以运行您的代码段:

  • 右键点击代码段文件名(在左侧窗格中列出所有代码段),然后选择Run(运行)。
  • 单击Run(运行)按钮()。
  • Command+Enter(Mac) 或Ctrl+Enter(Windows, Linux) 建。

要在控制台中评估部分的代码片段,选中该部分,右键单击编辑器中的任意位置,并选择Evaluate in Console(在控制台中评估),或使用键盘快捷键Command+Shift+E(Mac) 或Ctrl+Shift+E(Windows, Linux)。

查看本地修改

要查看对代码段做的修改的差异,右键单击代码段编辑器(同时代码段显示),并选择Local modifications(本地修改)。

4.png

在控制台抽屉形式的面板中唤起名为History的新标签页。

5.png

每个时间戳表示修改。展开时间戳旁边的剪头,查看在该时间点所做的修改差异。revert(还原)链接删除修改历史记录。截至2016年6月27日,apply revision content(应用修改内容) 和 apply original content(应用原始内容) 链接似乎不能按预期工作。

设置断点

就像其他的脚本,你可以在代码段上设置断点。请参见 添加断点 来学习如何从 Sources(源文件) 面板中添加断点。