NộI Dung
- Truy cập các công cụ dành cho nhà phát triển trong trình duyệt web của Apple
- Cách bật Chế độ thiết kế đáp ứng trong Safari
- Công cụ phát triển Safari
Truy cập các công cụ dành cho nhà phát triển trong trình duyệt web của Apple
Đảm bảo rằng các trang web và ứng dụng web hỗ trợ một loạt các thiết bị và nền tảng là một nhiệm vụ thiết yếu cho các nhà phát triển web. Trình duyệt web Safari của Apple bao gồm chế độ Responsive Design cho phép bạn xem trước cách trang web của bạn sẽ hiển thị ở các độ phân giải màn hình khác nhau và trên các bản dựng iPad, iPhone và iPod touch khác nhau.
Hướng dẫn trong bài viết này áp dụng cho Safari 13 cho macOS. Chế độ Responsive Design không có sẵn trong phiên bản Windows.
Cách bật Chế độ thiết kế đáp ứng trong Safari
Để bật công cụ dành cho nhà phát triển của Safari và chế độ Thiết kế đáp ứng:
-
Lựa chọn Safari > Sở thích trong thanh công cụ Safari.
Bạn cũng có thể sử dụng phím tắt Chỉ huy+Dấu phẩy (,) để truy cập menu Preferences.
-
Trong menu Tùy chọn, chọn Nâng cao tab và đánh dấu vào ô bên cạnh Hiển thị menu Develop trong thanh menu. Một tùy chọn mới sẽ có sẵn trong thanh công cụ Safari ở đầu màn hình.
-
Lựa chọn Phát triển, xây dựng > Vào chế độ thiết kế đáp ứng trong thanh công cụ Safari.
Bạn cũng có thể sử dụng phím tắt Lựa chọn+Chỉ huy+R để vào Chế độ thiết kế đáp ứng.
-
Bây giờ trang web đang hoạt động sẽ được hiển thị trong chế độ Thiết kế đáp ứng. Ở đầu trang, chọn thiết bị iOS hoặc độ phân giải màn hình để xem trang sẽ hiển thị như thế nào.
Bạn cũng có thể hướng dẫn Safari mô phỏng các tác nhân người dùng khác nhau bằng cách sử dụng menu thả xuống ngay phía trên các biểu tượng độ phân giải.
Công cụ phát triển Safari
Ngoài chế độ Responsive Design, menu Develop của Safari còn cung cấp nhiều tùy chọn hữu ích khác bao gồm:
- Mở trang với: 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.
- Đại lý 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 là một cái gì đó không phải là Safari.
- Kết nối thanh tra web: Hiển thị tất cả các tài nguyên của trang web, bao gồm thông tin CSS và số liệu DOM.
- Hiển thị bảng điều khiển lỗi: Hiển thị các lỗi và cảnh báo về JavaScript, HTML và XML.
- Hiển thị nguồn trang: 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: 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: Chỉnh sửa và thực thi các đoạn mã. Tính năng này rất hữu ích từ góc độ thử nghiệm.
- Hiển thị Trình tạo tiện ích mở rộng: Xây dựng các tiện ích mở rộng Safari của riêng bạn bằng cách đóng gói mã của bạn phù hợp và nối thêm siêu dữ liệu.
- Bắt đầu ghi dòng thời gian: Ghi lại các yêu cầu mạng, thực thi JavaScript, kết xuất trang và các sự kiện khác trong Trình kiểm tra WebKit.
- Bộ nhớ cache trống: Xóa tất cả các bộ nhớ cache được lưu trữ trong Safari, không chỉ các tệp bộ đệm trang web tiêu chuẩn.
- Vô hiệu hóa bộ nhớ cache: Với bộ đệm ẩn bị vô hiệu hóa, tài nguyên được tải xuống từ một trang web mỗi khi yêu cầu truy cập được thực hiện trái ngược với việc sử dụng bộ đệm cục bộ.
- Cho phép JavaScript từ Trường tìm kiếm thông minh: Bị 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.
- Đối xử với các chứng chỉ SHA-1 là không an toàn: Viết tắt của Thuật toán băm an toàn, hàm băm SHA-1 đã được chứng minh là kém an toàn hơn so với suy nghĩ ban đầu, do đó bổ sung tùy chọn này trong Safari.
