Xpath tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
No edit summary
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
Tools for xpath selection
List of tools for xpath expression selection/query


== chrome  javascript console ==
== chrome  javascript console ==
{{chrome}}  javascript console
{{chrome}}  javascript console
# 選單: 工具 -> 開發人員工具 -> Console
# 選單: 工具 -> 開發人員工具 -> 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>:
# 確認符合 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>:
https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg
https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg


Line 11: Line 11:
== chrome extension ==
== chrome extension ==
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]
# 輸入 ctrl + shift + x 開始 XPath Helper console
 
# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方)
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
https://farm6.staticflickr.com/5579/15102884872_509e9559f6.jpg
https://farm6.staticflickr.com/5579/15102884872_509e9559f6.jpg
Line 17: Line 18:
image hosted by [https://www.flickr.com/photos/planetoid/15102884872/in/photostream/ flickr]
image hosted by [https://www.flickr.com/photos/planetoid/15102884872/in/photostream/ flickr]


[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店]
# 開啟「開發人員工具」
# 點選標籤「WebSync」-> 輸入 xpath 規則


== firefox extension ==
== firefox extension ==
Line 24: Line 30:
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方


== references ==
== Sublime text editor ==
[https://packagecontrol.io/packages/xpath xpath - Packages - Package Control]: "[https://www.sublimetext.com/ Sublime Text] plugin for easier cursor navigation of XML and HTML files using XPath 1.0."
 
Steps
# Menu: Tools -> Command Palette
# Xpath: Query document
# input Xpath expression
 
== Other tools ==
* [https://xpath.curiousconcept.com/ XPath Expression Tester] for XML {{access | date=2020-06-09}}
* [https://www.freeformatter.com/xpath-tester.html Free Online XPath Tester / Evaluator] for XML {{access | date=2020-06-09}}
 
== References ==
* References
 
<references/>
<references/>


Related articles
* [https://devhints.io/xpath Xpath cheatsheet]
{{Template:Troubleshooting}}


[[Category:Web_Dev]] [[Category:Javascript]]
[[Category:Programming]]
[[Category:Web_Dev]]  
[[Category:Javascript]]
[[Category:Data collecting]]

Revision as of 14:55, 9 June 2020

List of tools for xpath expression selection/query

chrome javascript console

Chrome Browser chrome.png javascript console

  1. 選單: 工具 -> 開發人員工具 -> Console
  2. 確認符合 XPath 規則的結果,例如 XPath 規則是 "//img",可在 Console 輸入 $x("//img") ,按 Enter。就會顯示符合 xpath 規則的結果[1]

15103179455_c452b70923.jpg

image hosted by flickr

chrome extension

XPath Helper

  1. 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方)
  2. 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方

15102884872_509e9559f6.jpg

image hosted by flickr


Natu WebSync - Chrome 線上應用程式商店

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

firefox extension

Firebug + FirePath for Firefox browser_firefox.png

  1. 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
  2. 切換到 FirePath 標籤
  3. 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方

Sublime text editor

xpath - Packages - Package Control: "Sublime Text plugin for easier cursor navigation of XML and HTML files using XPath 1.0."

Steps

  1. Menu: Tools -> Command Palette
  2. Xpath: Query document
  3. input Xpath expression

Other tools

References

  • References

Related articles


Troubleshooting of ...

Template