15 Chrome Extension cho các lập trình viên

26 tháng 07, 2017 - 2585 lượt xem

Chrome có 1 công cụ đắc lực là DevTools giúp sức cho các lập trình viên rất nhiều. Tuy nhiên, ngoài DevTools ra còn có những công cụ khác hỗ trợ cho công việc của các lập trình viên không? Để trả lời cho câu hỏi đó, chúng ta hãy đến với 15 extension Chrome ưa thích của cá nhân tôi.

1. Evernote Clipper

https://cdn-images-1.medium.com/max/1600/1*VXK8C4hYeyVTnLUpTfNrFA.png

Đánh dấu trang web bạn muốn giữ. Lưu chúng vào Evernote. Truy cập mọi lúc, trên mọi thiết bị. Hãy sử dụng Evernote extension để lưu mọi thứ bạn muốn vào tài khoản Evernote của bạn. Công cụ tuyệt vời để lưu văn bản, code hay thậm chí cả những bức ảnh.

2. Wappalyzer

https://cdn-images-1.medium.com/max/1600/1*wSq_hfefz9Xt1UXQ1ywTmg.png

Wappalyzer là 1 tiện ích đa nền tảng, giúp khám phá các công nghệ sử dụng trên những trang web. Nó sẽ nhận diện các CMS, nền tảng E-Commerce, framework, server software, các công cụ phân tích và nhiều thứ khác.

3. Web Developer

https://cdn-images-1.medium.com/max/1600/1*bqHtVs-etXZ92i2zLdqk7A.png

 Extension Web Developer sẽ thêm 1 nút bấm vào trình duyệt mà bạn sử dụng. Chỉ 1 nút bấm thôi nhưng chứa rất nhiều các công cụ cho các web developer.

4. Visual Event

https://cdn-images-1.medium.com/max/1600/1*WfaeF_gpIz85LS_CunyQtw.png

Với Visual Event bạn có thể truy ra được event nào được kết nối với từng DOm element. Extension này rất tuyệt với các lập trình viên client-side làm việc trên các project lớn, với hệ thống view phức tạp.

Tham khảo các khóa học lập trình online, onlab, và thực tập lập trình tại TechMaster

5. Web Developer Checklist

https://cdn-images-1.medium.com/max/1600/1*R-YvL9nB4wt-dkUP6K22wg.png

Web Developer Checklist phân tích các trang web để xem liệu chúng có vi phạm các best practice hay không. Extension này phù hợp với những lập trình viên kĩ tính, những người luôn muốn áp dụng các best practice vào sản phẩm của mình, cho phép họ khám phá các vấn đề 1 cách dễ dàng.

6. CSS Viewer

https://cdn-images-1.medium.com/max/1600/1*rd3QZIUsGd1QSr4WISAkng.png

CSS Viewer là 1 extension giúp hiển thị các thuộc tính CSS, được tạo ra bởi Nicolas Huon.

7. ColorZilla

https://cdn-images-1.medium.com/max/1600/1*ww4GaZfkl_9Ul0VKiepB2A.png

ColorZilla, 1 trong những extension FireFox thông dụng nhất cho các lập trình viên với hơn 5 triệu lượt download cuối cùng đã cập bến Chrome! Với ColorZilla, bạn có thể trích màu từ bất cứ vị trí nào trên trình duyệt, tùy chỉnh màu nhanh chóng để sử dụng trong ứng dụng.

8. JSON Formater

https://cdn-images-1.medium.com/max/1600/1*CKIk_ctqXBcq-oYGOr1tvA.png

JSON Formater là 1 extension giúp cho việc hiển thị định dạng JSON và JSONP dễ nhìn khi bạn xem trên tab trình duyệt.

9. XV - XML Viewer

https://cdn-images-1.medium.com/max/1600/1*gWEI8ioQBpLT-bjkcpcAaA.png

XV - XML Viewer là 1 viewer đầy mạnh mẽ cho Chrome. Nó giúp bạn xem chính xác các XML response trả về từ bất kì Web service nào. Một công cụ tuyệt vời!

10. WAVE Evaluation Tool

https://cdn-images-1.medium.com/max/1600/1*o_mqA1NlR_i92hpDYJJkjg.png

WAVE là 1 công cụ đánh giá khả năng truy cập web. Nó cung cấp các phản hồi trực quan về tính truy cập vào nội dung trang web bằng cách chèn các icon và các chỉ thị vào trong web. Không có 1 công cụ tự động nào giúp kiểm tra xem liệu 1 trang web có dễ truy cập hay không, nhưng WAVE sẽ giúp cho lập trình viên đánh giá về các vấn đề về truy cập trang web.

11. Allow-Control-Allow-Origin *

https://cdn-images-1.medium.com/max/1600/1*Fx8ToBpfzRdkSsuU5yBR9w.png

Extension này cho phép bạn request đến bất cứ trang web nào bằng ajax từ bất kì source nào. Hãy thêm vào header response 'Allow-Control-Allow-Origin: *'. Extension này phải có nếu bạn đang phát triển các API.

12. Hola - Unlimited Free VPN

https://cdn-images-1.medium.com/max/800/1*YmK4h7URF3EnZn3OXsS7xQ.png

Truy cập vào các website bị block ở quốc gia của bạn, công ty hay trường học với Hola Free VPN.

13. Lighthouse

https://cdn-images-1.medium.com/max/800/1*Fa4XymchHbpOLkFEEfgaoQ.png

Lighthouse là 1 công cụ opensource tự động, giúp cải thiện hiệu năng, chất lượng cũng như sự chính xác của ứng dụng web.

Khi kiểm tra 1 trang web, Lighthouse sẽ chạy 1 lớp bảo vệ để test trang, sau đó xuất ra report dựa trên mức độ tốt của trang web. Sau đó bạn có thể sử dụng các test fail như các chỉ thị để biết được cần phải làm gì để cải tiến ứng dụng.

14. Session Manager

https://cdn-images-1.medium.com/max/800/1*VkrpeybqsFEbTInQDJgfzA.png

Với Session Manager, bạn có thể nhanh chóng lưu trang thái hiện tại của trình duyệt và tải lại nó bất cứ khi nào cần.

Bạn có thể quản lý nhiều session, đổi tên hay xóa chúng khỏi thư viện session.

Mỗi session sẽ ghi nhớ trang thái của trình duyệt lúc khởi tạo, ví dụ lúc mở tab và window.

15. Clear Cache

https://cdn-images-1.medium.com/max/800/1*Za6qqf9we6YE_4ROyM5OJQ.png

Với extension này bạn có thể nhanh chóng xóa cache mà không cần đến các hộp thoại xác nhận, pop-up hay bất cứ hình thức làm phiền nào khác

Bài viết được dịch từ: https://codeburst.io/15-chrome-extensions-for-developers-1c35444a4d61

Bình luận

avatar
John Kent 2023-01-13 08:26:59.362102 +0000 UTC

Ivacy VPN for Chrome Browser is also good. If you're looking for free options. It doesn't required any signup/account creation. Just download in your browser and use for free.

Avatar
* Vui lòng trước khi bình luận.
Ảnh đại diện
  0 Thích
0