01 trên 06
Kích hoạt và sử dụng chế độ thiết kế đáp ứng trong Safari 9
Là một nhà phát triển web trong thế giới ngày nay có nghĩa là hỗ trợ một loạt các thiết bị và nền tảng, mà đôi khi có thể chứng minh là một nhiệm vụ khó khăn. Ngay cả với mã được thiết kế tốt nhất tuân theo các tiêu chuẩn Web mới nhất, bạn vẫn có thể thấy rằng các phần của trang web của bạn có thể không nhìn hoặc hành động theo cách bạn muốn trên các thiết bị hoặc độ phân giải nhất định. Khi đối mặt với thách thức hỗ trợ một loạt các kịch bản như vậy, việc có các công cụ mô phỏng thích hợp theo ý của bạn có thể là vô giá.
Nếu bạn là một trong nhiều lập trình viên sử dụng máy Mac, bộ công cụ phát triển của Safari luôn có ích. Với việc phát hành Safari 9, tính năng này đã mở rộng đáng kể, chủ yếu là do Responsive Design Mode_ cho phép bạn xem trước trang web của bạn sẽ hiển thị như thế nào ở các độ phân giải màn hình khác nhau cũng như trên các nền tảng iPad, iPhone và iPod touch khác nhau.
Hướng dẫn này chi tiết cách kích hoạt Chế độ thiết kế đáp ứng cũng như cách sử dụng nó cho nhu cầu phát triển của bạn.
Đầu tiên, mở trình duyệt Safari của bạn.
02/06
Tùy chọn Safari
Nhấp vào Safari trong trình đơn trình duyệt, nằm ở đầu màn hình. Khi trình đơn thả xuống xuất hiện, chọn tùy chọn Preferences_ được khoanh tròn trong ví dụ trên.
Xin lưu ý rằng bạn có thể sử dụng phím tắt sau thay cho mục menu đã nói ở trên: COMMAND + COMMA (,)
03/06
Hiển thị menu phát triển
Hộp thoại Tùy chọn của Safari bây giờ sẽ được hiển thị, che phủ cửa sổ trình duyệt của bạn. Đầu tiên, nhấp vào biểu tượng Advanced_ được biểu thị bằng một bánh răng và nằm ở góc trên bên phải của cửa sổ.
Tùy chọn nâng cao của trình duyệt bây giờ sẽ hiển thị. Ở dưới cùng là một tùy chọn kèm theo hộp kiểm, được gắn nhãn Hiển thị menu Phát triển trong thanh menu và được khoanh tròn trong ví dụ ở trên. Nhấp vào hộp kiểm một lần để kích hoạt menu này.
04/06
Nhập Chế độ thiết kế đáp ứng
Một tùy chọn mới sẽ có sẵn trong trình đơn Safari của bạn, nằm ở đầu màn hình, được gắn nhãn Develop . Nhấp vào tùy chọn này. Khi trình đơn thả xuống xuất hiện, chọn Enter Responsive Design Mode _ được khoanh tròn trong ví dụ trên.
Xin lưu ý rằng bạn có thể sử dụng phím tắt sau thay cho mục menu đã nói ở trên: OPTION + COMMAND + R
05/06
Chế độ thiết kế đáp ứng
Trang Web đang hoạt động sẽ được hiển thị trong Chế độ thiết kế đáp ứng, như trong ví dụ trên. Bằng cách chọn một trong các thiết bị iOS được liệt kê như iPhone 6 hoặc một trong các độ phân giải màn hình được chỉ định, chẳng hạn như 800 x 600, bạn có thể xem ngay trang sẽ hiển thị trên thiết bị đó hoặc độ phân giải màn hình đó như thế nào.
Ngoài các thiết bị và độ phân giải được hiển thị, bạn cũng có thể hướng dẫn Safari mô phỏng một tác nhân người dùng khác - chẳng hạn như tác nhân từ trình duyệt khác - bằng cách nhấp vào trình đơn thả xuống được hiển thị ngay phía trên biểu tượng độ phân giải.
06 trên 06
Develop Menu: Các tùy chọn khác
Ngoài Chế độ thiết kế đáp ứng, menu Phát triển Safari 9 cung cấp nhiều tùy chọn hữu ích khác_ một số được liệt kê bên dưới.
- Mở trang bằng: Cho phép bạn mở trang Web đang hoạt động trong bất kỳ trình duyệt nào khác hiện được cài đặt trên máy Mac của bạn.
- Tác nhân người dùng : Thay đổi tác nhân người dùng khiến máy chủ web xác định trình duyệt của bạn dưới dạng Safari 9.
- Trình kiểm tra Web kết nối: Trình kiểm tra trang web của Safari 9 hiển thị tất cả tài nguyên của trang web, cung cấp khả năng kiểm tra thông tin CSS, chỉ số và cấu trúc DOM, cũng như mã nguồn gốc của nó.
- Hiển thị Bảng điều khiển Lỗi: Một trong những tùy chọn được sử dụng rộng rãi nhất trong Menu Phát triển, bảng điều khiển này hiển thị các lỗi và cảnh báo JavaScript, HTML và XML.
- Show Page Source: Cho phép bạn xem và tìm kiếm mã nguồn của trang Web đang hoạt động.
- Hiển thị tài nguyên trang: Chọn tùy chọn này sẽ hiển thị tài liệu, tập lệnh, CSS và các tài nguyên khác từ trang hiện tại.
- Hiển thị Trình chỉnh sửa đoạn trích: Cung cấp khả năng chỉnh sửa và thực thi các đoạn mã, trái ngược với một trang hoàn chỉnh. Tính năng này rất hữu ích từ góc độ kiểm tra.
- Hiển thị Trình tạo tiện ích mở rộng: Cho phép bạn tạo tiện ích Safari của riêng mình bằng cách đóng gói mã của bạn cho phù hợp và thêm siêu dữ liệu.
- Bắt đầu Ghi thời gian: Ghi lại một số mục bao gồm yêu cầu mạng, thực thi JavaScript, hiển thị trang và các sự kiện khác cho một khoảng thời gian do người dùng xác định có thể xem được trong Trình kiểm tra WebKit.
- Empty Caches: Nhấp vào tùy chọn này sẽ xóa tất cả bộ nhớ cache được lưu trữ trong Safari, không chỉ các tệp bộ nhớ cache trang web chuẩn.
- Vô hiệu hóa cache: Với tính năng bộ nhớ đệm bị vô hiệu hóa, tài nguyên được tải xuống từ trang web mỗi lần yêu cầu truy cập được thực hiện trái với việc sử dụng bộ nhớ cache cục bộ.
- Cho phép JavaScript từ Trường tìm kiếm thông minh: Đã tắt theo mặc định vì lý do bảo mật, tính năng này cho phép bạn nhập URL chứa javascript: trong thanh địa chỉ của Safari.
- Xử lý chứng chỉ SHA-1 là không an toàn: Viết tắt cho thuật toán băm bảo mật, hàm băm SHA-1 đã được chứng minh là kém an toàn hơn suy nghĩ ban đầu_ do đó bổ sung tùy chọn này trong Safari 9.
Đọc liên quan
Nếu bạn thấy hướng dẫn này hữu ích, hãy chắc chắn kiểm tra các hướng dẫn Safari 9 khác của chúng tôi.
- Cách quản lý thông báo đẩy trang web
- Làm thế nào để xuất một trang web sang một tập tin PDF
- Cách cấu hình tiện ích mở rộng Safari 9 để tự động cập nhật
- Cách sử dụng tính năng trang web được ghim