Công cụ nghiên cứu và chỉnh sửa giao diện web Firebug

Firebug là công cụ khá phổ biến cho người lập trình 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)

Để sử dụng Firebug bạn cần có Firefox. Sau khi cài Firefox, bạn có thể download và cài đặt Firebug (Firefox addon). Để mở hoặc đóng Firebug: Ấn phím F12 hoặc ấn vào biểu tượng Firebug ở thanh status của Firefox.
 

Các tabs mặc định

Cách tốt nhất để học Firebug là sử dụng nó. Tuy nhiên sẽ tốt hơn nếu trước khi sử dụng bạn hiểu qua một chút.

• Console Tab

  Console tab giúp bạn tìm kiếm các thông tin chi tiết về các lỗi JavaScript, CSS và XML. Bạn có thể kiểm tra tất cả các thông tin với chức năng logging (trên website của bạn). Tab này còn cho phép bạn thực hiện các mã JavaScript ngay trên trình duyệt (Các thông tin trên trang Firebug: Quickly Find Errors, Execute JavaScript on the fly, Logging for JavaScript)

• HTML Tab

  Nếu bạn đã biết HTML thì hẳn bạn sẽ nói mã HTML rất dễ. Đúng vậy, nhưng khi bạn phát triển một trang web lớn hoặc phức tạp thì sẽ thật khó xác định các phần mã HTML cần điều chỉnh/ thay đổi. Với tab HTML, bạn có thể tìm kiếm theo từ khóa nào đó hoặc "inspect" một phần bất kì của trang web. Bạn có thể check được các thông tin quan trọng về CSS layout, margins, borders, padding, kích thước... (Các thông tin trên trang Firebug: Inspect and edit HTML, Visualize CSS metrics)

• CSS Tab

  CSS tab giúp bạn inspect và sửa CSS ngay trên trình duyệt. Bạn cũng có thể load bất kỳ file CSS nào vào trang bạn đang xem. Một công cụ chỉnh sửa CSS đơn giản, mạnh mẽ. Bạn có thể xem được ngay sự thay đổi trên trình duyệt (Các thông tin trên trang Firebug: Tweak CSS to perfection)

• Script Tab

  Script tab là bộ công cụ giúp gỡ lỗi JavaScript (Các thông tin trên trang Firebug: Debug and profile JavaScript)

• DOM Tab

  Firebug giúp bạn nhanh chóng tìm các đối tượng DOM (Document Object Model) ở tab này và bạn cũng có thể sửa đổi ngay tại đây. DOM tab là một công cụ tuyệt vời giúp bạn tìm các hàm javascript để gỡ lỗi. (Các thông tin trên trang Firebug: Explore the DOM)

• Net Tab

  Net tab cung cấp chi tiết tất cả các thông tin về request từ broswer và response từ trang bạn đang xem (Các thông tin trên trang Firebug: Monitor network activity)

Extensions

Firebug cung cấp các API cho phép nhà phát triển đóng góp thêm các tính năng. Dưới đây là danh sách một số extensions:

• FirePHP

• FireQuery

  Dành riêng cho việc sử dụng jQuery.

• Firecookie

  Bạn có thể dùng firecookie để tạo cookie mới, xóa các cookies cũ, xem danh sách các cookies...

• YSlow

  Yslow sẽ kiểm tra trang web và đưa ra các gợi ý thay đổi để giúp trang web chạy nhanh hơn.

• Page Speed

  Tương tự như YSlow, Page Speed thực hiện rất nhiều kiểm tra trên trang web của bạn và đưa ra các gợi ý giúp trang web chạy nhanh hơn

• Pixel Perfect

  Nếu bạn đang làm việc cắt HTML & CSS thì đây là công cụ không thể thiếu. Addon giúp bạn so sánh sự khác nhau từng pixel giữa bản cắt HTML và file thiết kế

• Bạn có thể xem và tìm hiểu thêm rất nhiều extension tại đây