谷歌瀏覽器，對於作為程式設計師的我們來說可以是居家必備了，應該用的相當的熟悉了，我們用的最多的應該是network選項吧，一般用來分析網頁載入的請求資訊，比如post引數之類的，這些基本的功能基本上夠用了，今天我說的不是network模組，而是console命令模組的使用，

關於console命令的使用網上也有很多的介紹了，但是大多數的都是互相抄襲，根本不知道誰才是作者，在此和大家分享一下 谷歌控制檯的命令的妙用。
通過網上的資訊我得知

目前控制檯方法和屬性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

$x的用法是 ：$x(xpath表示式)　下面的例子是獲取，寫文章時的新增隨筆這四個詞的一個xpath.

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

簡單的說下這個xpath，//表示的是不管前面多少級都匹配（包含一級），/是隻匹配一級 ，@符號表示的是取元素的屬性後面緊跟的=內容就是這個值"Editor_Edit"，看上圖我們發現div下面緊挨著的還是div，然後div再下一級就是span了，到此時下xpath可以寫成這樣了、//div[@id='Editor_Edit']/div/span

但是我們獲取的是span的這個節點，文字資訊一般在節點裡面，獲取節點的文字我們用text(),到目前來說我們已經寫完了，但是這裡要注意的一點是，不同的語言和工具在選擇xpath的一些資訊的時候，多多少少有點不同，這裡我們看一下，我們執行完xpath之後的結果

我們發現我們獲取了一個text的節點而不是文字資訊，這時候呢，如果在python中使用lxml的已經可以成功獲取文字值了，但是控制檯的還要再操作一步

就是我們需要獲取它的nodeValue屬性才可以。我們再進一步寫就是這一樣

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

在這裡說個小技巧，我們在寫完上面的內容之後 會發現我們點方法的時候點不出東西，這個時候我們可以這樣寫

var temp=$x("//div[@id='Editor_Edit']/div/span/text()")[0]
獲取之後我們再看結果，咦underfined，逗我呢，？

emmm。。 ，，相信大家在初學python的時候也遇到過相似的問題，方法的預設返回值None，嗯 這個時候我們就知道了

這個情況型別，不用在乎這個返回值了，我們需要的不是這個值，經過上面的操作，我們做了一件什麼事兒呢，

把獲取的節點結果賦值給temp這個變數，此時temp可以作為全域性變數存在，好了這時候 我們temp.一下發現 好多屬性提示都出來了

ok，這個$x的功能就是這麼簡單，同時我們在除錯過程中也方便了許多。喜歡的小夥兒們隨手轉發一下吧，後續和大家分析其他的關於谷歌瀏覽器控制檯的操作內容。

當前節點的xpath操作
上面都是對元素進行一次xpath操作，有時候我們需要在當前節點下面操作節點，這時候怎麼做呢，
我在網上找到了$x的原始碼：

$x = function (xpath, context) {
        var nodes = [];
        try {
            var doc = (context && context.ownerDocument) || window.document;
            var results = doc.evaluate(xpath, context || doc, null, XPathResult.ANY_TYPE, null);
            var node;
            while (node = results.iterateNext()) {
                nodes.push(node);
            }
        } catch (e) {
             throw e;
        }
        return nodes;
    }

驚訝的發現,$x實際上是兩個引數的，第一個引數xpath表示式,第二個引數context,如果沒有指定context引數，$x()將在當前的 HTML document中查詢 DOM 元素；如果指定了 context 引數，如一個 DOM元素集或jQuery物件，那就會在這個 context 中查詢。
Context引數需要是一個正常工作的節點物件（DOM物件，而不jQuery物件）。雖然傳遞jQuery物件也可以起到限定查詢範圍的作用，但是這樣的話，那麼jQuery物件的context屬性就會變成整個Document物件。
百度首頁為例。

$x(".//input[@type='submit']",$x("//form[@id='form']"))

更多內容參考公眾號:python學習開發。