Kể từ Safari phiên bản 9 trên OS X El Capitan, Apple đã giới thiệu Chế độ Thiết kế Đáp ứng (Responsive Design Mode). Giao diện này giúp các nhà phát triển web thiết kế trải nghiệm web trên nhiều kích thước màn hình, hướng hiển thị và độ phân giải khác nhau. Thiết kế đáp ứng giúp các nhà phát triển đảm bảo trang web và ứng dụng của họ hỗ trợ nhiều thiết bị và nền tảng.
Cách bật Chế độ Thiết kế Đáp ứng trong Safari
Để bật Chế độ Thiết kế Đáp ứng của Safari, cùng với các công cụ phát triển khác của Safari:
Vào menu Safari và chọn Tùy chọn (Preferences).
Nhấn phím tắt Command + , (dấu phẩy) để truy cập Tùy chọn nhanh chóng.
Trong hộp thoại Tùy chọn, chọn thẻ Nâng cao (Advanced).
Ở dưới cùng của hộp thoại, tích vào ô Hiển thị menu Phát triển trong thanh menu (Show Develop menu in menu bar).
Bây giờ bạn sẽ thấy Phát triển (Develop) trong thanh menu Safari ở trên cùng.
Chọn Phát triển > Vào Chế độ Thiết kế Đáp ứng (Enter Responsive Design Mode) trong thanh công cụ Safari.
Nhấn phím tắt Option + Command + R để vào Chế độ Thiết kế Đáp ứng nhanh chóng.
Trang web đang hoạt động hiển thị trong Chế độ Thiết kế Đáp ứng. Ở đầu trang, chọn một thiết bị iOS hoặc độ phân giải màn hình để xem trang sẽ hiển thị như thế nào.
Hoặc xem trang web của bạn hiển thị trên các nền tảng khác nhau bằng menu thả xuống phía trên các biểu tượng độ phân giải.
Các công cụ phát triển Safari
Ngoài Chế độ Thiết kế Đáp ứng, menu Phát triển của Safari còn cung cấp nhiều tùy chọn hữu ích khác:
Mở trang với (Open Page With)
Mở trang web đang hoạt động trong bất kỳ trình duyệt nào hiện được cài đặt trên Mac.
User Agent
Khi thay đổi User Agent, bạn có thể lừa trang web nghĩ rằng bạn đang sử dụng một trình duyệt khác.
Hiển thị Trình kiểm tra Web (Show Web Inspector)
Hiển thị tất cả tài nguyên của trang web, bao gồm thông tin CSS và các chỉ số DOM.
Hiển thị Bảng điều khiển Lỗi (Show Error Console)
Hiển thị các lỗi và cảnh báo JavaScript, HTML, XML.
Hiển thị Nguồn trang (Show Page Source)
Cho phép xem mã nguồn của trang web đang hoạt động và tìm kiếm nội dung trang.
Hiển thị Tài nguyên trang (Show Page Resources)
Hiển thị tài liệu, script, CSS và các tài nguyên khác từ trang hiện tại.
Hiển thị Trình soạn thảo Đoạn mã (Show Snippet Editor)
Cho phép chỉnh sửa và thực thi các đoạn mã. Tính năng này hữu ích cho mục đích kiểm thử.
Hiển thị Trình xây dựng Tiện ích mở rộng (Show Extension Builder)
Giúp bạn xây dựng tiện ích mở rộng Safari bằng cách đóng gói mã và thêm siêu dữ liệu.
Bắt đầu ghi Timeline (Start Timeline Recording)
Cho phép ghi lại các yêu cầu mạng, thực thi JavaScript, hiển thị trang và các sự kiện khác trong WebKit Inspector.
Xóa bộ nhớ đệm (Empty Caches)
Xóa tất cả bộ nhớ đệm được lưu trữ trong Safari, không chỉ các tệp bộ nhớ đệm trang web tiêu chuẩn.
Vô hiệu hóa bộ nhớ đệm (Disable Caches)
Khi tắt bộ nhớ đệm, tài nguyên được tải xuống từ trang web mỗi khi có yêu cầu truy cập thay vì sử dụng bộ nhớ đệm cục bộ.
Cho phép JavaScript từ trường Tìm kiếm thông minh (Allow JavaScript from Smart Search Field)
Tính năng này bị tắt mặc định vì lý do bảo mật, cho phép bạn nhập URL chứa JavaScript vào thanh địa chỉ Safari.