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...
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.
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.
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...
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.
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...
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:
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é:
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.
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.
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.
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.
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:
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...
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.
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...
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...
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.
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.
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...
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.
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ó.
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.
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.
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.
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.
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.
Image Downloader
Giúp bạn tải hình ảnh trên website một cách nhanh chóng.
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.
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...
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.
Wappalyzer
Wappalyzer cho phép chúng ta biết website đang sử dụng CMS, ecommerce platform, JavaScript libraries và framework nào.
Grammarly for Chrome
Giúp bạn kiểm tra ngữ pháp cho nội dung trong website.
Vue.js devtools
Giúp bạn kiểm tra các đoạn mã Vue Js trong website.
Redux DevTools
Giúp bạn debug application khi state thay đổi.
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.
HTTPS Everywhere
Giúp chuyển đổi tự động các trang HTTP sang HTTPS.
Fonts Ninja
Hiển thị tất cả các font chữ trên website, cung cấp thông tin đầy đủ về font...
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...
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...
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ả.
Bài viết liên quan:
- Kênh Youtube Giúp Học Code Online 2021
- Code Editors Và IDE Dành cho Lập Trình Viên
- Visual Studio Code Extension Tốt Nhất Cho Phát Triển Web
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ẻ!
