Blisk – Trình duyệt kiểm tra Responsive chính xác nhất

Trong việc thiết kế website theo chuẩn Responsive thì việc kiểm tra giao diện trên các thiết bị khác nhau luôn là việc cần thiết để đảm bảo giao diện website của chúng ta có thể hiển thị tốt ở mọi thiết bị.

Dĩ nhiên là ít ai dùng từng thiết bị thật để kiểm tra giao diện của website vì không phải ai cũng có đủ các thiết bị, mà sẽ dùng các công cụ hỗ trợ trên trình duyệt như Viewport Resizer, ResponSinator.com, hay thậm chí là kiểm tra thủ công bằng cách tự co giãn trình duyệt.

Tuy nhiên với các công cụ hỗ trợ mình kể ở trên đều không thể so sánh với chất lượng thật của website khi hiển thị trên các thiết bị thực tế. Mà cài các trình giả lập điện thoại thì lại nặng mà tốn thời gian.

Trong ngày hôm qua mình vô tình được biết tới một trình duyệt mới keng xà beng phục vụ riêng cho mục đích kiểm tra và debug website trên các thiết bị điện thoại, đó là trình duyệt Blisk.

blisk-browser

Trình duyệt Blisk là như thế nào?

Đây là một trình duyệt (phát triển từ mã nguồn Chromium) được thiết kế dành riêng cho các Web Designer với mục đích là debug giao diện ở nhiều thiết bị khác nhau như điện thoại thông minh, máy tính bảng và desktop.

Nhưng nó không giống với các kỹ thuật kiểm tra thông thường là thu nhỏ màn hình, mà nó sẽ giả lập hoàn chỉnh việc hiển thị trên điện thoại, bạn có thể tương tác trực tiếp lên giao diện ở điện thoại và quan trọng nhất là sử dụng Inspect Element riêng biệt để debug, hỗ trợ live reload.

Debug với Inspect Element

blisk-inspect-element

Một điểm khác biệt giữa Blisk và các ứng dụng kiểm tra khác đó là cho phép chúng ta debug riêng giao diện giả lập bằng Inspect Element tách biệt. Có nghĩa là khi bấm chuột phải chọn Inspect Element ở điện thoại thì bạn sẽ debug riêng trên giao diện điện thoại, và tương tự như thế ở giao diện desktop.

Auto Refresh (a.k.a Live Reload)

blisk-autorefresh

Nói về live reload thì chúng ta có rất nhiều lựa chọn như dùng Live Reload, Grunt, Gulp để làm nhưng nếu trình duyệt có sẵn tại sao không tận dụng mà tiết kiệm thời gian?

Bạn có thể chọn thư mục để nó watch và sau đó mỗi sự thay đổi code trong bất kỳ tập tin nào trong thư mục đó thì Blisk sẽ tự động load lại trang.

Scroll Sync

Tính năng này sẽ tự động bật trong Blisk, nghĩa là cho phép chúng ta trượt website cùng lúc ở cả hai thiết bị. Chẳng hạn như bạn rê chuột vào điện thoại và cuộn trang thì cả hai thiết bị sẽ đều được cuộn theo. Bạn có thể tắt tính năng này đi nếu thấy bất tiện.

Các tính năng sắp ra mắt

Screenshots

Tính năng này sẽ cho phép người dùng chụp ảnh website của mình ngay trên trình duyệt.

Analytics

Một tính năng đáng được mong đợi ở Blisk, tính năng này giúp chúng ta thống kê lại lỗi Javascript trên website, theo dõi tốc độ website để tối ưu, kiểm tra tính tương thích ở mọi trình duyệt khác và theo dõi các tài nguyên không thể load được (CSS, hình ảnh, font,…).

Integrations

Ngoài việc theo dõi web thì Blisk cũng mong muốn hỗ trợ phần nào đó để cải thiện tốc độ làm việc cho từng dự án, vì thế nên Integrations là tính năng đáp ứng được mong muốn đó. Tính năng này cho phép người dùng theo dõi bugs và quản lý tiến độ của từng dự án như một hệ thống quản lý dự án (Project Management).

Vậy Blisk còn có ích cho những việc nào nữa?

Như mình đề cập ở đầu bài, đây là trình duyệt dành riêng cho web designer hoặc front-end designer nên tính năng của nó cũng chỉ quanh quẩn như vậy thôi và mình nghĩ như thế đã là quá đủ cho nhu cầu của hai đối tượng này. Còn trong tương lai Blisk có cải tiến thêm gì nữa thì chúng ta phải theo dõi mới biết được.

Thạch Phạm

Đam mê với web và lập trình, thích viết và chia sẻ, nghiện cà phê và xăm mình, hứng thú với nhạc dân ca và nhạc không lời.

Xem thêm bài viết Subscribe

Để lại bình luận

20 Bình luận trên "Blisk – Trình duyệt kiểm tra Responsive chính xác nhất"

avatar
Sắp xếp theo:   mới nhất | cũ nhất | đánh giá nhiều
Khoản
Khách

Mình cũng dùng thử rồi nhưng lại có cảm giác trình duyệt không mượt gì cả…

Chinh APLITE
Khách

Tính năng Screenshots sẽ cho phép người dùng chụp ảnh website của mình ngay trên trình duyệt cái này hay nè, gửi cho khách hàng họ dễ dàng hơn.

Hưng
Khách

Mình làm gallery ảnh trên giao diện chính của website, thì khi vào máy có màn hình nhỏ hơn thì 6 hình bị dồn lại…cho mình hỏi giờ làm kiểu nào đây :((

Vien
Khách

có cách khác vừa học vừa kiểm tra luôn responsive của website trên w3sc. Các bạn vào link này
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target

Vien
Khách

chỗ hightlight màu vàng là tên website mà mình sẽ check responsive. Bạn điền vào rồi kéo khung website to nhỏ. Bên góc phải trên có result size là kích cỡ màn hình.

Triều
Khách

Cái này trả phí mới xem được không thì phải đợi 12h sau mới xem được 1 lần phải ko a

Phương
Khách

Cảm ơn a nhé
benhtrivn.com

Phong
Khách

Trên Chrome các bạn nhấn Ctrl + Shift + i vẫn kiểm tra dc mà

Duy
Khách

liệu bên Chrome có cho xem responsive của smartphone và browser cùng lúc ko :v

Trịnh Xuân Thọ
Khách

Đúng cái mình đang tìm. Cảm ơn bạn <3

nhựa đường
Khách

Rất hữu ích. Nhưng nếu như bạn hướng dẫn chi tiết cách setup nữa thì tốt biết mấy

Hoang
Khách

Cảm ơn ad nhiều nhưng sao không đề cập đến cách cài đặt hay sử dụng Blisk như thế nào vậy add

Huynh Tin
Khách

mình test trên iphone vẫn chưa chính xác so với safari trên IOS bác ạ

Trần Công
Khách

Dùng chrome bạn ơi
Vì blisk dùng chromium nên phải test bằng trình duyệt chromium

wpDiscuz
menu
menu