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

41 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é.

WhatRuns

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.

 Chrome whatrun

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.

 Chrome WhatFont

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...

 Chrome Colorzilla

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.

 Chrome Window Resizer

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...

 Chrome Web Developer

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:

 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é:

 Chrome JavaScript and CSS Code Beautifier

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.

 Chrome Postman

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.

 Chrome Lorem Ipsum Generator

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.

 Chrome CSSViewer

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.

 Chrome Page Ruler Redux

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:

 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...

 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ột 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.

 Chrome The Great Suspender

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, Safari, Firefox, Internet Explorer...

 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...

 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

HTML Validator

Giúp bạn kiểm tra các đoạn mã HTML trong website để tìm ra lỗi và hướng giải pháp.

 HTML Validator

JSON Viewer

Nhiệm vụ của nó là giúp bạn có thể thiết kế, tùy chỉnh và quản lý JSON một cách nhanh chóng và dễ dàng.

JSON Viewer

Lightshot

Nó giúp bạn có thể nhanh chóng chụp màn hình hay các thành phần, toàn bộ website.

Lightshot

daily.dev

Giúp bạn nắm bắt thông tin các tin tức quan trọng trong thiết kế, phát triển website với tính năng cập nhật hằng ngày.

daily.dev

Image Downloader

Giúp bạn tải hình ảnh trên website một cách nhanh chóng.

Image Downloader

PerfectPixel

Giúp bạn có thể xây dựng các thành phần trong website với pixel hoàn hảo.

PerfectPixel

Hoverify

Giúp chúng ta cải thiện trải nghiệm người dùng như kiểm tra HTML, CSS, chỉnh sửa trực tiếp các phần tử, di chuyển các element trong DOM...

Hoverify

Evernote Web Clipper

Evernote Web Clipper là một phần mở rộng trình duyệt cho phép bạn lưu trực tiếp những nội dung thú vị mà bạn bắt gặp trên mạng vào tài khoản Evernote.

Evernote Web Clipper

Wappalyzer

Wappalyzer cho phép chúng ta biết website đang sử dụng CMS, ecommerce platform, JavaScript libraries và framework nào.

Wappalyzer

Grammarly for Chrome

Giúp bạn kiểm tra ngữ pháp cho nội dung trong website.

Grammarly for Chrome

Vue.js devtools

Giúp bạn kiểm tra các đoạn mã Vue Js trong website.

Vue.js devtools

Redux DevTools

Giúp bạn debug application khi state thay đổi.

Redux DevTools

Lưu vào Google Drive

Giúp bạn có thể tự động lưu trang web hay hình ảnh trực tiếp vào Google Drive.

Lưu vào Google Drive

HTTPS Everywhere

Giúp chuyển đổi tự động các trang HTTP sang HTTPS.

HTTPS Everywhere

Fonts Ninja

Hiển thị tất cả các font chữ trên website, cung cấp thông tin đầy đủ về font...

Fonts Ninja

Similarweb

Cung cấp nhiều tính năng giúp bạn kiểm tra website như rank web, nguồn traffic, các quốc gia chủ yếu truy cập trang web, check SEO...

Similarweb

Lighthouse

Nó là tiện ích hoàn toàn miễn phí giúp bạn có thể kiểm tra tốc độ website, cung cấp các giải pháp để cải thiện website...

Lighthouse

Những Tiện Ích Giúp Bạn Thư Giãn

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ả.

 Chrome Momentum  Chrome Tab Flickr  Chrome Earth View from Google Earth

Bài viết liên quan:

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ẻ!