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é.
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 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 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 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 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 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é:
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 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 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 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 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ộ 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 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...
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.
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ả.
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ẻ!