Firebug – Công cụ chỉnh sửa Web tuyệt vời nhất

Firebug là gì ?

 

Firebug là công cụ khá phổ biến cho người lập trình, thiết kế Web . Firebug giúp bạn chỉnh sửa, gỡ lỗi, xem CSS, HTML & JavaScript trên bất kỳ trang web nào. Là một addon của Firefox nhưng Firebug có thể hoạt động trên các trình duyệt khác (Firebug Lite).

Với Add On Firebug của Firefox

Về cơ bản, Firebug là một plugin gỡ lỗi và có thể được thực hiện vào sử dụng tốt, cho dù bạn biết lập trình web (như css hoặc php) hay không. Trong thực tế, điều này là hữu ích cho những ai không biết lập trình trang web và những người có điều thực hiện bằng cách thử nghiệm và báo lỗi. Trong ngắn hạn, phạm vi của Firebug plugin áp dụng cho người viết Blog, thiết kế web, năng động và phát triển Chủ đề Sửa đổi guys, JavaScript coders, php coders và để bất cứ ai viết bất kỳ loại mã cho internet.

Tất nhiên là để có thể sử dụng được Firebug thì bạn phải download và cài đặt Firefox trước tiên.

Kích hoạt Firebug trong Firefox

Sau khi đã tiến hành xong các bước cài đặt Firebug vào FireFox, các bạn có thể kích hoạt bằng cách vào Menu Tools > Addon.
Sau đó click chọn Firebug và disable hay enable tùy bạn, 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 như hình vẽ dưới đây.

Tiếp đến bạn phải enable Firebug một lần nữa, bởi 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ở Firebug bạn có thể dùng các cách sau:

•   Chọn Tools > Firebug > Open Firebug.

•   Right click chuột lên bất kỳ chỗ nào của website (ngoại trừ flash) và chọn Inspect Elements.

Sau khi Firebug được mở:

Các tab chính của Firebug bao gồm: 

• Console: Thể hiện các thông số chạy nền của trình duyệt: Các thông báo lỗi, cảnh báo, javascript, ajax request…

• HTML: Thể hiện các thành phần HTML và CSS.

• CSS: Các thành phần CSS của website.

• D. Javascript: Các thành phần javascript.

• DOM: Các đối tượng của website.

• NET: Thông tin các file liên quan được sử dụng cho trang web như: tên file, domain, thời gian load, thứ tự load.

Chi tiết các thành phần trên và các ứng dụng của nó mình sẽ giới thiệu ở phần sau.

Hướng dẫn sử dụng các TAB trong Firebug

• Console:

Như mình đã nói đâ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ị.

• 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 đó.

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 css và giao 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ị.

 Kết:

Firebug - Công cụ chỉnh sửa tuyệt vời cho website, nó không còn xa lạ với dân thiết kế website. Firebug là một Extension của Firefox giúp bạn xem, chỉnh sửa các đoạn code HTML, CSS của một trang web bất kỳ và hơn nữa... Firebug còn giúp bạn xem ngay kết quả khi vừa chỉnh sửa xong. Với công cụ này, bạn có thể hiểu rõ các hoạt động và thay đổi của ngôn ngữ web một cách nhanh chóng. 

Viết bởi: Thiết kế Website Hà Nội