Is there a way to get the xpath in google chrome?

问题:

I have a webpage I want to use with YQL. But I need the xpath of a specific item. I can see it in the debug tools area for google chrome but I don\'t see a way to copy that xpath.

Is there a way to copy a full xpath?

回答1:

You can use $x in the Chrome javascript console. No extensions needed.

ex: $x(\"//img\")

Also the search box in the web inspector will accept xpath

回答2:

Right click on the node => \"Copy XPath\"

回答3:

All above answers are correct here is another way with screenshot too.

From Chrome :

1. Right click \"inspect\" on the item you are trying to find the xpath
2. Right click on the highlighted area on the console.
3. Go to Copy xpath

回答4:

XPath Helper extension does what you need: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

回答5:

No extension needed in chrome now. Right click on any element you want xpath for and click on \"Inspect Element\" and then again inside the Inspector, right click on element and click on \"Copy Xpath\".

回答6:

xpathOnClick has what you are looking for: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Read the comments though, it actually takes three clicks to get the xpath.

回答7:

As of the latest update for chrome you can now click any element in the element inspector and copy the XPath to clipboard.

回答8:

Let tell you a simple formula to find xpath of any element:

1- Open site in browser

2- Select element and right click on it

3- Click inspect element option

4- Right click on selected html

5- choose option to copy xpath Use it where ever you need it

This video link will be helpful for you. http://screencast.com/t/afXsaQXru

Note: For advance options of xpath you must know regex or pattern of your html.

回答9:

Google Chrome provides a built-in debugging tool called \"Chrome DevTools\" out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third party extensions.

This can be done by two approaches:

Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM. Execute tokens $x(\"some_xpath\") or $$(\"css-selectors\") in Console panel, which will both evaluate and validate.

From Elements panel

1. Press F12 to open up Chrome DevTools.

2. Elements panel should be opened by default.

3. Press Ctrl + F to enable DOM searching in the panel.

4. Type in XPath or CSS selectors to evaluate.

5. If there are matched elements, they will be highlighted in DOM. However, if there are matching strings inside DOM, they will be considered as valid results as well. For example, CSS selector header should match everything (inline CSS, scripts etc.) that contains the word header, instead of match only elements.

From Console panel

1. Press F12 to open up Chrome DevTools.

2. Switch to Console panel.

3. Type in XPath like $x(\".//header\") to evaluate and validate.

4. Type in CSS selectors like $$(\"header\") to evaluate and validate.

5. Check results returned from console execution.

If elements are matched, they will be returned in a list. Otherwise an empty list [ ] is shown.

$x(\".//article\")
[<article class=\"unit-article layout-post\">…</article>]

$x(\".//not-a-tag\")
[ ]

If the XPath or CSS selector is invalid, an exception will be shown in red text. For example:

$x(\".//header/\")
SyntaxError: Failed to execute \'evaluate\' on \'Document\': The string \'.//header/\' is not a valid XPath expression.

$$(\"header[id=]\")
SyntaxError: Failed to execute \'querySelectorAll\' on \'Document\': \'header[id=]\' is not a valid selector.

回答10:

Just right-click on the element you want the xpath for and you will see a menu item to copy it. This may not have existed when the OP made his post but it\'s certainly there now.

回答11:

In Firebug in Firefox, you can right click on an element after inspecting it, and choose Copy XPath. I could not get ChromYQLip to work smoothly.

回答12:

Slightly OT, but perhaps useful: On Mac Chrome, although you cannot copy the xpath out of the search box in the Dev tools panel (instead, copy grabs the node as HTML), you can drag and drop the text into an external editor.

回答13:

Use this extension, it generates xpaths based on id or class, which is probably what you want to use.

Click on the browser icon, the panel is shown on the right corner of the page, then click start inspect, then click on any element to get your xpath.

XPath Generator

---

Equivalent to Chrome Extension solution above is pluggable to Java project jar: While Chrome provides both XPath and selector both tend to default to attribute \"id\" or other dynamically changing items. Question above is driven by the need to rely on persistent attributes. https://www.burlingtonvisionandlab.com/Downloads/TuSqK231LashowXPathSE7HTML/showXPathSE1_7Table.html

Downloadable free jar will show longer path with reacher selection attributes to pick from.

回答14:

I tried almost all the available extensions and found the below to be one of the best.

ChroPath Extension link

Just like FirePath, this extension directly gives you the Xpath when you click on Inspect.