Những addon Chrome thông dụng cho Web Developer

Bài viết này mình sẽ chia sẻ với các bạn những addon thông dụng thường sử dụng trong dành cho các Developer, mà thực ra mình cũng không chắc là nó có thông dụng hay không mà đây là những addon mình đang dùng và mình muôn chia sẻ lại với các bạn, hy vọng các bạn cũng thích nó.

1. Live CSS Editor

Đây là công cụ giúp bạn sửa css trực tiếp trên trình duyệt, sau khi bạn tải addon này về bạn chỉ cần ấn vào biểu tượng bút chí và gõ css vào đó. Khi bạn gõ đến đâu thì giao diện website sẽ thay đổi theo để bạn nhìn trước giao diện xem đã như ý chưa. Và tất nhiên nó chỉ giúp bạn nhìn trước thôi chứ không thể giúp bạn tự động lưu vào file css đươc, sau khi đã ưng ý rồi thì bạn coppy css và chèn vào file css của website thôi.

  Download

2. Window Resizer và Responsive Web Design Tester

Đây là 2 công cụ mình thường dùng để kiểm tra xem website responsive đã chuẩn chưa. Việc sử dụng nó khá dễ nên mình sẽ không nói đến nữa bạn chỉ cần down về là biết cách dùng thôi. Sau đây là link tải hai công cụ này

  Window Resizer

  Responsive Web Design Tester

3. CSSViewer

Đây là công cụ dùng để kiểm tra css của một phần tử. Giả sử bạn muốn kiểm tra xem một khối nào đó của website đã đúng css chưa, hay như bạn nhận được một dự án khách hàng không có giao diện mà chỉ đưa bạn link và yêu cầu bạn làm như thế, và tất nhiện nếu lười bạn có thể zip giao diện về nhưng như thế khi ghép code vào sẽ khó khăn hơn bạn muốn tự cắt cho lành và bạn muốn kiểm tra xem khối này rộng cao bao nhiêu, màu nền là gì, font chữ ra sao bạn có thể dùng đến công cụ này và chỉ vào khối đó nó sẽ hiện thông số cho bạn. Theo cá nhân tác giả nếu như công cụ này có thêm tính năng coppy css nữa sẽ hay hơn.

  Download

4. ColorZilla

Bạn muốn lấy mã màu từ một website khác hoặc bạn muốn coppy mã màu từ khối này của website để dán sang khối khác thì bạn có thể dùng đến công cụ này, khi cài về bạn chọn vào biểu tượng của nó và sau đó chọn pick color from pagevà chỉ cái bút vào điểm cần lấy bạn chỉ cần vào file css và dán mã màu vào thôi. Cũng khá tiện dụng đấy chứ nhỉ. Nhũng tính năng của công cụ này bạn có thể tự vọc thêm còn bản thân mình chỉ dùng chức năng này thôi.

  Download

5. Firebug Lite for Google Chrome™

Theo quan điểm cá nhân của tác giả có lẽ đây là công cụ không thể thiếu khi bạn làm việc với ajax, và bản thân mình thì thích dùng công cụ này trên firefox hơn nó hoạt động có vẻ chuyên nghiệp hơn. Bạn có bao giờ làm việc với ajax nhưng đợi mãi không thấy kểt quả trả về mà cứ loading hoài chưa? Lúc này có thể code của bạn đã bị lỗi và hãy để công cụ này giúp bạn kiểm tra xem lỗi gì nhé. Để bật cộng cụ bạn có thể ấn f12 hoặc click vào hình con bọ bạn cần bật trước khi chạy ajax nhé. Lúc này bạn sẽ thấy được đã load url nào đã đúng chưa, dữ liệu gửi lên là gì thông qua tab post nếu bạn chọn kiểu là post, kết quả trả về thông qua tab response và dựa vào tab này bạn cũng có thể biết được mình đang bị lỗi ở file nào dòng bao nhiêu để đưa ra cách fix.

  Download

# Kết luận

Trên mình vừa giới thiệu với các bạn những công cụ mình dang dùng trong thiết kế website hy vọng những ứng dụng này cũng có ích đối với bạn. Bài viết có nhiều phần mang quan điểm cá nhân của tác giả nên nếu có gì chưa đúng mong các bạn thông cảm. Và cũng mong nhận được góp ý bổ sung từ phía các bạn. Nếu bạn có những addon khác hãy để lại comment dưới bài viết nhé.


Nguồn: freetuts.net

Vinh Dương Đình

Life isn’t about finding yourself. Life is about creating yourself.

Xem thêm bài viết Facebook
comment Không có bình luận
mode_editĐể lại bình luận

menu
menu