Xpath tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
No edit summary
Line 4: Line 4:
{{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



Revision as of 16:11, 12 May 2018

Tools for xpath selection

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 開始 XPath Helper console
  2. 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方

15102884872_509e9559f6.jpg

image hosted by flickr


firefox extension

Firebug + FirePath for Firefox browser_firefox.png

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

references


Troubleshooting of ...

Template