10 Tiện Ích Mở Rộng ( Extensions ) Chrome Cho Dev Web Và Designer

Nếu bạn là một Dev Web thì chắc hẳn các bạn đã từng dùng qua DevTools của Google ít nhất nghe qua một lần. DevTools của Google là một công cụ rất tuyệt vời nhưng nó sẽ còn tuyệt vời hơn nữa khi bạn tận dụng được hết những công cụ mở rộng (Extensions) và nó sẽ giúp cho việc phát triển và design trở nên của bạn dễ dàng hơn bao giờ hết.

1. WhatFont

Chắc hẳn sẽ có những khi bạn lướt web và bạn tình cờ nhìn thấy một font chữ đẹp nhưng bạn lại không biết tên của nó. Với tiện ích WhatFont sẽ giúp bạn biết chính xác font chữ đang sử dụng và cả font-size, font-weight và text-color. 
Bạn chỉ cần di chuột vào text và nhấn, sau đó copy lại thôi. Easily!


 

2. ColorZilla

Đang lướt web bỗng dưng thấy một mùa sắc nào đó mà bạn thích thú?
Bạn tò mò muốn biết mã màu của màu sắc đó là gì?
Vậy thì với tiện Ích ColorZilla sẽ giúp bạn chỉ trong vài click. ColorZilla là tiện ích chuyên dùng để lấy mã màu vô cùng tiện lợi và nhanh chóng. Bạn có thể lấy được mã màu này và dán nó vào một chương trình khác, chẳng hạn như Photoshop hoặc CSS. 
Cách dùng cũng tương tự WhatFont bạn di chuột đến màu cần lấy mã và Click.


 

3. Window Resizer

Tiện ích mở rộng này là cực kỳ hữu ích đối với các bạn Lập trình Web. Đúng như tên gọi của mình, nó có thể thay đổi kích cỡ của các cửa sổ trình duyệt, giúp ta có hình dung thiết kế web của mình.
Bạn có thể chọn các kích cỡ phổ biến trong danh sách, hoặc thiết lập thông số kích cỡ, độ phân giải như mong muốn để tăng độ chính xác.


 

 

4. Checkbot: SEO, Web Speed & Security Tester

Bạn muốn đảm bảo rằng tất cả các link trên trang web của bạn thực sự hoạt động và có khả năng sử dụng ngay lập tức cũng như bạn muốn cải thiện SEO của bạn thì chúng ta không thể bỏ qua Tiện ích Checkbot.
Checkbot là một tiện ích của Chrome để kiểm tra các link bị hỏng, tiêu đề trùng lặp, HTML / JS / CSS không hợp lệ và hơn thế nữa. Vì vậy bạn có thể nhanh chóng kiểm tra trang web của mình để tìm các liên kết hỏng và sửa chúng.


 

5. React Developer Tools

React Developer Tools cho phép bạn kiểm tra các cấu trúc thành phần React trong DevTools của Chrome. Bằng công cụ này ta có thể biết được trang web nào đang dùng React, nó sẽ sáng lên nếu trang web có dùng React. 
Có những lúc chúng ta code ẩu, tất cả để chung một dòng, rất khó đọc. Hoặc ta sử dụng thư viện với code đã minify, rất khó đọc hay debug. Thì khi đó rất đơn giản, chỉ cần nhấp vào icon {} để “tút lại nhan sắc” cho code


 

6. PHP Ninja Manual

Nếu bạn không muốn mất nhiều thời gian để nhớ được tất cả các chức năng của PHP thì PHP Ninja Manual là sự lựa chọn cho bạn. 
PHP Ninja Manual cung cấp cho bạn tất cả tài liệu về PHP 5.5 với những ví dụ bằng tám loại ngôn ngữ và bạn có thể tra cứu các chức năng của PHP trực tiếp mà không cần phải rời khỏi trình duyệt.


 

7. Check My Links

Bạn đã build xong chưa?
Việc kiểm tra tất cả các link có hoạt động tốt không tốt quá nhiều thời gian và vô cùng nhàm chán?. 
Với Check My Links sẽ giúp bạn làm công việc nhàm chán này nhé. Tiện ích này sẽ giúp bạn đánh dấu những trang còn tốt và đánh dấu màu đỏ cho những trang hỏng một cách vô cùng trực quan, tự động và nhanh chóng.


 

8. WhatRuns

Khám phá những gì chạy bên dưới một trang web như là các Frameworks, Analytics Tools, WordPress Plugins, Fonts với tiện ích WhatRuns. Chỉ cần một cú nhấp chuột bạn có thể tìm thấy các công nghệ được sử dụng trên bất kỳ trang web nào bạn truy cập. Từ DevTools dành cho nhà phát triển và Ad Networks đến Plugin và WordPress, WhatRuns còn có thể phát hiện ngay cả các công cụ và dịch vụ mới và sắp ra mắt.


 

9. Wappalyzer

Bạn đang thắc mắc facebook.com đang dùng công nghệ, framework gì? Bạn muốn sử dụng framework giống facebook.com cho trang web của mình. Tương tự WhatRuns, Wappalyzer 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.


 

10. Lighthouse

 
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.

 

Bài viết tham khảo

Write a Comment

Your email address will not be published. Required fields are marked *