C'è un modo per ottenere XPath in Google Chrome?

Ho una pagina web che voglio usare con YQL. Ma ho bisogno dell'XPath di un oggetto specifico. Posso vederlo nell'area degli strumenti di debug per Google Chrome ma non vedo un modo per copiare quell'XPath.

C'è un modo per copiare un XPath completo?

È possibile utilizzare $xnella console javascript di Chrome. Non sono necessarie estensioni.

ex: $x("//img")

Anche la casella di ricerca nella finestra di ispezione web accetterà xpath

Fare clic destro sul nodo => "Copia XPath"

Tutte le risposte sopra sono corrette qui è un altro modo anche con screenshot.

Da Chrome:

1. Fai clic con il pulsante destro del mouse su "ispeziona" sull'elemento che stai cercando di trovare xpath
2. Fare clic con il tasto destro del mouse sull'area evidenziata sulla console.
3. Vai a Copia xpath

L'estensione XPath Helper fa ciò di cui hai bisogno: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

Ora non è necessaria alcuna estensione in Chrome. Fare clic con il tasto destro su qualsiasi elemento per cui si desidera xpath e fare clic su "Ispeziona elemento", quindi di nuovo all'interno di Inspector, fare clic con il tasto destro del mouse sull'elemento e fare clic su "Copia Xpath".

Google Chrome fornisce uno strumento di debug integrato chiamato " Chrome DevTools " pronto all'uso , che include una pratica funzionalità che può valutare o validare i selettori XPath / CSS senza estensioni di terze parti.

Questo può essere fatto con due approcci:

Utilizzare la funzione di ricerca all'interno del pannello Elementi per valutare i selettori XPath / CSS ed evidenziare i nodi corrispondenti nel DOM. Esegui i token $ x ("some_xpath") o $$ ("css-selettori") nel pannello Console, che verranno entrambi valutati e validati.

Dal pannello Elementi

1. Premi F12 per aprire Chrome DevTools.

2. Il pannello Elementi dovrebbe essere aperto per impostazione predefinita.

3. Premi Ctrl + F per abilitare la ricerca DOM nel pannello.

4. Digitare i selettori XPath o CSS per valutare.

5. Se ci sono elementi corrispondenti, saranno evidenziati in DOM. Tuttavia, se nel DOM sono presenti stringhe corrispondenti, verranno considerate valide anche i risultati. Ad esempio, l'intestazione del selettore CSS deve corrispondere a tutto (CSS incorporato, script ecc.) Che contiene l'intestazione della parola, anziché corrispondere solo agli elementi.

Dal pannello della console

1. Premi F12 per aprire Chrome DevTools.

2. Passa al pannello Console.

3. Digitare XPath come $x(".//header")valutare e validare.

4. Digitare selettori CSS come $$("header")valutare e validare.

5. Controlla i risultati restituiti dall'esecuzione della console.

Se gli elementi vengono abbinati, verranno restituiti in un elenco. Altrimenti viene visualizzato un elenco vuoto [].

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

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

Se il selettore XPath o CSS non è valido, verrà mostrata un'eccezione in rosso. Per esempio:

$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.

Lascia che ti dica una semplice formula per trovare xpath di qualsiasi elemento:

1- Apri il sito nel browser

2- Seleziona l'elemento e fai clic destro su di esso

3- Fare clic sull'opzione Controlla elemento

4- Fare clic con il tasto destro del mouse sull'html selezionato

5- scegli l'opzione per copiare xpath Usalo dove mai ne hai bisogno

Questo collegamento video sarà utile per te. http://screencast.com/t/afXsaQXru

Nota: per le opzioni avanzate di xpath devi conoscere regex o pattern del tuo html.

xpathOnClick ha quello che stai cercando: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Leggi i commenti però, in realtà bastano tre clic per ottenere lo xpath.

A partire dall'ultimo aggiornamento per Chrome, ora puoi fare clic su qualsiasi elemento nella finestra di ispezione degli elementi e copiare XPath negli Appunti.

Per Chrome, ad esempio:

1. Fai clic con il pulsante destro del mouse su "ispeziona" sull'elemento che stai cercando di trovare XPath.
2. Fare clic con il tasto destro del mouse sull'area evidenziata nel DOM HTML.
3. Vai a Copia> seleziona 'Copia XPath'.
4. Dopo il passaggio precedente, otterrai l'XPath assoluto dell'elemento da DOM.
5. Puoi apportare modifiche per renderlo XPath relativo (perché se il DOM cambia, comunque XPath sarebbe in grado di trovare l'elemento).

un. Per fare ciò, aprendo il pannello "Elementi" del browser, premere CTRL + F, incollare XPath.

b. Apporta le modifiche come descritto nell'esempio seguente.

Absolute xpath = // * [@ id = "app"] / div [1] / header / nav / div [2] / ul / li [2] / div / button

Tasto xpath = // div // nav / div [2] / ul / li [2] / div /

Quando si apportano modifiche:

1. assicurarsi che XPath sia unico nel DOM.
2. tuttavia l'elemento web è selezionato sul DOM e sulla pagina Web.

Basta fare clic con il pulsante destro del mouse sull'elemento per cui si desidera xpath e vedrai una voce di menu per copiarlo. Questo potrebbe non esistere quando l'OP ha pubblicato il suo posto, ma ora è certamente lì.

In Firebug in Firefox, puoi fare clic con il tasto destro su un elemento dopo averlo ispezionato e scegliere Copia XPath. Non sono riuscito a far funzionare ChromYQLip senza problemi.

Puoi provare a utilizzare Chrome Web Extension TruePath che genera dinamicamente il relativo XPath facendo clic con il tasto destro sulla pagina Web e visualizza tutti gli XPath come voci di menu.

Leggermente OT, ma forse utile: su Mac Chrome, sebbene non sia possibile copiare xpath fuori dalla casella di ricerca nel pannello Strumenti di sviluppo (invece, copia afferra il nodo come HTML), puoi trascinare e rilasciare il testo in un editor esterno.

Ho provato quasi tutte le estensioni disponibili e ho scoperto che la seguente è una delle migliori.

Collegamento estensione ChroPath

Proprio come FirePath, questa estensione ti dà direttamente Xpath quando fai clic su Inspect.

premere Cntl + Shift + C
selezionare l'elemento che si desidera ottenere XPathfacendo clic su di esso
right clicksulla parte evidenziata nella console
copy->copy XPath

Usa questa estensione, genera xpaths basati su id o class, che è probabilmente quello che vuoi usare.

Fai clic sull'icona del browser, il pannello viene visualizzato nell'angolo destro della pagina, quindi fai clic su Avvia ispezione, quindi fai clic su qualsiasi elemento per ottenere il tuo xpath.

Generatore XPath