如何在 chrome 开发者工具中自动化需要单击 javascript 中的按钮的代码

Question

我有这个由第三方制作的游戏环境。它有一个播放按钮，每次我单击它时都会发生某些事情并生成一堆 json 数据。现在我正在尝试收集这些数据，但我不想继续单击播放按钮。我查找了如何自动单击输入按钮，但我相信那里提供的解决方案仅在加载窗口开始时有效。我的问题是我只能从chrome developer tools修改 javascript，我不相信在刷新页面后source's tab所做的更改仍然存在(我可能是错的，但根据我到目前为止观察到的，这就是正在发生的事情(。如何在不单击Start Game按钮的情况下让下面的代码多次运行(目前只有 10 次(，同时只修改 chrome 开发人员工具中的代码？

console.log("loading...")
$(() => {
$("#start-game-btn").click(event => {
console.log("start-game")
$("#errors").text("")
event.preventDefault()
const height = parseInt($("#height").val())
const width = parseInt($("#width").val())
const food = parseInt($("#food").val())
let MaxTurnsToNextFoodSpawn = 0
if ($("#food-spawn-chance").val()) {
MaxTurnsToNextFoodSpawn = parseInt($("#food-spawn-chance").val())
}
const snakes = []
$(".snake-group").each(function() {
const url = $(".snake-url", $(this)).val()
if (!url) {
return
}
snakes.push({
name: $(".snake-name", $(this)).val(),
url
})
})
if (snakes.length === 0) {
$("#errors").text("No snakes available")
}
fetch("http://localhost:3005/games", {
method: "POST",
body: JSON.stringify({
width,
height,
food,
MaxTurnsToNextFoodSpawn,
"snakes": snakes,
})
}).then(resp => resp.json())
.then(json => {
const id = json.ID
fetch(`http://localhost:3005/games/${id}/start`, {
method: "POST"
}).then(_ => {
$("#board").attr("src", `http://localhost:3009?engine=http://localhost:3005&game=${id}`)
}).catch(err => $("#errors").text(err))
})
.catch(err => $("#errors").text(err))
})
console.log("ready!")
})

我尝试在开始时做一个while循环，例如，

$(() => {
var count = 0
while(count <= 10) {
count++
console.log("start-game")
$("#errors").text("")
event.preventDefault()
.........

但没有任何改变。

此外，我没有jQuery的经验，并且对javascript有最低限度的了解，所以请耐心等待。提前谢谢。

Answer 1

假设播放按钮具有唯一的 ID 或类，使其在每次刷新时都可以可靠地选择，您应该使用浏览器插件(如 TamperMonkey(将 JS 注入目标站点。 使用浏览器文档事件DOMContentLoaded在适当的时间启动脚本。

(function() {
document.addEventListener('DOMContentLoaded', (event) => {
/*your code here*/
});
})();