如何使用JavaScript在Chrome远程调试的另一DevTools输入框输入并回车

操作方法 #

你要操作的第二个DevTools本身就是基于Web技术实现的页面，你在第一个DevTools（调试第二个DevTools的面板）中运行的JS可以直接访问第二个DevTools的DOM，按以下步骤操作即可：

1. 先确认你运行代码的第一个DevTools的上下文是目标第二个DevTools的页面：将第二个DevTools拖拽为独立窗口，在独立窗口上按Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）打开的第一个DevTools就是符合要求的执行环境。
2. 在第一个DevTools的控制台运行以下代码即可完成内容填充+回车执行：

// 选择DevTools的控制台输入框，部分旧版本DevTools可替换选择器为 .console-prompt.editable
const inputEl = document.querySelector('textarea[aria-label="Console input"]')
// 填入要执行的代码
const targetCode = "alert('测试执行')"
inputEl.value = targetCode
// 触发输入事件让DevTools识别内容变更
inputEl.dispatchEvent(new Event('input', { bubbles: true }))
// 触发回车执行事件
inputEl.dispatchEvent(new KeyboardEvent('keydown', {
  key: 'Enter',
  code: 'Enter',
  keyCode: 13,
  bubbles: true
}))

如果要执行其他代码，直接修改targetCode变量的内容即可。

内容的提问来源于stack exchange，提问作者user16700498