Chrome瀏覽器在開發工具中複製CSS路徑

谷歌瀏覽器的開發工具顯示了工具欄底部所選元素的CSS路徑（或其大部分）。在Firebug中，您可以右鍵單擊CSS路徑中的任何選擇器，然後抓取到該元素的CSS路徑。 Google Chrome是否具備此功能？如果沒有內置支持，哪些工具可用？Chrome瀏覽器在開發工具中複製CSS路徑

Chrome CSS Path

來源

2013-03-12 MattDiamant

Possibily這就是答案 [Chrome瀏覽器copy csspath] [1] [1]：http://stackoverflow.com/questions/17292794/css-query-generation-apis/22344323#22344323 – chaosguru 2014-03-12 07:12:18

這給了它足夠的路徑，它是一個獨特的元素，但我是更多地尋找整個CSS路徑。雖然謝謝！ – MattDiamant 2014-03-13 20:18:34

正確答案：https://stackoverflow.com/a/35412554/242933 – ma11hew28 2018-01-13 14:14:18

對Chrome的最近更新後更新了這個選項

在Chrome選項已從
(right click on the element in Elements Window) > Copy CSS path
改爲：
(right click on the element in Elements Window) > Copy > Copy selector

來源

2016-02-15 14:59:20

Chrome不具備，所以人們進行了Chrome擴展，書籤工具和其他工具爲Chrome複製此功能。

可能重複： Chrome equivalent of Firefox Firebug CSS select path

小書籤： http://www.selectorgadget.com/

Chrome擴展： https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

我還是想別人的答案，建議，並提示如何在這個最好的交易鉻。

來源

2013-03-12 19:07:03 MattDiamant

我同意，這將是理想的能夠複製它，因爲它已經建成，並且他們還提供了複製xpath和html的能力來自同一個地方。爲此需要擴展是非常愚蠢的。 – devlord 2013-08-07 18:51:16

「或者，我可以更好地學習Google」。我已經失去了數次搜索Google尋求編程相關問題的幫助的次數，只能找到類似「學習使用Google」這樣的不重複的QA回覆。謝謝你也包括一個有用的答案:) – 2013-12-10 19:53:20

這裏是一個小（CoffeeScript的）片段，這將使CSS路徑（最多第一id元素 - 儘管你可以很容易地改變通過移除斷裂部）：

getCSSPath = (node)-> 
    parts = [] 
    while node.parentElement 
    str = node.tagName 
    if node.id 
     str += "##{node.id}" 
     parts.unshift str 
     break 
    siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes) 
    ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node) 
    parts.unshift str + ":nth-child(#{ind + 1})" 
    node = node.parentElement 
    parts.join ' > '

用途「：第n個孩子「對於每個節點，如果你想獲得類名，則需要修改它。

來源

2015-02-06 14:36:06 JussiR

真棒功能！ – kevinkl3 2016-08-06 01:53:02

您可以右鍵單擊主源窗口中的元素和「複製CSS路徑」。當我不得不在不能重新編碼的頁面上工作時，這已經是一種拯救生命。

來源

2015-04-16 20:19:44 Erik

這不是OP要求的。 – 2015-07-17 07:58:54

OP（我自己）正在尋找比「複製CSS路徑」所提供的路徑更長的路徑（請參閱發佈圖像的底部） – BillyNair 2015-09-18 20:13:00

Chrome瀏覽器在開發工具中複製CSS路徑

回答

相關問題