Google Chrome sao chép đường dẫn CSS trong Công cụ dành cho nhà phát triển

Question

Công cụ dành cho nhà phát triển của Google Chrome hiển thị đường dẫn CSS (hoặc một phần lớn) của phần tử đã chọn ở cuối thanh công cụ. Trong Firebug, bạn có thể nhấp chuột phải vào bất kỳ bộ chọn nào trong Đường dẫn CSS và lấy Đường dẫn CSS đến phần tử đó. Google Chrome có tính năng này không? Những công cụ nào có sẵn nếu không có hỗ trợ tích hợp?

Answer 1

Chrome đã được cập nhật tùy chọn này

Trong chrome sau khi cập nhật gần đây tùy chọn này đã được thay đổi từ
(right click on the element in Elements Window) > Copy CSS path
tới:
(right click on the element in Elements Window) > Copy > Copy selector

Answer 2

Chrome không có nó, vì vậy người đã thực hiện mở rộng chrome, bookmarklets, và các công cụ khác dành cho Chrome để tái tạo chức năng này.

có thể trùng lặp: Chrome equivalent of Firefox Firebug CSS select path

Bookmarklet: http://www.selectorgadget.com/

Chrome Extension: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

tôi sẽ vẫn giống như những người khác câu trả lời, gợi ý và lời khuyên về cách giải quyết tốt nhất với điều này trong Chrome.

Answer 3

Đây là một nhỏ (CoffeeScript) đoạn mà sẽ cung cấp đường CSS (lên đến yếu tố id đầu tiên - dù bạn có thể dễ dàng thay đổi điều đó bằng cách loại bỏ các phần phá vỡ):

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 ' > ' 

Sử dụng ": thứ n con "cho mỗi nút, vì vậy bạn cần phải sửa đổi nó nếu bạn muốn nhận được cả tên lớp.

Answer 4

Bạn có thể nhấp chuột phải vào phần tử trong cửa sổ nguồn chính và "Sao chép đường dẫn CSS". Điều này đã được một cuộc sống tiết kiệm khi tôi phải làm việc trên các trang mà tôi không thể tái mã.