Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
24 Chrome Extension Tốt Nhất Dành Cho Lập Trình Viên

24 Chrome Extension Tốt Nhất Dành Cho Lập Trình Viên


Ngày 4 Tháng 6 Năm 2020

Trong bài viết hôm nay chúng ta hãy cùng nhau tìm hiểu các tiện ích mở rộng được những bạn lập trình và thiết kế hay sử dụng trong quá trình phát triển website nha.

Google Chrome là một trình duyệt web được sản xuất năm 2008, là một trong những sản phẩm nổi tiếng và thành công của Google. Nó là một trình duyệt web đa nền tảng với khả năng bảo mật cao cũng như mang đến trải nghiệm tuyệt vời khi duyệt web. Ngoài ra mình thấy nó còn có một số thuộc tính khá tiện lợi như là gợi ích các url trên thanh địa chỉ, tối ưu hóa việc sử dụng bộ nhớ, giảm thời gian phản hồi trang, có thể sử dụng trên nhiều thiết bị khác nhau...

Google Chrome

Không chỉ vậy nó còn cung cấp các tiện ích mở rộng giúp những lập trình viên có thể cải thiện năng suất làm việc cũng như tiết kiệm thời gian và công sức. Bây giờ bạn hãy cùng mình xem các Chrome extension được sử dụng phổ biến nhé.

Tiện ích WhatRuns

Tiện ích WhatRuns giúp chúng ta xác định những công nghệ web đang được sử dụng trên website như framework, công cụ phân tích, plugin của Wordpress, Font... Bạn chỉ cần truy cập vào trang mình muốn và click vào biểu tượng whatruns thì các thông tin sẽ hiện ra đầy đủ chưa tới 1 phút. Ngoài ra bạn cũng có thể đăng ký để nhận thông báo khi trang web bạn muốn theo dõi thêm các công nghệ mới vào cho trang web.

Tiện ích Chrome whatrun

Tiện ích WhatFont

WhatFont giúp chúng ta xác định dễ dàng xác định thành phần của một trang web đang sử dụng font nào. Bạn chỉ cần cài đặt và di chuyển chuột lên đối tượng mà chúng ta muốn xem là có thể thấy tên font chữ của nó rồi. Thật đơn giản phải không nào.

Tiện ích Chrome WhatFont

Tiện ích Colorzilla

Colorzilla giúp chúng ta có thể đọc giá trị màu của bất kỳ đối tượng nào trên trang web. Ngoài ra nó còn hỗ trợ một số tính năng hữu ích khác như là tự động sao chép màu vào clipboard, hiển thị lịch sử các màu được chúng ta chọn gần đây, bộ chọn màu nâng cao...

Tiện ích Chrome Colorzilla

Tiện ích Window Resizer

Window Resizer là một công cụ quan trọng giúp chúng ta có thể xây dựng hay kiểm tra tính responsive của trang web trên trình duyệt một cách nhanh chóng như màn hình điện thoại, máy tính bảng, laptop, Desktop... Ngoài ra bạn cũng có thể tự động điều chỉnh kích thước hiển thị mà mình mong muốn bằng cách thiết lập độ rộng và độ cao cho cửa sổ trình duyệt.

Tiện ích Chrome Window Resizer

Tiện ích Web Developer

Web Developer là một trong những số ít được hơn 1 triệu người dùng cài đặt. Nó giúp các lập trình viên web trong việc phát triển và kiểm tra lỗi trang web một cách nhanh chóng. Tiện ích này là nơi tập hợp nhiều công cụ khác nhau như Disable, Cookies, CSS, Forms, Image... Bạn có thể dễ dàng tìm những hình ảnh bị lỗi, không cho phép trang web chạy javascript, kiểm tra CSS có đạt tiêu chuẩn hay không, ẩn tất cả hình ảnh, hiển thị thông tin của các đường dẫn trong trang web hiện tại...

Tiện ích Chrome Web Developer

Tiện ích JavaScript and CSS Code Beautifier

JavaScript and CSS Code Beautifier giúp làm đẹp lại mã CSS và Javascript giúp chúng ta dễ nhìn hơn. Thông thường khi người ta tải một website lên hosting, để tối ưu tốt nhất có thể thì người ta thường nén các file CSS và Javascript bằng cách xóa bỏ những khoảng trắng không cần thiết như hình ảnh sau đây:

Tiện ích Chrome JavaScript and CSS Code Beautifier

Như bạn thấy thì chúng ta không thể tài nào xem code một cách dễ dàng được vì nó là các chữ liên tục liền kề nhau do đó tiện ích này giúp chúng ta sắp xếp code lại một cách khoa học và dễ nhìn hơn. Bạn xem hình ảnh bên dưới sau khi ta sử dụng JavaScript and CSS Code Beautifier nhé:

Tiện ích Chrome JavaScript and CSS Code Beautifier

Tiện ích Postman

Postman là một ứng dụng giúp chúng ta tạo các yêu cầu HTTP đến máy chủ. Nó thật sự hữu ích khi bạn chạy hay kiểm tra API cho chương trình của mình và nó cũng cho phép bạn thực hiện các yêu cầu GET, POST, DELETE, PUT một cách dễ dàng. Ngoài ra nó còn có diễn đàn với số lượng lập trình viên đông đảo giúp chúng ta giải quyết các thắc khi mới bắt đầu sử dụng postman.

Tiện ích Chrome Postman

Tiện ích Lorem Ipsum Generator

Lorem Ipsum Generator giúp chúng ta nhanh chóng tạo một văn bản bằng việc xác định thiết lập số đoạn văn và số dòng mà chúng ta mong muốn. Khi bạn xây dựng các component trong trang web thì việc dùng nội dung để kiểm tra hay xem cách nó hiển thị trên trang web là chuyện thường xuyên xảy ra. Do đó tiện ích này giúp chúng ta có thể tạo ra những nội dung giả chỉ bằng một cú click chuột.

Tiện ích Chrome Lorem Ipsum Generator

Tiện ích CSSViewer

CSSViewer giúp chúng ta xem thuộc tính CSS của một đối tượng trong trang web một cách tổng quát nhất như màu sắc, font chữ, kích thước, vị trí... Bạn chỉ cần chọn tiện ích này và đưa chuột lên đối tượng mà chúng ta muốn thì thông tin CSS sẽ tự động hiện ra.

Tiện ích Chrome CSSViewer

Tiện ích Page Ruler Redux

Page Ruler Redux giúp chúng ta lấy kích thước của một đơn vị trên trang web được tính bằng pixel. Nó phù hợp với những bạn thiết kế web khi cần phải lấy chính xác kích thước của một thành phần nào đó trên trang web.

Tiện ích Chrome Page Ruler Redux

Tiện ích TinEye Reverse Image Search

TinEye Reverse Image Search sử dụng công nghệ nhận dạng hình ảnh giúp bạn tìm kiếm hình ảnh trong trang web với các kết quả là nhiều đường dẫn khác nhau chứa hình ảnh đó đã được thay đổi kích thước, chỉnh sửa hay có độ phân giải khác... Cách thức thực hiện cũng khá đơn giản bạn nhấp chuột phải vào hình mà bạn muốn tìm kiếm và chọn Search Image on TinEye và chờ một tý là chúng ta sẽ có kết quả. Và dưới đây là kết quả khi mình tìm kiếm hình ảnh của Google:

Tiện ích Chrome TinEye Reverse Image Search

The Great Suspender

Như bạn đã biết khi sử dụng Google Chrome thì vấn đề sử dụng Ram luôn là một yếu tố quan trọng để cải thiện tốc độ của máy tính. Tiện ích The Great Suspender giúp chúng ta tạm dừng các tab không được sử dụng giúp cho trình duyệt có thể chạy mượt mà hơn. Bạn cũng có thể thực hiện tạm dừng cho các tab trong khoảng thời gian nhất định khi không được sử dụng như 20s, 1 phút, 5 phút... nó cũng cung cấp thêm cho chúng ta vài công cụ hữu ích như tự động đóng các tab đang phát âm thanh, xác định danh sách url mà bạn không muốn tạm ngưng...

Tiện ích Chrome The Great Suspender

Marmoset giúp chúng ta lưu đoạn code trong chương trình dưới dạng hình ảnh. Ví dụ nó sẽ rất tiện lợi khi bạn cần đưa một đoạn code của hàm trong chương trình lên các trang mạng xã hội để chia sẻ. Nó cũng cung cấp thêm mộ số tính năng như điều chỉnh màu sắc, ngôn ngữ, chủ đề... để giúp bạn làm hình ảnh đoạn code của mình trông bắt mắt hơn.

Tiện ích Chrome The Great Suspender

Tiện ích User-Agent Switcher

User-Agent Switcher giúp chúng ta có thể kiểm tra trang web của mình trên nhiều thiết bị cũng như những trình duyệt khác nhau mà không cần phải cài đặt thêm bất cứ chương trình bổ sung nào ví dụ như xem trang web của bạn khi hiển thị trên trình duyệt Opera, Safary, Firefox, Internet Explore...

Tiện ích Chrome User-Agent Switcher

Clear Cache

Clear Cache có nhiệm vụ xóa bỏ cache và dữ liệu duyệt web chỉ bằng một cách nhấn chuột. Ngoài ra chúng ta có thể tùy chọn dữ liệu muốn xóa như là bộ nhớ đệm ứng dụng, cookie, lịch sử, cơ sở dữ liệu...

Tiện ích Clear Cache

React Developer Tools

React Developer Tools là công cụ gỡ lỗi React được thêm vào công cụ phát triển của Chrome. Nó cho phép bạn kiểm tra các component React một cách dễ dàng và nhanh chóng trong quá trình phát triển website.

React Developer Tools

Check My Links

Check My Links giúp chúng ta có thể kiểm tra các đường dẫn bị hỏng(broken link) trong trang web chỉ bằng một cái nhấp chuột.

Check My Links

Checkbot

Checkbot giúp kiểm tra về tốc độ, bảo mật và SEO cho website với nhiều yếu tố đa dạng như là sitemap, 404 page, nội dung trùng lặp, file css javascript, https, url redirects...

Checkbot

Site Palette

Site Palette giúp bạn có thể tự động xuất ra nhiều bảng màu của trang web đang sử dụng ở ngay trên trình duyệt một cách nhanh chóng và dễ dàng.

Site Palette

Web Developer Checklist

Web Developer Checklist giúp bạn kiểm tra tất cả các yếu tố cần thiết mà một trang web nên có.

Web Developer Checklist

EditThisCookie

EditThisCookie là chương trình quản lý cookie với nhiệm vụ là giúp bạn có thể thêm, xóa, chỉnh, sử, tìm kiếm, bảo vệ và chặn cookies trên các website.

EditThisCookie

Sau đây mình sẽ giới thiệu một số tiện ích giúp bạn có thể cảm thấy thư giãn và có thêm năng lượng để bắt đầu một ngày mới làm việc hiệu quả.

Tiện ích Chrome Momentum Tiện ích Chrome Tab Flickr Tiện ích Chrome Earth View from Google Earth

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những tiện ích mở rộng của Google Chrome mà chúng ta có thể sử dụng trong việc phát triển web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!