Những công cụ hỗ trợ Design trên trình duyệt Web

Mọi thứ sẽ thật sự dễ dàng hơn cho việc desgin nếu trình duyệt của bạn tích hợp những công cụ mình giới thiệu dưới đây.

Đối với trình duyệt Firefox

• 3 Addon phổ biến cho design được dùng trong firefox đối với mình là (khoanh trong ô vuông màu đỏ)

- MeasureIt (Add vào Firefox).
- ColorZilla (Add vào Firefox).
- Firebug (Add vào Firefox).

Ở đây mình sẽ hướng dẫn cách cài:
Sau khi cài xong thì bạn sẽ chỉ thấy Firebug và ColorZilla xuất hiện như trong trong hình mà không thấy MeasureIt đâu. Để lấy MeasureIt ra như trong hình, bạn phải chuột vào ô Màu đỏ mình khoanh trong hình và chọn Customize. Tìm đến MeasureIt và kéo vào vị trí trong hình bạn muốn.

• Vậy những công cụ trên để làm gì?

Đầu tiên là MeasureIt, một công cụ để đo kích thước. Khi bạn muốn đo độ rộng một bức ảnh, một khung div hay muốn ước lượng kích thước trên layout web của bạn thì MeasueIt sẽ giúp bạn làm điều đó. Bạn xem trong hình

Tiếp theo là ColorZilla,đây là một Addon rất hữu ích cho việc lấy mã màu trên một trang web bất kỳ. Khi design, khi thấy một mã màu đẹp, chúng ta sẽ sử dụng công cụ này để lấy mã màu. Bạn xem hình dưới:

Cuối cùng, không thể thiếu chính là Firebug, firebug rất hiệu quả cho việc kiểm tra các phần tử trên trang web, khi bạn kích vào bất kì phần tử html nào, firebug sẽ nhận dạng đưa ra các thuộc tính CSS. Nếu bạn dùng firebug tốt, bạn có thể lấy bất kì hiệu ứng jquery đẹp nào trên web. Công cụ này cũng rất hữu ích cho những blogger muốn làm web blog. Tuy nhiên khi không dùng firebug nữa, bạn nên tắt đi. Firebug trên Firefox rất nặng. Bạn xem hình dưới:

3 công cụ trên firebug thật sự tuyệt vời đúng không nào.

Đối với Chrome thì sao?

• Chrome cũng có đầy đủ 3 extension (hỗ trợ mở rộng) này. 

- MeasureIt (Add vào Chrome ).
- ColorZilla (Add vào Firefox).

Ở đây mình sẽ không đưa ra firebug trên Chrome vì bản firebug này chỉ là bản Lite, không hỗ trợ đầy đủ. Thay vào đó bạn sử dụng công cụ hỗ trợ mặc định trên trình duyệt của Chrome (lưu ý: Chỉ bản Chrome 23 nhé)
Khi cài Chrome 23 xong bạn mở lên chỉ việc ấn F12 để công cụ này. Hoặc phải chuột vào trang chọn Check element (Kiểm tra phần tử trang).  Công cụ này hơn Firebug ở điểm là rất nhẹ và hỗ trợ xem trực tiếp kích thước phần tử trang.

Bạn xem hình dưới:

Hy vọng mọi người sẽ cảm thấy thú vị với 3 tiện ích mình chia sẻ trên đây. 

Mọi phản hồi bạn có thể comment trực tiếp hoặc qua Erhay-Hỏi đáp. Xin cảm ơn.