Một số mẹo vặt dành cho Developer trên Chrome

704

Ứng dụng chrome mà mình sử dụng trong bài viết này là Chrome Canary – được khuyên dùng bởi google dành cho các lập trình viên. Mình có chọn lọc một số nội dung và lược dịch từ bài viết gốc tại đây

1. Animation

Nếu như trang web của bạn có animation, bạn có thể giảm tốc độ hiển thị animation xuống còn 10% hay 25% để kiểm tra các bug lỗi dễ dàng hơn

Có thể giảm tốc độ animation xuống còn 25% hay 10%Có thể giảm tốc độ animation xuống còn 25% hay 10%

2. Pretty screenshotting

Khi truy cập một trang web dưới chế độ mobile mode thì chrome hỗ trợ một tính năng chụp ảnh màn hình, đồng thời ảnh được chụp sẽ được tải ngay về máy tính. Trong phiên bản mới nhất của chrome, bạn còn có thể chụp full màn hình cho dù nội dung có dài đến đâu đi chăng nữa

Các tính năng hay trên chrome dành cho developer

Chọn chế độ capture screenshot để chụp hình

Nếu bạn bật thêm chế độ show device frame thì hình ảnh tải về có cả hình điện thoại đi kèm như dưới đây

Các tính năng trên chrome dành cho developer

Hình ảnh tải về có cả khung điện thoại

3. Chỉnh sửa text trực tiếp trên web

Giả sử trong quá trình phát triển bạn muốn thay đổi một vài đoạn text cho mục đích testing, có thể bạn sẽ nghĩ ngay tới Inspect HTML rồi sửa giá trị HTML là xong. Cách đấy cũng được, tuy nhiên còn một cách thú vị hơn nhiều đó là bạn chuyển trang web sang chế độ designMode bằng cách mở console gõ lệnh document.designMode=’on’ là xong

các tính năng hay của chome dành cho developerchuyển website sang chế độ designMode

4. Chỉnh sửa với màu sắc

Trong chrome, mỗi khi chúng ta muốn thiết lập màu sắc cho background hay font chữ thì có thể chọn màu sắc thông qua popup đơn giản này. Hơn nữa chrome cũng hỗ trợ 2 mẫu mầu mắc đó là material design và các màu có sẵn trên trang web hiện tại

Lựa chọn màu sắc trên chromeLựa chọn màu sắc trên chrome

5. Kiểm tra font family

Đôi khi thật khó để biết được trang web đang sử dụng mẫu font nào. Chúng ta có một cách đơn giản hơn là vào tab computed, để ý vào phần filters (nhớ tích chọn show all)

Kiểm tra font family trên website

Kiểm tra font family trên website

Bây giờ kéo xuống dưới một chút, bạn có thể nhìn thấy mục font family có chứa những tên font mà đôi khi bạn không thể inspect nổi

6.  Code snippet

Bạn có thể lưu lại các đoạn script hay dùng để test vào mục snippet của chrome

Có thể tạo và lưu các snippet mẫu trong chrome

Có thể tạo và lưu các snippet mẫu trong chrome

Nguồn: apollo13.vn