Xpath tools: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
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 | |||
# 輸入 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 規則的網頁元件地方 | ||
== | == 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
- 選單: 工具 -> 開發人員工具 -> Console
- 確認符合 XPath 規則的結果,例如 XPath 規則是 "//img",可在 Console 輸入 $x("//img") ,按 Enter。就會顯示符合 xpath 規則的結果[1]:
image hosted by flickr
chrome extension
- 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方)
- 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
image hosted by flickr
Natu WebSync - Chrome 線上應用程式商店
- 開啟「開發人員工具」
- 點選標籤「WebSync」-> 輸入 xpath 規則
firefox extension
Firebug + FirePath for Firefox
- 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
- 切換到 FirePath 標籤
- 輸入 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
- Menu: Tools -> Command Palette
- Xpath: Query document
- input Xpath expression
Other tools
- XPath Expression Tester for XML [Last visited: 2020-06-09]
- Free Online XPath Tester / Evaluator for XML [Last visited: 2020-06-09]
References
- References
Related articles
Troubleshooting of ...
- PHP, cUrl, Python, selenium, HTTP status code errors
- Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors
- HTML/Javascript: Troubleshooting of javascript, XPath
- Software: Mediawiki, Docker, FTP problems, online conference software
- Test connectivity for the web service, Web Ping, Network problem, Web user behavior, Web scrape troubleshooting
Template