2013-05-16 26 views
6

Tôi có thẻ đơn giản <a> bị ẩn khỏi một số JS. (display:none) Tôi đã xem xét nguồn trang và tôi có thể thấy nó không bị ẩn, tuy nhiên thanh tra hiển thị nó là hiển thị: không (kiểu nội tuyến)Cách tìm hiểu nội dung ẩn/hoạt động trên phần tử html

Không tìm ra lớp/id trong mã JS theo thứ tự để cô lập một phần của mã đang ẩn <a>.

Có công cụ hoặc quy trình cố định nào có thể giúp tôi gỡ lỗi này không?

+0

lý do bỏ phiếu xuống? sao tôi nên chỉnh sửa/sửa đổi câu hỏi của mình theo một cách nào đó? – WonderLand

+1

Hãy thử sử dụng các điểm ngắt trong các công cụ phát triển firebug/chrome. Bước qua các dòng mã bằng dòng và bạn sẽ có thể xác định dòng nơi ẩn đang xảy ra. –

+1

Bạn có chắc chắn rằng nó bị ẩn bởi JS chứ không phải CSS? – nnnnnn

Trả lời

21

Chrome cho phép bạn ngắt mã khi thuộc tính trên phần tử bị thay đổi.

  1. Mở công cụ nhà phát triển bằng F12 và chọn tab "Yếu tố". Tìm phần tử bị ẩn. Nhấp chuột phải vào nó, "Break on", "Attributes Modification".

  2. Làm mới trang, giữ Công cụ dành cho nhà phát triển mở.

Nếu phần tử bị ẩn bằng JavaScript, bạn sẽ bị ngắt tại điểm đó.

Nếu không, nó được thực hiện qua CSS. Nếu trường hợp này xảy ra, hãy sử dụng tab "Yếu tố" một lần nữa, chọn phần tử bạn quan tâm và xem "Kiểu" được áp dụng cho cột trong cột bên phải. Chrome sẽ hiển thị kiểu nào được áp dụng theo định nghĩa nào trong đó biểu định kiểu. Sau đó nó sẽ là tầm thường để tìm một ẩn phần tử.

enter image description here

+0

Chỉ cần kiểm tra chéo: vô hiệu hóa JS loại bỏ thuộc tính ẩn vì vậy bây giờ tôi chắc chắn nó là JS liên quan. tuy nhiên thủ thuật trên không hoạt động (giống với FF) – WonderLand

+0

@Francesco: Nó hoạt động cho tôi ... bạn có chắc là yếu tố không nhận được * thay thế * bằng một yếu tố tương tự, thay vì cập nhật? Bạn có để các công cụ Chrome mở khi bạn làm mới không? Bạn có chắc là bạn đang nhắm mục tiêu phần tử phù hợp không? Nếu không đưa ra một [SSCCE] (http://sscce.org/) hoặc một liên kết đến trang bạn đang gặp sự cố, thật khó để giúp bạn thêm. – Matt

+0

đã làm một số 'thủ công' gỡ lỗi: ('$ ('...'). Tìm ('a') .qq (1) .css ({'display': 'none'}); ' – WonderLand

1

Trước hết, nhìn nếu nó được ẩn từ phong cách nội tuyến hoặc bằng một lớp css.

Sau đó, nếu là bởi một lớp css, hãy tìm kiếm trong tất cả dự án của bạn cho lớp đó (bạn sẽ tìm thấy hàm javascript thêm lớp này vào phần tử).

Nếu bị ẩn theo thuộc tính kiểu nội tuyến, hãy xem bên trong dự án của bạn cho bất kỳ thuộc tính .style.display = nào.

Nếu bạn đang sử dụng jquery thử như thế này:

// Search by class 
.addClass(".hiddenClass 

// Search by css 
.hide(), or $(".elementSelector").hide() 
+0

Mã của bạn không liên quan gì đến câu hỏi: "Có một công cụ hoặc thủ tục cố định có thể giúp tôi gỡ lỗi này không?" –

+0

Đây sẽ là thủ tục tôi sẽ làm theo nếu tôi gặp phải vấn đề tương tự như Francesco. – Catalin

1

Đầu tiên hãy chắc chắn rằng nó thực sự là javascript mà giấu đi yếu tố của bạn, vì nó có thể dễ dàng được css. Bước đầu tiên dễ nhất là kiểm tra phần tử và xem liệu có cơ hội mặc định là css ẩn nó hay không.

Thứ hai. Mã js của bạn có trong một tệp hay bạn nhập nhiều tệp js vào trang của mình không? Nếu bạn có nhiều tệp js bạn có thể thử.

Nhập 1 tệp rồi sử dụng javascript để hiển thị phần tử sau đó nhập phần còn lại của tệp.

Nếu mã ẩn phần tử của bạn nằm trong tệp thứ nhất thì phần tử của bạn sẽ hiển thị (vì bạn đã hiển thị phần tử sau khi ẩn nó trước) nếu phần tử không hiển thị, có nghĩa là ẩn sẽ diễn ra trong tệp tiếp theo. Di chuyển mã javascript của bạn hiển thị phần tử sau lần nhập thứ hai, v.v ...

Cuối cùng nhưng không kém phần đảm bảo mã của bạn cũng không nhập tệp css bên ngoài.

Tôi khuyên bạn nên sử dụng Công cụ Chrome Dev để gỡ lỗi javascript bạn làm.

+0

Tôi nghĩ rằng câu trả lời của Matt là câu trả lời cho câu hỏi này.Tất cả, tôi sẽ không xóa câu trả lời vì nó cung cấp một giải pháp thay thế. –

Các vấn đề liên quan