Editing Xpath tools (section)

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

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

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

# After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器
# Open DevTools. 打開「開發人員工具」
# Click on SelectorsHub tab. 點選「元素」標籤，再點選最右邊的「SelectorsHub」
# Here it will show all possible xpath, selectors for inspected element. 
# 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 線上應用程式商店] for {{Chrome}}

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

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

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

[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}
# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
# 切換到 FirePath 標籤
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方