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

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

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

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

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

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

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)

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

Tham khảo thêm các vị trí tuyển dụng ngành cntt hấp dẫn tại Topdev

Ứ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