Kiểm tra phần tử được di chuột trong Chrome?

106

Tôi đang cố gắng xem, thông qua các công cụ dành cho nhà phát triển của Chrome, các chú giải công cụ được cấu trúc như thế nào trên một trang web. Tuy nhiên, ngay cả khi tôi di chuột qua mục, khi tôi "kiểm tra phần tử", không có gì hiển thị cho chú giải công cụ trong html. Tôi biết tôi có thể đặt Kiểu thành :hover, nhưng tôi vẫn không thể thấy html hoặc css của chú giải công cụ.

Bất kỳ ý tưởng?

— Skitterm
nguồn

Bạn có thể tìm thấy giải pháp khác tại đây cho Chrome & Firefox

— Muhammed Abdelfattah

80

Tôi thực sự đã tìm thấy một mẹo để làm điều đó với chú giải công cụ Twitter Bootstrap. Nếu bạn mở công cụ phát triển (F12) trên một màn hình khác, sau đó di chuột qua phần tử để hiển thị chú giải công cụ, nhấp chuột phải như thể bạn chọn 'Kiểm tra phần tử'. Để mở menu ngữ cảnh đó, hãy chuyển tiêu điểm sang các công cụ dành cho nhà phát triển. Html cho chú giải công cụ sẽ hiển thị bên cạnh phần tử mà chú giải công cụ của nó trong HTML. Sau đó, bạn có thể nhìn nó như thể nó là một phần tử khác. Nếu bạn quay lại Chrome, HTML sẽ biến mất nên chỉ cần lưu ý một số điều.

Đây là một cách kỳ lạ nhưng nó có hiệu quả với tôi vì vậy tôi nghĩ rằng tôi sẽ chia sẻ nó.

— Justin Chmura
nguồn

12

Vâng, có, nhưng không phải trên Mac.

— actimel

2

- Bước 1: Kiểm tra phần tử tạo chú giải công cụ để hiển thị các công cụ Chrome Dev. - Bước 2: trong khi di chuột qua phần tử, chú giải công cụ của bạn sẽ xuất hiện. Không rời khỏi phần tử, hãy mở một cửa sổ mới (Command-N trên Mac, Ctrl-N ở nơi khác) - Bước 3: Kéo cửa sổ mới bên dưới cửa sổ cũ, để bạn vẫn có thể nhìn thấy chú giải công cụ, sau đó di chuyển con trỏ của bạn vào trình kiểm tra Phần tử . - Bước 4: Cuộn xuống dưới cùng, nơi chú giải công cụ của bạn được thêm vào DOM. Nhấp vào phần tử để xem kiểu dáng của nó.

— pgblu

2

PS điều này không hoạt động đối với chú giải công cụ được tạo qua Javascript từ thuộc tính tiêu đề của chính phần tử, ví dụ như xảy ra trên SO. Các chú giải công cụ đó sử dụng kiểu mặc định.

— pgblu

Điều này đã giúp tôi về các chú giải công cụ trong Kendo

— k29 13/12/18

1

Mẹo: Đầu tiên hãy chuyển đến tab nguồn. Sau đó, bạn có thể tạm dừng Javascript bằng nút F8. Phím tạm dừng ở đó với phím tắt F8 / Ctrl + \ (Câu trả lời từ @Rajan trên trang này)

— rostamiani

85

Giải pháp này hoạt động mà không cần bất kỳ mã bổ sung nào.

Nhấn command-option-jđể mở bảng điều khiển. Nhấp vào nút hình cửa sổ ở góc trên cùng bên phải của bảng điều khiển để mở bảng điều khiển trong một cửa sổ khác.

Sau đó, trong cửa sổ Chrome, di chuột qua phần tử kích hoạt cửa sổ bật lên, nhấn bất command-`kỳ lúc nào bạn cần tập trung vào bảng điều khiển, sau đó nhập debugger. Điều đó sẽ đóng băng trang, sau đó bạn có thể kiểm tra phần tử trong tab Phần tử.

— joeyyang
nguồn

6

Câu trả lời này thực sự rất hay. Mã tối thiểu, không có jQuery hoặc thiết lập màn hình kép.

— uKolka

1

Nó đã làm việc! Ban đầu do một số cấu hình sai, tôi đã thấy chú giải công cụ HTML mặc định chứ không phải chú giải công cụ Bootstrap. Sau khi khắc phục sự cố đó, giải pháp của bạn đã hoạt động. Cảm ơn.

— DFB

2

Ngoài ra, nếu bạn mất tiêu điểm trong khi ghi debuggervào bảng điều khiển, bạn có thể nhấn alt+tabkhi di chuột qua phần tử. Nó hoạt động cho các ứng dụng Chromium trên Windows.

— Orcun

1

Đây là một câu trả lời tuyệt vời!

— Nobita,

Trang Phím tắt của Chrome DevTools cho biết đây là một control + `thay vì command + 'để tập trung trở lại bảng điều khiển. Có lẽ nó đã thay đổi.

— rinat.io

85

F8 sẽ tạm dừng gỡ lỗi.

Di chuột qua chú giải công cụ và nhấn F8khi nó được hiển thị.

Bây giờ bạn có thể sử dụng trình kiểm tra để xem CSS.

— dwjohnston
nguồn

4

Tôi thích cách trong Stackoverflow, miễn là bạn tiếp tục cuộn xuống, bạn sẽ tìm thấy câu trả lời thực sự tốt đó và tốt hơn rất nhiều so với phần còn lại. Điều này rất đơn giản và dễ dàng mà không cần thêm script.

— Alexander Dixon

2

F8 không làm việc cho tôi vì một lý do, nhưng tạm dừng cũng là ràng buộc để Ctrl-\

— Bryan Larsen

Giải pháp tốt nhất ở đây

— NiallMitch. 14

Cả <kbd> F8 </kbd> và <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> trên bố cục bàn phím tiếng Đức của tôi đều không tạm dừng trình gỡ lỗi.

— thử nghiệm

63

Bạn chỉ cần buộc chú giải công cụ hiển thị như vậy

$('.myelement').tooltip('open');

Bây giờ chú giải công cụ sẽ hiển thị bất kể trạng thái di chuột.

Cuộn xuống gần cuối DOM nơi bạn sẽ thấy phần đánh dấu.

Cập nhật xem nhận xét của cneuro cho Bootstrap 3.

$('.myelement').tooltip('show');

Cập nhật xem câu trả lời của Marko Grešak cho Chrome và rõ ràng là Safari cũng $0có thể được sử dụng làm lối tắt cho phần tử hiện được chọn. Điều này dường như cũng hoạt động trong Safari.

$($0).tooltip('show')

— Adam Grant
nguồn

1

$ ('. myelement'). tooltip ('open') là thứ phù hợp với tôi.

— tekumara

6

Tính đến Bootstrap 3, đây là bây giờ .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

— cneuro

2

Trong Chrome, phần tử hiện được chọn có thể được truy cập như $0trong bảng điều khiển. Do đó, bạn có thể chọn phần tử kích hoạt chú giải công cụ và chạy $($0).tooltip('show').

— Marko Grešak

31

Nhấp vào f12tab bảng điều khiển và thêm phần sau:

setTimeout(()=> {debugger},5000)

Điều này sẽ cho bạn 5 giây để làm bất cứ điều gì bạn muốn và nó sẽ ngừng hoạt động 5 seconds. Sau đó, bạn có thể kiểm tra phần tử mục tiêu

(ví dụ: di chuột qua phần tử và đợi 5 giây rồi kiểm tra ..)

— Ali Kleit
nguồn

Hoạt động trong Electron, quá.

— xmedeko

24

Đối với tôi, câu trả lời được chấp nhận không hoạt động: nhấp vào DevTools ngay lập tức đóng ToolTip.

Tuy nhiên, tôi đã tìm thấy /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution đã giúp tôi:

Trong bảng điều khiển :, Chạy:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

Đánh dấu phần tử với thanh tra
Nhấn F12

Bây giờ bạn có thể kiểm tra phần tử, với JavaScript bị tạm dừng để DOM sẽ không thay đổi.

— mikemaccana
nguồn

1

Tài giỏi ! Chính xác những gì tôi đang tìm kiếm. Cảm ơn bạn :) Mặc dù nó không hoạt động với F12 với thiết lập của tôi vì một số lý do, vì vậy tôi đã sử dụng keyCode == 13 và nhấn ENTER.

— Jeremy F.

2

giải pháp tuyệt vời! tôi muốn đề xuất lưu đoạn mã hữu ích này trong khu vực SOURCE -> SNIPPETS của chrome để bạn có thể thực thi nó chỉ bằng một cú nhấp đúp;)

— Magico

1

Giải pháp này vượt trội hơn nhiều so với giải pháp được chấp nhận. Tôi sẽ làm cho nó thành một bookmarklet!

— Lulu

1

Giải pháp tuyệt vời. Rất thông minh.

— Charlie Dalsass

1

Hoàn hảo. Nên là câu trả lời đúng / được chấp nhận!

— Brosig

10

Câu trả lời một cửa sổ, không cần mã hóa

Không có câu trả lời nào khác đúng hoặc có đủ chi tiết, vì vậy đây là nỗ lực của tôi.

Mở DevTools của Chrome bằng F12 / Ctrl + Shift + I (Windows / Linux) hoặc Command + Option + I (Mac).
Chọn tab Nguồn trong cửa sổ DevTools.
Sử dụng chuột, di chuột qua phần tử bạn muốn kiểm tra để hiển thị chú giải công cụ.
Nhấn F8 (Windows / Linux / Mac) để tạm dừng thực thi tập lệnh. Cửa sổ chính sẽ chuyển sang màu xám và cửa sổ bật lên "Tạm dừng trong trình gỡ lỗi" sẽ xuất hiện.
Trong cửa sổ DevTools, chọn tab Phần tử
Đối với chú giải công cụ Bootstrap, chú giải công cụ sẽ xuất hiện cuối cùng <div>trong<body>

— TobyLL
nguồn

5

Không có giải pháp mã nào cho chú giải công cụ được kích hoạt JS:

Với các công cụ phát triển của Chrome, hãy kiểm tra phần tử chứa / gốc của chú giải công cụ. Trong tab "phần tử", nhấp chuột phải vào phần tử DOM vùng chứa đó, sau đó chọn "ngắt trên"> "sửa đổi cây con". Lần tới khi bạn di chuột qua phần DOM mà chú giải công cụ được đặt trong đó, mã JS sẽ bị tạm dừng cho phép bạn kiểm tra nội dung của chú giải công cụ.

— clhenrick
nguồn

4

Làm theo các bước sau

Mở Inspectcửa sổ bằng chrome.
Đặt chuột lên chú giải công cụ.
nhấn F8

Quá trình thực thi JS sẽ bị tạm dừng và sau đó bạn có thể kiểm tra chú giải công cụ.
Nhấn F8lại để bắt đầu thực thi và F10gỡ lỗi.

— Parvez Ahmed
nguồn

2

Đây là một giải pháp đơn giản: Nếu bạn có chú giải công cụ động, bạn có thể làm cho chúng “bền bỉ” bằng cách (tạm thời) thay đổi sự kiện kích hoạt thành click. Điều này sẽ có tác dụng khiến chú giải công cụ chỉ biến mất khi nhấp chuột ra:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Bằng cách này, bạn có thể dễ dàng kiểm tra nó bằng các công cụ gỡ lỗi của FF hoặc Chrome.

— lxg
nguồn

2

1) Mở cửa sổ Kiểm tra bằng cách nhấp vào F12

2) Chuyển đến tab nguồn (bên cạnh bảng điều khiển)

3) Bây giờ di chuột vào phần tử cần kiểm tra và giữ chuột ở đó.

4) Sử dụng bàn phím (Tab hoặc phím shift + tab) để di chuyển điều khiển đến nút tạm dừng hoặc F8 Tham khảo hình ảnh

5) Khi tiêu điểm bàn phím ở nút Phát. Nhấn Enter. Phần tử di chuột của bạn sẽ được đóng băng, bạn có thể làm bất cứ điều gì bây giờ

— Rajan
nguồn

1

rất đơn giản để chỉnh sửa các chú giải công cụ này.

Bước 1 : Kiểm tra phần tử có chú giải công cụ. Đảm bảo rằng nó được đánh dấu bằng màu xanh lam trong devtools.

Bước 2 : nhấp chuột phải vào phần tử (trong phần devtools) và chọn: sửa đổi thuộc tính, trong Break on

Bước 3 : Di chuột qua phần tử được kiểm tra và lớp phủ màu xám sẽ xuất hiện trên trang web với dòng chữ nhỏ: Đã tạm dừng trong trình gỡ lỗi

ở đầu màn hình của bạn

Bước 4 : Nhấp vào mũi tên màu xanh cho đến khi chọn trạng thái di chuột.

Bước 5 : Kiểm tra và chỉnh sửa chú giải công cụ

— Catalin
nguồn

0

Tôi gặp sự cố với điều này vì vậy tôi đã đi đến tài liệu và kiểm tra chú giải công cụ đã được hiển thị trên trang. Điều đó đã giúp tôi nhìn thấy cấu trúc dom của chú giải công cụ và chỉnh sửa nó cho phù hợp.

— philip
nguồn

0

Trong Chome trên Linux, bạn có thể đạt được điều này đối với các chú giải công cụ được tạo JS, chẳng hạn như các chú giải công cụ để tham khảo trên WikiPedia bằng cách thực hiện như sau:

Như đã nêu ở trên, hãy mở các công cụ dành cho nhà phát triển bằng F12. Mở chúng trong một cửa sổ khác. Đánh dấu chú giải công cụ và nhấp vào Ctrl-Shift-C (Trình kiểm tra HTML). Khi bạn di chuyển qua mẹo, cửa sổ nhà phát triển sẽ hiển thị phần thích hợp.

Nếu bạn cần giữ mẹo mở khi bạn di chuột ra khỏi nó, để có thể kiểm tra nó trong cửa sổ khác kỹ hơn, sau đó nhấp chuột phải vào chú giải công cụ và để menu ngữ cảnh lên và nhấp vào cửa sổ công cụ nhà phát triển. Trong trường hợp này, nó để lại mẹo trong cửa sổ wikipedia.

Ở một mức độ nào đó, nó cũng hoạt động với các mẹo bootstrap.

— user1806949
nguồn

0

Vì một số lý do, các câu trả lời được cung cấp ở đây không hoạt động với tôi trên Windows. Tôi đã có thể kiểm tra chú giải công cụ bằng cách mở công cụ dành cho nhà phát triển, sau đó di chuột qua phần tử hiển thị chú giải công cụ, sau đó nhấp chuột phải vào phần tử đó (không phải chú giải công cụ). Sau đó, di chuyển con trỏ vào bảng thanh tra và cuộn xuống dưới cùng. Phần tử chú giải công cụ sẽ vẫn ở đó.

— Nolan Lindeke
nguồn

0

Các công cụ dành cho nhà phát triển cung cấp một cách để kiểm tra một phần tử được di chuột qua như một chú giải công cụ.

1 - Mở công cụ dành cho nhà phát triển bằng F12.

2 - Chọn tab "Phần tử".

3 - Chọn phần tử chính có chứa chú giải công cụ.

4 - Nhấp vào "..." (trên dòng của phần tử mẹ) và sau khi chọn "Break on" / "sửa đổi cây con" (xem hình ảnh bên dưới)

5 - Cuối cùng quay lại ứng dụng và làm cho Chú giải công cụ xuất hiện. Nó sẽ chặn việc thực thi sau khi Chú giải công cụ hiển thị

Hy vọng nó có thể hữu ích cho ai đó!

— Ricardo Magalhães
nguồn

0

Một giải pháp khác tôi đã tìm thấy cho vấn đề này. Thông qua chế độ xem Di động hoặc Máy tính bảng trong Chrome, nhấn Crt + Shift + M trong công cụ Chrome Dev cho chế độ xem Di động trong Chrome. Nhấp (Nhấn) vào div ToolTip và bạn có thể kiểm tra nó bằng Nhấp chuột phải vào chú giải công cụ

— HERAwais
nguồn

0

Nhấn command-option-jđể mở bảng điều khiển. Nhấp vào nút hình cửa sổ ở góc trên cùng bên phải của bảng điều khiển để mở bảng điều khiển trong một cửa sổ khác.

Sau đó, trong cửa sổ Chrome, di chuột qua phần tử kích hoạt cửa sổ bật lên, nhấn bất command-kỳ lúc nào bạn cần tập trung vào bảng điều khiển, sau đó nhập debugger. Điều đó sẽ đóng băng trang; thì bạn có thể kiểm tra phần tử trong tab Elements.

— Okau123
nguồn

-1

Cần lưu ý rằng việc chuyển đổi trạng thái: hover từ bên trong các công cụ dành cho nhà phát triển chỉ có tác động nếu văn bản gợi ý được bật thông qua các quy tắc CSS: hover ngay từ đầu. Việc chuyển đổi chỉ áp dụng trạng thái di chuột cho phần tử nhằm mục đích hiển thị, nhưng không kích hoạt sự kiện di chuột qua JavaScript tương ứng.

Nhiều khung công tác như AngularJS tự động đính kèm HTML chú giải công cụ vào cuối nội dung tài liệu thông qua JavaScript khi phần tử mục tiêu được di chuột qua, vì vậy bất kỳ số lượng nào của việc di chuột và kiểm tra phần tử mục tiêu sẽ không hữu ích.

Câu trả lời của @ joeyyang rất hiệu quả với tôi trong trường hợp này.

— John Rix
nguồn

-2

Một trong những cách dễ nhất mà tôi tìm thấy là:

Mở các công cụ dành cho nhà phát triển Chrome ở bên cạnh
Di chuột qua phần tử
Kích chuột phải
Nhấp vào các công cụ dành cho nhà phát triển
Bây giờ bạn có thể kiểm tra và thay đổi phong cách

— Kaspars Siricenko
nguồn

Điều này không hữu ích @Kaspars

— Es Noguera

@EsNoguera có thể là lý do cụ thể hơn. Đây là cách nó làm việc cho tôi. Vì tôi đã tìm thấy phương pháp hiệu quả tại sao lại không được đề xuất?

— Kaspars Siricenko