Editing Xpath tools (section)

== Browser console ==

Browser console of {{chrome}} or {{Edge}}
# 選單: 工具 -> 開發人員工具 -> Console
# 確認符合 XPath 規則的結果，例如 XPath 規則是 {{kbd | key = <nowiki>"//img"</nowiki>}}，可在 Console 輸入 {{kbd | key = <nowiki> $x("//img") </nowiki>}}，按 Enter。就會顯示符合 xpath 規則的結果<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng’s Blog]</ref>：

https://planetoid.info/images/xpath_result_on_browser_console.jpg

擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}
<pre>
// 使用 document.evaluate 取得所有元素
const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

// 建立陣列來存放所有元素的文字
const textArray = [];

// 遍歷所有元素
for (let i = 0; i < result.snapshotLength; i++) {
    const element = result.snapshotItem(i);
    // 去除換行符號並加入陣列
    const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
    textArray.push(cleanedText);
}

// 用換行符號連接所有元素
console.log(textArray.join('\n'));
</pre>