== $ 0 (gấp đôi bằng 0 đô la) có nghĩa là gì trong Công cụ dành cho nhà phát triển Chrome?

310

Trong các công cụ dành cho nhà phát triển của Google Chrome, khi tôi chọn một yếu tố, tôi thấy ==$0bên cạnh yếu tố được chọn. Điều đó nghĩa là gì?

google-chrome google-chrome-devtools code-inspection

— một người bạn
nguồn

28

Đó là id Node DOM được chọn. cố gắng chọn bất kỳ nút nào và viết $0trong bảng điều khiển và xem điều gì sẽ xảy ra;)

— bế tắc

33

Nó rất khó hiểu. Có vẻ như ai đó đã viết một số javascript mà họ quên đặt trong thẻ script. Tôi đã dành mười phút để cố gắng tìm ra nơi mà tôi đã nhầm lẫn trong mã của mình ...

— Kip

2

kiểm tra sau developer.chrome.com/devtools/docs/commandline-api#0-4

— Mukesh

2

Tôi nghĩ rằng chỉ có màu nền khác nhau trong dòng được nhấp là đủ ... Tôi thấy không cần thêm == $ 0 vào nguồn html ... Ý tưởng tồi. Chrome doind Chrome-ish thứ.

— Sergio Abreu

developers.google.com/web/tools/chrome-devtools/console/

— trộm

286

Đây là chỉ số nút DOM được chọn cuối cùng. Chrome chỉ định một chỉ mục cho mỗi nút DOM bạn chọn. Vì vậy, $0sẽ luôn luôn trỏ đến nút cuối cùng bạn đã chọn, trong khi $1sẽ chỉ đến nút bạn đã chọn trước đó. Hãy nghĩ về nó giống như một chồng các nút được chọn gần đây nhất.

Ví dụ, xem xét những điều sau đây

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

Bây giờ bạn đã mở bảng điều khiển devtools và được chọn #sunday, #mondayvà #tuesdaytheo thứ tự được đề cập, bạn sẽ nhận được các id như:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

Lưu ý: Có thể hữu ích khi biết rằng nút có thể chọn trong tập lệnh (hoặc bảng điều khiển) của bạn, ví dụ: một cách sử dụng phổ biến cho điều này là bộ chọn phần tử góc, vì vậy bạn chỉ cần chọn nút của mình và chạy:

angular.element($0).scope()

Voila bạn có quyền truy cập vào phạm vi nút thông qua bảng điều khiển.

— bế tắc
nguồn

9

Việc sử dụng / lợi ích của việc này là gì?

— joe_young

6

Tôi tin rằng nó có thể hữu ích trong việc gỡ lỗi. Khả năng truy cập phần tử được kiểm tra bằng bộ chọn đơn giản có thể giúp ích trong nhiều tình huống trong quá trình gỡ lỗi.

— bế tắc

6

Vì vậy, những gì tốt luôn luôn được hiển thị == $0trong giao diện người dùng? Bất cứ ai biết về $0nó cũng sẽ biết nó là yếu tố gì, và nó vô nghĩa với bất kỳ ai không biết.

— BlueRaja - Daniel Pflughoeft

6

@joe_young, tôi nghĩ lợi ích là có thể nhanh chóng truy cập các phần tử trong bảng điều khiển khi điều chỉnh mọi thứ. Đây là một video tôi tập hợp lại để chứng minh điều đó! youtu.be/AKLdx8z6aDk

— RoccoB

1

@LucaDeNardi Có, nó có hại trong sản xuất và mọi nhà phát triển Angular đều thêm dòng này: - $ compileProvider.debugInfoEnabled (false); trong cấu hình Ứng dụng của họ, để tăng hiệu suất. Tuy nhiên, bạn có thể dễ dàng chạy angular.reloadWithDebugInfo (); trong Console để gỡ lỗi khi có yêu cầu.

— Varun Sharma

57

$ 0 trả về phần tử hoặc đối tượng JavaScript được chọn gần đây nhất, $ 1 trả về phần tử được chọn gần đây thứ hai, v.v.

Tham khảo: Tham chiếu API dòng lệnh

— Ani Menon
nguồn

26

Các câu trả lời khác ở đây giải thích rõ ràng ý nghĩa của nó. Tôi muốn giải thích việc sử dụng nó.

Bạn có thể chọn một yếu tố trong elementstab và chuyển sang consoletab bằng chrome. Chỉ cần gõ $0 or $1hoặc bất cứ số nào và nhấn enter và phần tử sẽ được hiển thị trong bảng điều khiển để bạn sử dụng.

— Siva Prakash
nguồn

13

Đây là gợi ý của Chrome để cho bạn biết rằng nếu bạn nhập $ 0 trên bảng điều khiển, nó sẽ tương đương với yếu tố cụ thể đó.

Trong nội bộ, Chrome duy trì một ngăn xếp, trong đó $ 0 là yếu tố được chọn, $ 1 là yếu tố được chọn lần cuối, $ 2 sẽ là yếu tố được chọn trước $ 1, v.v.

Dưới đây là một số ứng dụng của nó:

Truy cập các phần tử DOM từ bảng điều khiển: $ 0
Truy cập thuộc tính của họ từ bảng điều khiển: $ 0.parentEuity
Cập nhật thuộc tính của họ từ bảng điều khiển: $ 1. classList.add (...)
Cập nhật các phần tử CSS từ bảng điều khiển: $ 0.styles.backgroundColor = "aqua"
Kích hoạt các sự kiện CSS từ bảng điều khiển: $ 0.click ()
Và thực hiện nhiều thứ phức tạp hơn, như: $ 0.appendChild (document.createEuity ("div"))

Xem tất cả những điều này trong hành động:

Tuyên bố ủng hộ:

Có, tôi đồng ý có nhiều cách tốt hơn để thực hiện các hành động này, nhưng tính năng này có thể trở nên hữu ích trong các tình huống phức tạp nhất định , như khi một phần tử DOM cần được nhấp nhưng không thể thực hiện được từ UI vì nó được bao phủ bởi các yếu tố khác hoặc, vì một số lý do, không thể nhìn thấy trên UI tại thời điểm đó.

— Sagar
nguồn

2

Tôi sẽ nói Đó chỉ là cú pháp tốc ký để có được tham chiếu của phần tử html trong thời gian gỡ lỗi, bình thường loại công việc này sẽ thực hiện theo phương thức này

document.getElementById , document.getElementsByClassName , document.querySelector

vì vậy, nhấp vào một phần tử html và nhận một biến tham chiếu ($ 0) trong bảng điều khiển là một cách tiết kiệm thời gian rất lớn trong ngày

— malbarmavi
nguồn