* Firebug
Đây là một công cụ mà người làm web Phải
Dùng, nó có rất nhiều chức năng hay mà một dòng khó nói hết được. Sau
đây là 2 bài viết về Firebug.
+) Firebug - Công cụ hữu ích cho thiết kế website
+) Ứng dụng Firebug vào việc khảo sát nhằm tăng tốc website
Đại
khái nó là một công cụ cho phép chúng ta xem được thuộc tính của từng
phần tử trên web, thay đổi để xem trước, hoặc xem dữ liệu truyền đi
truyền về trên mạng (rất hữu ích cho người làm AJAX, hoặc người nào muốn
hiểu sâu về HTTP Request như POST hoặc GET). Nếu bạn muốn học HTML hay
CSS thì đây cũng là công cụ bạn nên cài vào. Nó còn dùng khi không thể
View Selection Source được và muốn xem CSS tương ứng với soure. Ngoài ra
còn nhiều chức năng khác nữa, như là cho phép ta thử edit web.Thường
thì tôi cũng chỉ cài duy nhất cái Firebug này chứ ít khi dùng những
addon khác.
* FireFTP
Dùng để upload file lên mạng. Dù bạn có thể dùng các giải pháp khác, như dùng hẳn các FTP software như SmartFTP, FileZilla…
* IE Tab
Dùng
chể chuyển qua cách hiển thị của IE một cách nhanh chóng. Nếu bạn
thường xuyên phải xem thiết kế web của bạn trên cả IE và FF thì có lẽ
nên dùng nó. IE Tab khá tiện dụng nhưng tôi lại ít dùng do nó không phát
huy được khả năng của IE developer Toolbar, thay vào đó tôi lại dùng IE
View Lite (bấm phải chuột, chọn View in .. IE). Nói thêm về IE
developer Toolbar, cái này cũng có những mặt mạnh và yếu so với Firebug,
khi nào tôi sẽ phân tích thêm
* Load Time Analyzer
Công cụ phân tích thời gian tải xuống, chú ý là Firebug cũng có công cụ gần tương đương…
* Greasemonkey
Dành cho những ai thích ngợm Firefox, thay đổi chức năng của nó. (Chú ý: Thử dùng nó với DOM Inspector.)
* Web Developer
Đây
cũng là một công cụ rất hữu ích. Cái này thêm vào thanh công cụ 1 thanh
nữa, thành ra hơi tốn diện tích, chủ yếu tôi cũng dùng vài chức năng
của nó như là Outline, Resize, (misc…) Display ruler, Edit CSS.
* View Source Chart
Giống như viewsource thông thường, nhưng hiển thị đẹp hơn.
* MeasureIt
Bản thân Web Developer có chức năng tương tự, nó sẽ hiện ra 1 cái thước, cho phép đo kích thước các phần tử trên web.
* HTML Validator
Dành
cho những ai muốn làm web đúng chẩn web (web standard), tức là đúng
theo yêu cầu của DTD (muốn biết rõ DTD là gì thì xin học môn XML). Nó có
thể validate được cả HTML gửi về từ server lần HTML trong bộ nhớ sau
khi thực thi lệnh Ajax. HTML Validator thì không cần lắm, nhưng cứ cài
lên cho nó yên tâm mỗi khi nhìn thấy biểu tượng màu xanh của nó (và
validate cũng không có nghĩa là web sẽ giống nhau trên mọi trình duyệt,
đương nhiên).
* Window Resizer
Nhanh chóng chuyển
giao diện web về ứng với các độ phân giải 640×480, 800×600, 1024×768,
1280×1024 và 1600×1200 để bạn kiểm tra web mà bạn thiết kế trên nhiều độ
phân giải khác nhau. Chú ý là bản thân Web Developer cũng có công cụ
này
* Aardvark
Firebug cũng có chức năng tương tự
thế này, cho phép chúng ta di chuột qua từng phần tử web thì sẽ thấy
được thuộc tính của nó, và thậm chí sửa thuộc tính đó để xem.
*Dust me selector
Tìm các selector không cần thiết trong CSS, giúp tối ưu CSS và giảm dung lượng cũng như tăng tốc độ duyệt trang web.
*Java Console:
Addon giúp bạn thấy các Java applet chạy như thế nào trên trang web.
Bạn có thể theo dõi và kiểm lỗi các applet, và lấy báo cáo về hiệu suất
của chúng.
*LinkChecker: Addon sẽ đánh dấu các link trên website bất kì và báo cho bạn biết link đó còn “sống” hay sẽ trả về lỗi 404.
*Poster:
Nếu bạn muốn kiểm lỗi máy chủ và tạo các truy vấn HTTP, thì Poster là
công cụ dành cho bạn. Rất dễ dùng, bạn có thể thiết lập loại nội dung,
và trong vài phút bạn sẽ thấy thông tin bạn muốn để kiểm tra kết quả các
truy vấn HTTP.
*Yslow: Cần firebug cài sẵn cho
addon này. Nó sẽ tìm ra nguyên nhân vì sao site của bạn chạy chậm. Addon
phân tích các trang web và trả về các nguyên nhân gây chậm website, dựa
trên các qui tắc của Yahoo về website có hiệu suất cao.
*SenSEO:
Nhìn chung nó cũng như Yslow. YSlow dùng tối ưu hóa cho frontend, còn
SenSEO tối ưu hóa SEO (SEO, viết tắt của search engine optimization- là
một tập hợp các phương pháp nhằm nâng cao thứ hạng của một website trong
các trang kết quả của các công cụ tìm kiếm ).
*CSS Viewer:
Addon này sẽ cung cấp cho bạn mọi thông tin về CSS của một site. Đơn
giản chỉ là click vào trang bạn muốn, mở trang đó trong menu Tools, nó
sẽ hiển thị thông tin về CSS.
*ColorZilla:
ColorZilla sẽ tìm đúng mã màu và cho phép bạn “dán” vào mã chương trình.
Bạn cũng có thể tạo màu theo ý thích bằng trình duyệt có tích hợp bảng
màu. Addon này sẽ lưu những màu thường dùng nhất để bạn dễ sẻ dụng lại
lần sau.
*Font Finder: Cho phép bạn đánh dấu 1 font
mà bạn thích trên bất kì site nào, click chuột phải vào phần text đã
chọn, rồi chọn “Font Finder”, bạn sẽ thấy CSS style của phần text đó,
bạn có thể copy vào trang web của chính mình