Chrome-Console的XPATH該怎么分析

谷歌瀏覽器，對(duì)于作為程序員的我們來(lái)說(shuō)可以是居家必備了，應(yīng)該用的相當(dāng)?shù)氖煜ち?，我們用的最多的?yīng)該是network選項(xiàng)吧，一般用來(lái)分析網(wǎng)頁(yè)加載的請(qǐng)求信息，比如post參數(shù)之類(lèi)的，這些基本的功能基本上夠用了，今天我說(shuō)的不是network模塊，而是console命令模塊的使用，

關(guān)于console命令的使用網(wǎng)上也有很多的介紹了，但是大多數(shù)的都是互相抄襲，根本不知道誰(shuí)才是作者，在此和大家分享一下 谷歌控制臺(tái)的命令的妙用。
通過(guò)網(wǎng)上的信息我得知

目前控制臺(tái)方法和屬性有：

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

今天說(shuō)的是$x命令。

$x的用法是 ：$x(xpath表達(dá)式)　下面的例子是獲取，寫(xiě)文章時(shí)的添加隨筆這四個(gè)詞的一個(gè)xpath.

 

 

$x("//div[@id='Editor_Edit']/div/span/text()")

簡(jiǎn)單的說(shuō)下這個(gè)xpath，//表示的是不管前面多少級(jí)都匹配（包含一級(jí)），/是只匹配一級(jí) ，@符號(hào)表示的是取元素的屬性后面緊跟的=內(nèi)容就是這個(gè)值"Editor_Edit"，看上圖我們發(fā)現(xiàn)div下面緊挨著的還是div，然后div再下一級(jí)就是span了，到此時(shí)下xpath可以寫(xiě)成這樣了、//div[@id='Editor_Edit']/div/span

但是我們獲取的是span的這個(gè)節(jié)點(diǎn)，文本信息一般在節(jié)點(diǎn)里面，獲取節(jié)點(diǎn)的文本我們用text(),到目前來(lái)說(shuō)我們已經(jīng)寫(xiě)完了，但是這里要注意的一點(diǎn)是，不同的語(yǔ)言和工具在選擇xpath的一些信息的時(shí)候，多多少少有點(diǎn)不同，這里我們看一下，我們執(zhí)行完xpath之后的結(jié)果

 

我們發(fā)現(xiàn)我們獲取了一個(gè)text的節(jié)點(diǎn)而不是文本信息，這時(shí)候呢，如果在python中使用lxml的已經(jīng)可以成功獲取文本值了，但是控制臺(tái)的還要再操作一步

就是我們需要獲取它的nodeValue屬性才可以。我們?cè)龠M(jìn)一步寫(xiě)就是這一樣

 $x("//div[@id='Editor_Edit']/div/span/text()")[0]

在這里說(shuō)個(gè)小技巧，我們?cè)趯?xiě)完上面的內(nèi)容之后 會(huì)發(fā)現(xiàn)我們點(diǎn)方法的時(shí)候點(diǎn)不出東西，這個(gè)時(shí)候我們可以這樣寫(xiě)

var temp=$x("//div[@id='Editor_Edit']/div/span/text()")[0]

獲取之后我們?cè)倏唇Y(jié)果，咦u(yù)nderfined，逗我呢，？  

 

emmm。。 ，，相信大家在初學(xué)python的時(shí)候也遇到過(guò)相似的問(wèn)題，方法的默認(rèn)返回值None，嗯 這個(gè)時(shí)候我們就知道了

這個(gè)情況類(lèi)型，不用在乎這個(gè)返回值了，我們需要的不是這個(gè)值，經(jīng)過(guò)上面的操作，我們做了一件什么事兒呢，

把獲取的節(jié)點(diǎn)結(jié)果賦值給temp這個(gè)變量，此時(shí)temp可以作為全局變量存在，好了這時(shí)候  我們temp.一下發(fā)現(xiàn) 好多屬性提示都出來(lái)了

 

ok，這個(gè)$x的功能就是這么簡(jiǎn)單，同時(shí)我們?cè)谡{(diào)試過(guò)程中也方便了許多。