Công cụ Gỡ lỗi CSS trong Internet Explorer

Question

Có các công cụ nào khác ngoài Firebug Lite có thể giúp người dùng truy cập vào tâm trí nhỏ của Internet Explorer và tìm ra chính xác vị trí và lý do tại sao nó mang CSS của tôi quá tệ? Firebug Lite là một công cụ hữu ích của khóa học, nhưng có vẻ như thiếu tính năng quan trọng (hiện diện trong plugin 'Firebug' đầy đủ) cho phép bạn xem những phần nào trong đó khai báo được bỏ qua có lợi cho các khai báo khác.

Ví dụ: sử dụng Firefox với Firebug Tôi có thể thấy rằng .foo {color: red} bị ghi đè bởi .bar {color: blue} sau trong biểu định kiểu.

Tuy nhiên, Firebug lite dường như chỉ hiển thị kiểu được tính toán cuối cùng - tôi không thể khai báo các khai báo nào đang bị bỏ qua, đang bị ghi đè, không được hỗ trợ chút nào và chỉ đơn giản là lỗi.

Có công cụ nào khác hữu ích ở đây không?

Answer 1

Tôi đang sử dụng IE8 Developer Tools (được bao gồm trong hộp), nó có thể hiển thị theo dõi kiểu.

IE7 cũng được Microsoft cung cấp thêm vào được gọi là IE Dev Toolbar. Đã không sử dụng rộng rãi này mặc dù.

Bạn đang sử dụng phiên bản IE nào?

Answer 2

Có. Trong IE8 nhấn F12. Trong các phiên bản trước, cài đặt this.

Answer 3

Các công cụ dành cho nhà phát triển đi kèm với IE8 hoạt động khá tốt.

Answer 4

Tôi không biết nếu nó có khả năng kiểm tra trọng css cụ thể, nhưng tôi muốn bắt đầu ra Internet Explorer Developer toolbar

Answer 5

Một số khác là Debug Bar. Hoạt động trong IE 7 hoặc 8; và tương tự với Firebug

Answer 6

Tôi đã tìm thấy jQuery để hữu ích trong việc tìm ra những gì đang xảy ra "dưới mui xe" để nói. Ví dụ, tôi đã có một tình huống gần đây, nơi tôi thấy rằng tôi không thể tin tưởng các công cụ phát triển đi kèm với IE 8 (mà, bằng cách này, tôi đã chạy trong IE 7, tiêu chuẩn không quirks, chế độ tương thích. Tôi đã ném một số javascript trên trang, bao gồm jQuery, điều này sẽ cho phép tôi nhập một số mã và đánh giá nó mà không dựa vào IE Developer Tools, Firebug hoặc Thanh tra viên web trong Safari Bạn có thể đánh giá những câu như:.

$('body').css('background-image'); 

mà có thể trở lại:

'/images/default_background.png' 

hoặc bất kỳ thứ gì.

YMMV, nhưng đáng để dành thời gian dùng thử.

Answer 7

Bạn có thể sử dụng công cụ mới của mình để xem bố cục của bất kỳ phần tử nào bạn có thể di chuột qua.

HTML Box Visualizer - GitHub