Google Chrome'da XPath almanın bir yolu var mı?

YQL ile kullanmak istediğim bir web sayfam var. Ama belirli bir öğenin XPath'ına ihtiyacım var. Google Chrome için hata ayıklama araçları alanında görebiliyorum ancak bu XPath'i kopyalamanın bir yolunu göremiyorum.

Tam bir XPath kopyalamanın bir yolu var mı?

Sen kullanabilirsiniz $xChrome'un JavaScript konsolunda. Uzantı gerekmez.

örn: $x("//img")

Ayrıca web denetçisindeki arama kutusu xpath'i kabul eder

Düğüme sağ tıklayın => "XPath Kopyala"

Yukarıdaki yanıtların hepsi burada doğru ekran görüntüsü ile başka bir yoludur.

Chrome'dan:

1. Xpath'i bulmaya çalıştığınız öğeye sağ tıklayın "denetleyin"
2. Konsolda vurgulanan alana sağ tıklayın.
3. Kopya yoluna git

XPath Yardımcı uzantısı ihtiyacınız olanı yapar: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

Artık kromda uzantıya gerek yok. Xpath için istediğiniz herhangi bir öğeye sağ tıklayın ve "Elemanı Denetle" ye tıklayın ve ardından tekrar Müfettiş'e tıklayın, öğeye sağ tıklayın ve "Xpath Kopyala" ya tıklayın.

Google Chrome, üçüncü taraf uzantıları olmadan XPath / CSS seçicilerini değerlendirebilen veya doğrulayabilen kullanışlı bir özellik içeren " Chrome DevTools " adlı yerleşik bir hata ayıklama aracı sunar .

Bu iki yaklaşımla yapılabilir:

XPath / CSS seçicileri değerlendirmek ve DOM'daki eşleşen düğümleri vurgulamak için Öğeler panelindeki arama işlevini kullanın. Konsol panelinde $ x ("some_xpath") veya $$ ("css-selectors") belirteçlerini yürütün; hem değerlendirir hem de doğrular.

Öğeler panelinden

1. Chrome DevTools'u açmak için F12 tuşuna basın.

2. Öğeler paneli varsayılan olarak açılmalıdır.

3. Panelde DOM aramasını etkinleştirmek için Ctrl + F tuşlarına basın.

4. Değerlendirmek için XPath veya CSS seçicilerini yazın.

5. Eşleşen öğeler varsa, bunlar DOM'da vurgulanır. Ancak, DOM içinde eşleşen dizeler varsa, bunlar da geçerli sonuçlar olarak kabul edilecektir. Örneğin, CSS seçici üstbilgisi, yalnızca eşleme öğeleri yerine üstbilgi kelimesini içeren her şeyle (satır içi CSS, komut dosyaları vb.) Eşleşmelidir.

Konsol panelinden

1. Chrome DevTools'u açmak için F12 tuşuna basın.

2. Konsol paneline geçin.

3. $x(".//header")Değerlendirmek ve doğrulamak için XPath yazın.

4. $$("header")Değerlendirmek ve doğrulamak gibi CSS seçicilerini yazın.

5. Konsol yürütüldüğünde döndürülen sonuçları kontrol edin.

Öğeler eşleşirse, bir listede döndürülürler. Aksi takdirde boş bir liste [] gösterilir.

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

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

XPath veya CSS seçici geçersizse, kırmızı metinle bir istisna gösterilir. Örneğin:

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

Herhangi bir öğenin xpath'ini bulmak için basit bir formül söyleyelim:

1- Siteyi tarayıcıda aç

2- Elemanı seçin ve üzerine sağ tıklayın

3- Eleman incelemek seçeneğini tıklayın

4- Seçili HTML'ye sağ tıklayın

5- xpath kopyalama seçeneğini seçin İhtiyacınız olan her yerde kullanın

Bu video bağlantısı sizin için yararlı olacaktır. http://screencast.com/t/afXsaQXru

Not: xpath'ın ileri seçenekleri için, html'nizin regex veya desenini bilmelisiniz.

xpathOnClick aradığınız şeye sahiptir: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Ancak yorumları okuyun, aslında xpath almak üç tıklama alır.

Chrome için en son güncellemeden sonra artık öğe denetçisindeki herhangi bir öğeyi tıklayabilir ve XPath'i panoya kopyalayabilirsiniz.

Örneğin Chrome için:

1. XPath'ı bulmaya çalıştığınız öğede "denetle" yi sağ tıklayın.
2. HTML DOM'de vurgulanan alana sağ tıklayın.
3. Kopyala'ya gidin> 'XPath'i Kopyala'yı seçin.
4. Yukarıdaki adımdan sonra, DOM'dan öğenin mutlak XPath değerini alırsınız.
5. Göreli XPath yapmak için değişiklikler yapabilirsiniz (çünkü DOM değişirse, XPath'iniz yine de öğeyi bulabilir).

a. Bunu yapmak için, tarayıcının 'Öğeler' panelini açarak CTRL + F tuşlarına basın, XPath'i yapıştırın.

b. Aşağıdaki örnekte açıklandığı gibi değişiklikler yapın.

Mutlak xath = // * [@ id = "app"] / div [1] / başlık / nav / div [2] / ul / li [2] / div / düğmesi

İlgili xpath = // div // nav / div [2] / ul / li [2] / div / button

Değişiklik yaptığınızda:

1. XPath'in DOM içinde benzersiz olduğundan emin olun.
2. yine de web öğesi DOM'de ve web sayfasında seçilir.

Xpath için istediğiniz öğeye sağ tıklayın ve kopyalamak için bir menü öğesi göreceksiniz. OP görevini yaptığında bu olmayabilir ama kesinlikle orada.

Firefox'taki Firebug'da, bir öğeyi inceledikten sonra sağ tıklayıp XPath Kopyala'yı seçebilirsiniz. ChromYQLip'in sorunsuz çalışmasını sağlayamadım.

Web sayfasına sağ tıklandığında göreceli XPath'i dinamik olarak oluşturan Chrome Web Uzantısı TruePath'i kullanmayı deneyebilir ve tüm XPath'i menü öğeleri olarak görüntüleyebilirsiniz.

Biraz OT, ancak belki de yararlı: Mac Chrome'da, xpath'i Dev araçlar panelindeki arama kutusundan kopyalayamasanız da (bunun yerine kopya düğümü HTML olarak yakalar), metni harici bir düzenleyiciye sürükleyip bırakabilirsiniz.

Neredeyse tüm mevcut uzantıları denedim ve aşağıdakilerin en iyilerinden biri olduğunu gördüm.

ChroPath Uzantısı bağlantısı

Tıpkı FirePath gibi, bu uzantı Inspect'e tıkladığınızda doğrudan Xpath'i verir.

Basın Cntl + Shift + C
biliyorsun bu doğru olsun diliyorum elemanı seçmek XPathüzerine tıklayarak
right clickkonsolda vurgulanan parçası
copy->copy XPath

Bu uzantıyı kullanın, id veya sınıfa dayalı xpath'ler oluşturur, bu da muhtemelen kullanmak istediğiniz şeydir.

Tarayıcı simgesini tıklayın, panel sayfanın sağ köşesinde gösterilir, ardından incelemeyi başlat'ı tıklayın, ardından xpath'inizi almak için herhangi bir öğeyi tıklayın.

XPath Üreteci