Cập nhật thông tin 01/2018: Bài viết này đã cũ và có thể không còn hợp thời nữa. Hình ảnh lưu trữ đã bị xóa. Ngày nay, với sự phát triển của Google Chrome dành cho các nhà thiết kế website , có thể sử dụng chức năng Inspect của Chrome thay vì Firebug Addon của Firefox.
- Liên hệ công ty thiết kế website tại Biên Hòa Đồng Nai CIT
Giới thiệu và cài đặt
Là một plugin FireFox rất hữu ích và hỗ trợ tốt cho Web designer trong việc debug javascript, chỉnh sửa giao diện và css. Ngoài ra với Firebug, bạn có thể đo tốc độ tải xuống của từng thành phần trong trang web. Là một nhà thiết kế website chuyên nghiệp, đây là một công cụ không thể thiếu cho bạn. Tất nhiên, để có thể sử dụng Firebug, trước tiên bạn phải download và cài đặt Firefox trước đã
Sau đó, chỉ cần truy cập vào liên kết này https://addons.mozilla.org/en-US/firefox/addon/1843 và nhấp vào download để tiến hành install Firebug vào Firefox.
Kích hoạt Firebug trong Firefox
Sau khi bạn hoàn thành các bước để cài đặt Firebug vào FireFox
, bạn có thể kích hoạt nó bằng cách vào Menu Tools > Addon. Sau đó nhấp vào Firebug và disable hay enable tùy bạn, và tất nhiên, phải enable thì mới có thể sử dụng được.
Lưu ý: khi bạn thấy nút Disable tức là Firebug hiện đang enable
Tiếp theo, bạn phải enable Firebug một lần nữa, vì bước trên chỉ là bước để kích hoạt Firebug đối với FireFox. Bạn chọn Menu Tools > Firebug > Bỏ check Disable Firebug.
Giới thiệu các tab của Firebug
Để mở, bạn có thể sử dụng các cách sau:
1. Chọn Tools > Firebug > Open Firebug.
2. Nhấp chuột phải vào bất cứ nơi nào trên trang web (ngoại trừ flash) và chọn Inspect Elements.
Các tab chính của Firebug bao gồm:
A. Console: Hiển thị các thông số chạy nền của trình duyệt: Thông báo lỗi, cảnh báo, javascript, ajax request …
B. HTML: Hiển thị các thành phần HTML và CSS
C. CSS: Các thành phần CSS của trang web.
D. javascript: các thành phần javascript.
E. DOM: Đối tượng của trang web.
F. NET: Các tệp liên quan đến thông tin được sử dụng cho các trang web như: tên file, domain, thời gian load, thứ tự load.
Chi tiết về các thành phần trên và các ứng dụng của nó sẽ được giới thiệu sau.
Hướng dẫn sử dụng các tab trong Firebug
A. Console: Như tôi đã nói, đây là phần hiển thị các thông số chạy nền như javascript, XML, HTTPRequest … và thông báo lỗi, warning. Thông số nào bạn muốn hiển thị, bạn 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 website đang được xem. Chức năng này gần giống như View Source của một website. Tuy nhiên, nó được hỗ trợ với nhiều tính năng đi kèm
1. Inspect Element: Đây là một chức năng được sử 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 thông số: thẻ html của giao diện bạn muốn xem, các style element và css của phần giao diện đó.
Ví dụ: tại trang web http://www.khoahocviet.org, tôi đã sử dụng chức năng Inspect Element cho danh mục ĐIỀU HÀNH. Tôi nhấp chuột phải vào từ ĐIỀU HÀNH và chọn Inspect Element
Kết quả sẽ xuất hiện phần HTML chính xác của giao diện mà tôi muốn Inspect.
Bạn có thể chỉnh sửa HTML này trực tiếp bằng cách nhấp vào nút Edit ở góc trên bên trái. FireFox sẽ xuất hiện để thay đổi giao diện của bạn. Ngoài ra, bạn cũng có thể chỉnh sửa css trực tiếp và giao diện trang web sẽ thay đổi ngay lập tức. Chức năng này rất tuyệt khi bạn phải ngồi chỉnh sửa giao diện html hoặc cắt layout cho website. Bạn không cần sử 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ể chỉnh sửa trực quan với 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ũng 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 bạn 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ũng có thể nhấp chuột phải vào từng thành phần và chọn các tính năng tương ứng. Đối với 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, Style cũng 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ị. Đây là phần được ứng dụng nhiều nhất trong Firebug.
