L.o.a.d.i.n.g

Bạn chưa đăng nhập

Tìm kiếm

Hướng dẫn sử dụng các tab trong FireBug
Ngày viết :05-12-2010
A. Console:
Đây là phần thể hiện các thông số chạy nền như Javascript, XML, HTTPRequest... và các thông báo lỗi, warning. Bạn muốn hiển thị thông số nào thì có thể chọn phần Option nằm ở góc bên phải của tab này và check vào phần muốn hiển thị.

B. HTML:
Phần này hiển thị HTML của trang đang được xem. Chức năng này gần giống như View Source một trang web. Tuy nhiên lại được hỗ trợ rất nhiều tính năng kèm theo.

1. Inspect Element:
Đây là chức năng dùng để xem nội dung html của một đoạn nào đó bạn muốn xem. Đồng thời bạn có thể biết được các thông số: Các thẻ html của phần giao diện bạn muốn xem, các style element và css của phần giao diện đó.

Ví dụ: ở site http://www.khkt.net tôi dùng chức năng Inspect Element cho danh mục ĐIỀU HÀNH. Tôi right click chuột vào chữ ĐIỀU HÀNH và chọn Inspect Element như dưới đây:



Kết quả sẽ xuất hiện đúng đoạn HTML của phần giao diện mà tôi muốn Inspect.



Bạn có thể edit trực tiếp đoạn HTML này bằng cách bấm vào nút Edit ở góc trên bên trái. FireFox sẽ xuất hiện luôn giao diện thay đổi cho bạn. Ngoài ra bạn cũng có thể chỉnh trực tiếp cssgiao diện website cũng sẽ đổi theo ngay lập tức. Chức năng này rất tuyệt khi bạn phải ngồi sửa giao diện html hoặc đang cắt layout cho website. Bạn không cần phải dùng các Editor như Dream Weaver rồi phải dùng browser xem lại mất thời gian. Bạn có thể sửa trực quan bằng Firebug và cảm thấy ok rồi mới dùng Editor chỉnh 1 lần.



Bên phần Style còn có chức năng để bạn bỏ chọn các style bằng cách nhấp trái chuột vào phía trước style đó. Hoặc cũng có thể thêm style bằng cách chọn một style rồi bấm phím Enter để có thêm dòng chèn style. Ngoài ra bạn còn có thể right click chuột vào từng thành phần và chọn các tính năng tương ứng.

Về phần Style, khi bạn chọn tag tương ứng bên HTML thì Style sẽ xuất hiện các css tương ứng. Ngoài ra phần Style còn có tab Layout giúp bạn có cái nhìn trực quan hơn về kích thước hiển thị.
Quay về