15 Add-on Firefox tuyệt vời dành cho các nhà thiết kế và phát triển Web

Thảo luận trong '5. SEO Master' bắt đầu bởi Cotdien, 27 Tháng chín 2013.

  1. Cotdien

    Cotdien I'M NOTHING Staff Member

    Tham gia ngày:
    25 Tháng sáu 2013
    Bài viết:
    407
    Đã được thích:
    1
    Điểm thành tích:
    18
    - Trình duyệt Mozilla Firefox là lựa chọn phổ biến dành cho các nhà thiết kế và phát triển web, nó có rất nhiều tiện ích có thể giúp công việc thiết kế web trở nên hiệu quả hơn. Dưới đây là gợi ý 15 add-on Firefox “hot” nhất dành cho các nhà thiết kế và phát triển web.
    1. Web Developer 1.1.6
    Add-on Web Developer bổ sung thêm một menu và một thanh công cụ trên Firefox – trình duyệt có đầy đủ các công cụ phát triển web tuyệt vời giúp cho việc thiết kế web của bạn trở nên dễ dàng hơn.Web Developer cho phép bạn vô hiệu hóa các tính năng trên trang web ( như JavaScript, màu sắc trang,..) để chỉnh sửa CSS trong thời gian thực. Các tính năng cho phép bạn tiết kiệm thời gian và trong thế giới thiết kế và phát triển web, thời gian là tiền bạc . Vì vậy Web Developer là tiện ích chắc chắn bạn phải có.
    [​IMG]
    Web Developer 1.1.6
    Download Web Developer
    2. Firebug
    Một loại tiện ích khác cho các nhà phát triển web đó là Firebug - một trong những tiện ích mà bạn không thể sống thiếu nó. Firebug cho phép bạn làm những điều như “ tìm các yếu tố HTML được ẩn trong trang web” và có thể tích hợp vô số các công cụ phát triển vào Firefox ngay trước đầu ngón tay của bạn.
    Với Firebug, bạn có thể chỉnh sửa và gỡ lỗi HTML, JavaScript và CSS trong thời gian thực, tìm ra lý do tại sao bạn nhận được thông báo lỗi pesky. Bạn cũng có thể giám sát hoạt động mạng (để tìm ra lý do tại sao trang của bạn tải quá lâu), hình dung số liệu CSS(để bạn có thể tìm hiểu tại sao hộp CSS không được sắp xếp như những gì nó nên có), và nhiều hơn nữa. Ngoài ra, nhiều tiện ích mở rộng khác dành cho Firebug đang liên tục được cập nhật.
    Đây là cách tốt nhất để tìm hiểu những gì Firebug có thể giúp bạn kiểm tra trang web.
    [​IMG]
    Firebug
    Download Firebug
    3. ColorZilla 2.0.2
    Đây là add-on hữu ích trong rất nhiều tiện ích mà người dùng có thể tìm thấy. Đã bao nhiêu lần bạn xây dựng một trang web thật đặc biệt và tự hỏi : chính xác màu sắc mà bạn sử dụng cho một văn bản hay các yếu tố trong một trang web là gì? Có lẽ là hàng trăm lần, đúng như vậy không?
    [​IMG]
    ColorZilla
    Bây giờ, với một nút bấm, bạn có thể dễ dàng lấy các RGB, hex và thậm chí có được thông tin về các yếu tố DOM trên bộ điều chỉnh. ColorZilla cũng cung cấp cho bạn khả năng phóng to trang và đo khoảng cách giữa hai điểm bất kỳ trên trang web mà bạn đang xem. Đó thật sự là một điều tuyệt vời.
    Download ColorZilla
    4. Screengrab
    Đã bao nhiêu lần bạn nhấn phím “print screen” trong quá trình sử dụng web. Thay vì làm mọi thứ theo cách cũ, bạn đủ thông minh để bắt đầu một cách thức mới, nhanh chóng và dễ dàng lấy một ảnh chụp toàn bộ màn hình, một phần của trang hay toàn bộ cửa sổ mà bạn đang tìm kiếm và một số tùy chọn khác.
    [​IMG]
    Screengrab
    Screengrab sẽ nhắc nhở bạn về SnagIt, bạn không phải bỏ ra bất kỳ tiền mặt nào cho nó và nó vẫn hoạt động tốt. Tôi nghĩ rằng không ai có thể phản đối đây là một tiêu chuẩn add-on phải có ở mỗi trình duyệt của các nhà phát triển và thiết kế web.
    Download Screengrab

    5. Linkchecker
    Ngay cả khi bạn đã nhiều lần xử lý các tình huống về đường link trên trang web thì đây cũng chính là lý do tại sao thiên tài Kevin Freitas xây dựng một cách thức đơn giản hơn, đó là sử dụng add-on Linkchecker hữu ích cho Firefox. Tiện ích này sẽ kiểm tra nếu một liên kết là hợp lệ hoặc không và đây là một trong những tiện ích “sử dụng hằng ngày”, nó sẽ là một công cụ có giá trị trong bộ sưu tập của bạn.
    [​IMG]
    Linkchecker
    Dưới đây là các plugin đang vận hành trên Webitect.
    [​IMG]
    Tình trạng Liên kết Webitect
    Download LinkChecker
    6. Window Resizer 1.0
    Thử nghiệm một trang web mới hay một dự án trong các kích cỡ màn hình khác nhau sẽ quyết định quá trình làm việc của bạn. Add-on đơn giản này cho phép bạn làm điều đó. Cửa sổ hỗ trợ thay đổi kích thước với độ phân giải 640 × 480, 800 × 600, 1024 × 768, 1280 × 800, 1280 × 1024 và 1600 × 1200. Thật tiện lợi phải không nào!
    [​IMG]
    Window Resizer
    Download Window Resizer
    7. IEViewer 1.4.3
    Một bước khá quan trọng trong quá trình thiết kế và phát triển web là xem trang web trong nhiều trình duyệt khác nhau. Trình duyệt được bổ sung đầu tiên và quan trọng nhất để kiểm tra công việc của bạn là Internet Explorer.
    IE View được tạo ra để kiểm tra nhanh chóng việc làm thế nào dự án của bạn xuất hiện trong trình duyệt IE, giúp bạn phát hiện nhanh nhất bất kỳ các vấn đề xảy ra. Một lần nữa, tiện ích đơn giản này có thể giúp bạn tăng cường hiệu quả làm việc.
    [​IMG]
    IEViewer
    Download IE View
    (Lưu ý: Tương tự như IE View là Safari View . Đây là một tiện ích đáng giá để tải về)
    8. Dummy Lipsum
    Đã rất nhiều lần bạn sao chép và dán đoạn text giả “Lorem Ipsum” cho tất cả các dự án trước đây của mình , bạn muốn tìm thấy Dummy Lipsum sớm hơn ! Add-on tuyệt vời này sẽ dành cho các nhà thiết kế hay phát triển web mà không cần họ phải động não nhiều.
    Với một vài cú nhấp chuột, bạn có thể dễ dàng tạo ra một trang đầy đủ các không gian cho những đoạn text phụ và thậm chí bạn có thể tùy chọn cả dấu chấm câu, hiển thị hoặc không hiển thị thẻ html và cho dù bạn muốn bắt đầu với dòng chữ: "Lorem ipsum dolor sit amet ... " Bạn cũng có thể tạo ra các văn bản trong hình thức của một đoạn văn, từ ngữ, byte, hoặc ngay cả một danh sách!
    [​IMG]
    Dummy Lipsum
    Download Dummy Lipsum
    9. HTML Validator 0.8.5.6
    Thay vì sử dụng một công cụ riêng biệt hoặc website để xác nhận HTML trên một trang, bạn có thể tải về tiện ích add-on này để có thêm xác nhận HTML bên trong của Firefox.
    HTML Validator cho bạn thấy số lượng các lỗi của trang HTML trong một biểu tượng trên thanh trạng thái khi bạn đang lướt web, làm cho quá trình đánh dấu các lỗi cực kỳ nhanh chóng và dễ dàng. Trong khi một số tiện ích khác đã bao gồm điều này, đây là một cách tuyệt vời để phát hiện các lỗi trên bộ điều khiển trình duyệt.
    [​IMG]
    HTML Validator
    Download HTML Validator
    10. MeasureIt
    Đã rất nhiều lần bạn cần một tiêu chuẩn đo nhanh chóng để biết được kích cỡ chiều rộng của hình ảnh là bao nhiêu hoặc bao nhiêu hình ảnh thu nhỏ để bạn có thể phù hợp với một hộp,…
    Với MeasureIt, bạn có thể nhanh chóng và dễ dàng rút ra một cây thước để có thể đo lường (bằng pixel, chiều rộng và chiều cao) bất cứ thứ gì trên một trang web. MeasureIt là một công cụ tuyệt vời để thêm vào trình duyệt Firefox cho bất kỳ nhà thiết kế nào, vì nó chắc chắn sẽ đẩy nhanh quá trình làm việc của họ.
    [​IMG]
    MeasureIt
    Download MeasureIt
    11. Codetech

    [​IMG]
    Codetech
    Với tiện ích này bạn có thể chỉnh sửa các tập tin của bạn mà không cần rời khỏi trình duyệt web của bạn. Làm việc như một lite và tiện dụng avatar của Dreamweaver, với những chức năng cần thiết để thiết lập.
    12. FireShot

    [​IMG]

    Add-on Fireshot

    13. Browser Window Resizer

    [​IMG]

    Bạn đang tò mò về trang thiết kế của bạn sẽ trông như thế nào trên màn hình khác? Với việc sử dụng tiện ích nhỏ này, bạn có thể kiểm tra bất cứ kích thước màn hình nào bạn muốn mà không cần phải sử dụng máy tính khác.

    14. Font Finder

    [​IMG]

    Với tiện ích này bạn có thể tìm ra phông chữ nào đang được sử dụng ở trang web bất kỳ. Đơn giản là thêm tiên ích này vào Firefox, dánh dấu văn bản mà bạn muốn biết phông chữ, và kích phải vào “Font Finder”. Rất thuận tiện cho người thiết kế và người thích phong chữ!

    15.CSS Viewer

    [​IMG]

    Wrapping Up

    15 add-on Firefox hiệu quả trên đã cho phép bạn tiết kiệm thời gian cho nhiều dự án. Có rất nhiều tiện ích khác được bổ sung cho các nhà thiết kế và phát triển web, nhưng 15 add-on trên là top những tiện ích tiện dụng nhất trong hàng ngàn tiện ích có sẵn khác.
    Dưới đây là năm tiện ích bạn nên chú ý (chỉ sử dụng trong trường hợp bạn chưa có đủ):
    1. FireFTP - Thay vì mở một FTP bên ngoài để cập nhật trang web, tiện ích này sẽ dễ dàng hơn.
    2. Font Finder - Nhanh chóng hiển thị tất cả các thuộc tính của văn bản được lựa chọn trên một trang.
    3. Colorblind Simulator - tiện ích thử nghiệm mô phỏng những gì một trang trông giống như người mù màu . Từ 10% dân số là mù màu, đây là một trải nghiệm thông minh!
    4. SeoQuake - SEO là tiện ích cơ bản.
    5. Greasemonkey - add-on rất phổ biến cho phép bạn chạy JavaScript tùy chỉnh chống lại bất kỳ trang web nào.

    Mong rằng với gợi ý 15 add-on trên sẽ là nguồn tham khảo hữu ích cho các nhà thiết kế và phát triển web, giúp công việc thiết kế web trở nên hiệu quả hơn. Bạn có thể tìm hiểu thêm Top 10 ứng dụng miễn phí giúp nhà thiết kế web làm việc hiệu quả tại chuyên mục Web Tool của website vivicorp.com.
     

Chia sẻ trang này