在開發greasemonkey腳本時如何檢查值和字段？

Question

可能是一個非常愚蠢的問題，但我正在嘗試做這樣一個簡單的事情：

var links = document.querySelectorAll ("a[href*='pattern'");
for (var J = links.length - 1;  J >= 0;  --J) {
    var link  = links[J];
    let myvar = "foobar";
    link.href = `https://example.com${myvar}`
}

這只是簡單的文本替換，上面的代碼確實替換了鏈接。

但我發現一團糟的是，我的開發感覺就像是反復試驗。 我修改代碼。 如果我更新時頁面上沒有任何反應，那么我知道有問題。 但這是極其低效的。 我的程序就像嘗試這樣的代碼：

var myvar=link.text;
alert(myvar);

然后我更新頁面。 如果根本沒有顯示任何內容，則鏈接可能沒有名為 text 的字段。 我意識到開發油脂猴腳本的人正在以更有效的方式通過控制台或其他方式執行此操作。 但我就是不知道從哪里開始。 我將如何處理上述問題？ 如何找出對象中可用的字段和方法？ 如何檢查它們的值？

Answer 1

這是一個基於您的代碼的示例...

根據評論更新

// To view logged message, open Developer tools for THAT page 
// e.g. F12 in Firefox/Chrome

const myvar = 'foobar';

// get the target links
const links = document.querySelectorAll('a[href*="pattern"');
console.log('links', links);

// run a loop on the links
links.forEach(a => { 
 
  console.log('link url before change', a.href);
  a.href = 'https://example.com' + myvar
  console.log('link url after change', a.href);

  // if you need link text
  console.log('link text', a.textContent);
});