Xpath tools - Revision history

Planetoid: /* References */

2026-06-23T05:55:40Z

References

← Older revision		Revision as of 13:55, 23 June 2026
Line 169:		Line 169:
	{{Template:Troubleshooting}}		{{Template:Troubleshooting}}

	[[Category:Programming]]		[[Category: Programming]]
	[[Category:Web_Dev]]		[[Category: Web_Dev]]
	[[Category:Javascript]]		[[Category: Javascript]]
	[[Category:Data collecting]]		[[Category: Data collecting]]
			[[Category: Revised with LLMs]]

Planetoid: /* Browser console */

2026-06-23T05:54:33Z

Browser console

@@ Line 21: / Line 21: @@
 </table>
-== Browser console ==
+== Browser Console ==
-Browser console of {{chrome}} or {{Edge}}
+=== List matched elements by XPath rule ===
-# 選單: 工具 -> 開發人員工具 -> 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>：
+Open the browser console in {{chrome}} or {{Edge}}:
 https://planetoid.info/images/xpath_result_on_browser_console.jpg
-擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}
+To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses XPath rule {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}:
 <pre>
-// 使用 document.evaluate 取得所有元素
+// Use document.evaluate to retrieve all matching elements
 const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-// 建立陣列來存放所有元素的文字
+// Collect text content from each element
 const textArray = [];
 for (let i = 0; i < result.snapshotLength; i++) {
      const element = result.snapshotItem(i);
-     // 去除換行符號並加入陣列
+     // Strip newlines and trim whitespace
      const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
      textArray.push(cleanedText);
+}
-// 用換行符號連接所有元素
+// Print all results, one per line
 console.log(textArray.join('\n'));
 </pre>

Planetoid: /* Browser console */

2024-11-20T16:55:23Z

Browser console

← Older revision		Revision as of 00:55, 21 November 2024
Line 26:		Line 26:
	# 選單: 工具 -> 開發人員工具 -> Console		# 選單: 工具 -> 開發人員工具 -> 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>：		# 確認符合 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://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg~~

	~~image hosted by [~~https://~~www~~.~~flickr.com~~/~~photos~~/~~planetoid/15103179455/ flickr]~~		https://planetoid.info/images/xpath_result_on_browser_console.jpg

	擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 {{kbd \| key = <nowiki>//div[@id="showvender"]/a</nowiki>}}		擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 {{kbd \| key = <nowiki>//div[@id="showvender"]/a</nowiki>}}

Planetoid: /* chrome javascript console */

2024-11-20T10:20:07Z

chrome javascript console

← Older revision		Revision as of 18:20, 20 November 2024
Line 21:		Line 21:
	</table>		</table>

	== ~~chrome javascript~~ console ==		== Browser console ==
	{{chrome}} ~~javascript console~~
			Browser console of {{chrome}} or {{Edge}}
	# 選單: 工具 -> 開發人員工具 -> Console		# 選單: 工具 -> 開發人員工具 -> 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>：		# 確認符合 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>：

Planetoid at 06:31, 6 November 2024

2024-11-06T06:31:37Z

← Older revision		Revision as of 14:31, 6 November 2024
Line 49:		Line 49:
	</pre>		</pre>

	== ~~chrome extension~~ ==		== XPath Browser extensions ==
	[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]		[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] for {{Chrome}}

	# 不支援 {{kbd \| key=<nowiki>file:///</nowiki>}}		# 不支援 {{kbd \| key=<nowiki>file:///</nowiki>}}
Line 57:		Line 57:
	: https://planetoid.info/images/xpath_helper.jpg		: https://planetoid.info/images/xpath_helper.jpg

	[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub]		[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] for {{Chrome}}

	# After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器		# After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器
Line 65:		Line 65:
	# To build your own xpath or CSS Selector, start typing in the selector input box.		# To build your own xpath or CSS Selector, start typing in the selector input box.

	[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店]		[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店] for {{Chrome}}

	# 開啟「開發人員工具」		# 開啟「開發人員工具」
	# 點選標籤「WebSync」-> 輸入 xpath 規則		# 點選標籤「WebSync」-> 輸入 xpath 規則

	[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome]		[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome] for {{Chrome}}

	* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。		* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。

	~~== firefox extension ==~~
	[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}		[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}
	# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug		# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug

Planetoid: /* chrome javascript console */

2024-11-06T06:22:54Z

chrome javascript console

← Older revision		Revision as of 14:22, 6 November 2024
Line 28:		Line 28:

	image hosted by [https://www.flickr.com/photos/planetoid/15103179455/ flickr]		image hosted by [https://www.flickr.com/photos/planetoid/15103179455/ flickr]

			擷取指定 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>

	== chrome extension ==		== chrome extension ==

Unknown user: /* chrome extension */

2023-11-13T02:11:48Z

chrome extension

← Older revision		Revision as of 10:11, 13 November 2023
Line 50:		Line 50:
	# 點選標籤「WebSync」-> 輸入 xpath 規則		# 點選標籤「WebSync」-> 輸入 xpath 規則

	[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector]		[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome]

	* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。		* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。

Unknown user: /* chrome extension */

2023-11-13T02:10:57Z

chrome extension

← Older revision		Revision as of 10:10, 13 November 2023
Line 49:		Line 49:
	# 開啟「開發人員工具」		# 開啟「開發人員工具」
	# 點選標籤「WebSync」-> 輸入 xpath 規則		# 點選標籤「WebSync」-> 輸入 xpath 規則

			[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector]

			* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。

	== firefox extension ==		== firefox extension ==

Unknown user: /* chrome extension */

2023-07-11T06:21:20Z

chrome extension

← Older revision		Revision as of 14:21, 11 July 2023
Line 32:		Line 32:
	[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]		[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]

			# 不支援 {{kbd \| key=<nowiki>file:///</nowiki>}}
	# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)		# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)
	# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方		# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方

Unknown user: /* chrome extension */

2023-06-27T06:52:52Z

chrome extension

← Older revision		Revision as of 14:52, 27 June 2023
Line 34:		Line 34:
	# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)		# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)
	# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方		# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
	https://~~farm6.staticflickr~~.~~com~~/~~5579~~/~~15102884872_509e9559f6~~.jpg		: https://planetoid.info/images/xpath_helper.jpg

	~~image hosted by [https://www.flickr.com/photos/planetoid/15102884872/in/photostream/ flickr]~~

	[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub]		[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub]