Xpath tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
No edit summary
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
List of tools for xpath expression selection/query
== Comparison of xpath tools ==
<table border=1 class="wikitable sortable">
        <tr>
            <th>Method</th>
            <th>Pros</th>
            <th>Cons</th>
        </tr>
        <tr>
            <td>chrome extension [https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]</td>
            <td>worked on online webpage</td>
            <td>NOT work on offline file</td>
        </tr>
        <tr>
            <td>Sublime [https://packagecontrol.io/packages/xpath xpath] plugin</td>
            <td>worked on offline file</td>
            <td>NOT work on online webpage</td>
        </tr>
</table>


== 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><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
https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg


Line 10: Line 31:
== 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 16: Line 38:
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]


== references ==
 
[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店]
 
# 開啟「開發人員工具」
# 點選標籤「WebSync」-> 輸入 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}}
# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
# 切換到 FirePath 標籤
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
 
== Sublime text editor ==
[https://packagecontrol.io/packages/xpath xpath] plugin: "[https://www.sublimetext.com/ Sublime Text] plugin for easier cursor navigation of XML and HTML files using XPath 1.0."
 
Steps
# Open the Command Palette
#* Menu: Tools -> Command Palette
#* or press the keyboard shortcut<ref>[https://stackoverflow.com/questions/45586508/sublime-text-xpath-plugin-shortcut sublimetext3 - Sublime Text - XPath Plugin shortcut - Stack Overflow]</ref>: {{kbd | key=ctrl + shift + p}} on {{Win}} or {{kbd | key=command + shift + p}} on {{Mac}})
# and select {{kbd | key=Xpath: Query document}}
# input the 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:WebDev]]
[[Category:Programming]]
[[Category:Web_Dev]]
[[Category:Javascript]]
[[Category:Data collecting]]

Revision as of 11:15, 13 July 2021

List of tools for xpath expression selection/query

Comparison of xpath tools

Method Pros Cons
chrome extension XPath Helper worked on online webpage NOT work on offline file
Sublime xpath plugin worked on offline file NOT work on online webpage

chrome javascript console

Chrome Browser chrome.png javascript console

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

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 plugin: "Sublime Text plugin for easier cursor navigation of XML and HTML files using XPath 1.0."

Steps

  1. Open the Command Palette
    • Menu: Tools -> Command Palette
    • or press the keyboard shortcut[3]: ctrl + shift + p on Win Os windows.png or command + shift + p on Mac icon_os_mac.png )
  2. and select Xpath: Query document
  3. input the Xpath expression

Other tools

References

  • References

Related articles


Troubleshooting of ...

Template