Công cụ nghiên cứu và chỉnh sửa giao diện web Firebug
Để 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
- Liên hệ
- Tin tức
- Phần mềm
- Dịch vụ
- Giới thiệu
- Trang chủ
68%
90
80
70
60
50
40
30
20
10