Tìm hiểu về firebug

Đăng bởi Neo trong mục Hướng dẫn vào 22 tháng 1, 2010 | Comments

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

Tài nguyên & hướng dẫn

Danh sách các tài nguyên được sắp xếp theo ngày tháng, từ mới đến cũ

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter