Màn hình đóng băng trong trình gỡ lỗi chrome / bảng điều khiển DevTools để kiểm tra popover?

394

Tôi đang sử dụng trình kiểm tra chrome để thử và phân tích cửa sổ bật lên z-indexbootstrap của twitter và thấy nó cực kỳ bực bội ...

Có cách nào để đóng băng popover (trong khi hiển thị) để tôi có thể đánh giá và sửa đổi CSS liên quan không?

Đặt một 'di chuột' cố định trên liên kết được liên kết không làm cho cửa sổ bật lên xuất hiện.

css  google-chrome  google-chrome-devtools 
— Ápram
nguồn
7
Hãy thử đặt điểm dừng trong JavaScript của bạn ngay lập tức sau khi cửa sổ bật lên được hiển thị ( debugger;)
— Hope4You
5
Tôi sử dụng window.setTimeoutđể kích hoạt debuggertrong 5 giây, sau đó di chuột qua phần tử và chờ đợi.
— miễn phí
Xin chào, nhà văn kỹ thuật DevTools ở đây. Tất cả các bạn có thể gửi cho tôi MVCEs thể hiện vấn đề? Kể từ năm 2019, chúng tôi có một vài công cụ nên thực hiện thủ thuật ( điểm dừng của trình lắng nghe sự kiện , các nút giả lớp ) nhưng tôi không thể cung cấp câu trả lời chi tiết cho đến khi tôi có thể tái tạo tình huống của bạn.
— Kayce Basques
— Muhammed AbdElFatah
@KayceBasques Đây là một ví dụ: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Nhấp vào danh sách thả xuống để mở nó, sau đó thử kiểm tra danh sách nội dung danh sách trong chế độ xem Element.
— RMorrisey

Câu trả lời:

704

Nó đã làm việc Đây là thủ tục của tôi:

  1. Duyệt đến trang mong muốn
  2. Mở bảng điều khiển dev - F12trên Windows / Linux hoặc option+ ⌘+ Jtrên macOS
  3. Chọn Sourcestab trong thanh tra chrome
  4. Trong cửa sổ trình duyệt web, di chuột qua phần tử mong muốn để bắt đầu cửa sổ bật lên
  5. Nhấn F8vào Windows / Linux (hoặc fn+ F8trên macOS) trong khi cửa sổ bật lên đang hiển thị. Nếu bạn đã nhấp vào bất cứ nơi nào trên trang thực tế F8 sẽ không làm gì. Lần nhấp cuối cùng của bạn cần ở đâu đó trong thanh tra, như tab nguồn
  6. Chuyển đến Elementstab trong thanh tra
  7. Tìm cửa sổ bật lên của bạn (nó sẽ được lồng trong HTML của phần tử kích hoạt)
  8. Hãy vui vẻ sửa đổi CSS
— Ápram
nguồn
9
Quy trình công việc này đã cho tôi một giới thiệu ngắn gọn, hữu ích về trình gỡ lỗi breakpoint và giúp cô lập một menu khó tạo kiểu, vì nó biến mất khi nhấp vào Console.
— Trevor Pierce
22
Nếu phần tử DOM sử dụng focusout kiện để ẩn bạn không có cơ hội để nhấn F8!
— Marcel
2
@Dean để kích hoạt F8 bạn cần sử dụng fn!
— mik01aj
10
Để biết thêm thông tin, F8phím tắt nào thực sự là tạm dừng trình gỡ lỗi (thực thi tập lệnh). Và ctrl + \ cũng hoạt động. ( cmd + \ trong MacOS).
— LeOn - Han Li
1
Hoặc bạn có thể nhấn F8hai lần
— samdd
274

Để có thể kiểm tra bất kỳ yếu tố nào, hãy làm như sau. Điều này sẽ hoạt động ngay cả khi khó nhân đôi trạng thái di chuột:

  • Chạy javascript sau trong giao diện điều khiển. Điều này sẽ đột nhập vào trình gỡ lỗi trong 5 giây.

    setTimeout(function(){debugger;}, 5000)

  • Đi hiển thị phần tử của bạn (bằng cách di chuột hoặc tuy nhiên) và đợi cho đến khi Chrome đột nhập vào Trình gỡ lỗi.

  • Bây giờ, hãy nhấp vào Elementstab trong Trình kiểm tra Chrome và bạn có thể tìm phần tử của mình ở đó.
  • Bạn cũng có thể nhấp vào Find Elementbiểu tượng (trông giống như kính lúp) và Chrome sẽ cho phép bạn đi và kiểm tra và tìm phần tử của bạn trên trang bằng cách nhấp chuột phải vào biểu tượng đó, sau đó chọnInspect Element

Lưu ý rằng phương pháp này là một biến thể nhỏ cho câu trả lời tuyệt vời khác này trên trang này.

— Công viên Brad
nguồn
7
Tôi tôn trọng rằng bạn đã tôn trọng đúng mức cho câu trả lời của frzsombor. đẹp.
— Jeremy Moritz
4
Đây là những gì tôi cần, vì chức năng là do một phần tử DOM được thêm vào js Focus và bị xóa khi mờ, điều này luôn xảy ra khi bạn chuyển sang các công cụ dev.
— trudesign
6
Giải pháp F8 của Abram không hiệu quả với tôi. Cái này đã làm. Cảm ơn!
— Ralf
3
Cám ơn. Tôi đã tạo một dấu trang với tiêu đề : ❚❚, địa chỉ : javascript:debugger;. F8hoạt động, nhưng đối với những người thích sử dụng chuột thì điều này có thể thuận tiện hơn.
— Tymek
1
Như những người khác đã nhận xét, câu trả lời của F8 không hiệu quả với tôi và đã khiến tôi hoàn toàn thất vọng! Công việc này như một cái duyên vậy. Cảm ơn bạn!
— DoYouEvenCodeBro
70

CẬP NHẬT: Như Brad park đã viết trong bình luận của mình, có một giải pháp tốt hơn và dễ dàng hơn chỉ với một dòng mã JS:

chạy setTimeout(function(){debugger;},5000);, sau đó đi hiển thị phần tử của bạn và đợi cho đến khi nó xâm nhập vào Trình gỡ lỗi

Câu trả lời gốc:

Tôi chỉ gặp vấn đề tương tự, và tôi nghĩ rằng tôi đã tìm thấy một giải pháp "phổ quát". (giả sử trang web sử dụng jQuery)
Hy vọng nó sẽ giúp được ai đó!

  1. Chuyển đến tab phần tử trong thanh tra
  2. Nhấp chuột phải <body>và nhấp vào " Chỉnh sửa dưới dạng HTML "
  3. Thêm phần tử sau vào sau <body>đó nhấn Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Nhấp chuột phải vào yếu tố mới này và chọn "Break on ..." -> "Thuộc tính sửa đổi"
  5. Bây giờ hãy vào giao diện Console và chạy lệnh sau:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Bây giờ hãy quay lại cửa sổ trình duyệt và bạn có 5 giây để tìm phần tử của mình và nhấp / di chuột / tiêu điểm / vv, trước khi điểm dừng sẽ được nhấn và trình duyệt sẽ "đóng băng".
  7. Bây giờ bạn có thể kiểm tra phần tử được nhấp / di chuột / tập trung / vv của bạn trong hòa bình.

Tất nhiên bạn có thể sửa đổi javascript và thời gian, nếu bạn có ý tưởng.

— frzsombor
nguồn
11
Chào! Ý tưởng tuyệt vời ... bạn thậm chí không cần thêm div bổ sung mặc dù ... Chỉ cần chạy javascript này setTimeout(function(){debugger;}, 5000);, sau đó đi hiển thị phần tử của bạn và đợi cho đến khi nó xâm nhập vào Trình gỡ lỗi. Sau đó nhấp vào tab "Thành phần" trong Trình kiểm tra Chrome và bạn có thể tìm phần tử của mình ở đó. Bạn cũng có thể nhấp vào biểu tượng "Tìm phần tử" (trông giống như kính lúp) và Chrome sẽ cho phép bạn đi và kiểm tra và tìm phần tử của bạn trên trang bằng cách nhấp chuột phải vào nó, sau đó chọn "Kiểm tra phần tử".
— Brad
5
Tôi nghĩ bạn nên thêm điều này như một câu trả lời, bởi vì giải pháp này không chỉ tốt hơn của tôi, mà còn tốt hơn tất cả những giải pháp khác ở đây. Thực sự tốt đẹp!
— frzsombor 11/2/2015
38
  1. Nhấp chuột phải vào bất cứ nơi nào trong Tab yếu tố
  2. Chọn Breakon... > subtree modifications
  3. Kích hoạt cửa sổ bật lên mà bạn muốn xem và nó sẽ đóng băng nếu thấy thay đổi trong DOM
  4. Nếu bạn vẫn không thấy cửa sổ bật lên, hãy nhấp vào Step over the next function(F10)nút bên cạnh Resume(F8)ở trung tâm trên cùng của chrome cho đến khi bạn đóng băng cửa sổ bật lên mà bạn muốn xem.
— Adrian Enriquez
nguồn
3
CẢM ƠN BẠN! Tôi không biết điều này và nó đã cứu tôi
— R Claven
14

Tôi thấy rằng điều này hoạt động thực sự tốt trong Chrome.

Nhấp chuột phải vào yếu tố mà bạn muốn kiểm tra, sau đó nhấp vào Trạng thái phần tử lực> Di chuột. Ảnh chụp màn hình đính kèm.

Trạng thái phần tử lực

— Leah Huyghe
nguồn
5
Nó sẽ chỉ hoạt động nếu popover được kích hoạt bởi css.
— mik01aj
6

Đặt cái này trong tab console:

setTimeout(function(){debugger;}, 5000)

Sau đó nhấp vào nơi hiển thị cửa sổ bật lên, 5s sau - màn hình sẽ bị đóng băng và có tùy chỉnh CSS thú vị.

— Parker Lucenzo
nguồn
0

Cách đơn giản của tôi:

setTimeout(function(){ debugger; }, 3000);
— Nadav B
nguồn
7
Điều này hoàn toàn giống với giải pháp của Brad
— park
-2

Tôi đã thử các giải pháp khác ở đây, chúng hoạt động nhưng tôi lười nên đây là giải pháp của tôi

  1. di chuột qua phần tử để kích hoạt trạng thái mở rộng
  2. ctrl+ shift+c
  3. di chuột qua phần tử một lần nữa
  4. nhấp chuột phải
  5. điều hướng đến trình gỡ lỗi

bằng cách nhấp chuột phải vào nó không còn đăng ký sự kiện chuột vì menu ngữ cảnh bật lên, vì vậy bạn có thể di chuyển chuột đi một cách an toàn

— Vincent Tang
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.