Giống như các trình duyệt như firefox và chrome, Apple cũng trang bị cho trình duyệt của mình một bộ công cụ mạnh mẽ hỗ trợ cho các nhà lập trình khảo sát và chỉnh sửa trang web của mình ngay trên trình duyệt safari, điều đặc biệt là công cụ này của Apple được tối ưu trên cả 3 nền tảng là MacOS (trên máy Mac), iOS (trên iPad, iPhone) và cả tvOS luôn.
Bộ công cụ, gọi là Web Development Tools, bao gồm
- Web Inspector: là công cụ chỉnh sửa, debug, và tối ưu website mạnh mẽ và rất dễ sử dụng.
- Responsive Design Mode: Là chế độ giả lập hiển thị trang web trên các thiết bị khác nhau như máy tính, tablet, smash phone,...
Kích hoạt Web Development Tools
Để sử dụng bộ công cụ này, điều đầu tiên bạn phải kích hoạt menu Develop trong Preferences.. > Advanced .
Kiểm chọn dòng Show Develop menu in menu bar ở cuối hộp thoại
Truy cập Web Development Tools ở đâu?
- Trên thanh menu của safari
Caption - Trên thanh công cụ safari: Bạn phải thêm button lên thanh công cụ safari bằng cách chọn View > Customize Toolbar.. và kéo button Web Inspector lên thanh công cụ
Caption
Web Inspector
Web Inspector là trung tâm điều khiển, cho phép bạn dễ dàng truy cập vào bộ công cụ lập trình được tích hợp trong safari. Bộ công cụ này được sắp xếp thành từng tab riêng biệt và bạn hoàn toàn có thể sắp xếp lại thứ tự của chúng. Trên macOS Sierra, bạn có thể khám phá nhiều phương cách mới để giải quyết lỗi bộ nhớ bằng cách sử dụng timelines và các tweak styles bằng cách sử dụng các widget với hơn 150 thuộc tính CSS thông dụng nhất
- Elements. Hiển thị và khảo sát các thành phần tạo nên DOM của một trang web (các thẻ <div>, <span>, <a>,..). Xuất định dạng HTML mà có thể chỉnh sửa được ở cửa sổ bên trái và các chi tiết về nodes, styles, và layers ở thanh bên phải.
Caption
Để chọn các elements, bạn click bật nút element selection - Network. Hiển thị danh sách chi tiết của tất cả các hệ thống mạng sử dụng tài nguyên của trang web, qua đó bạn có thể đánh giá nhanh trạng thái, mức độ phản hồi, các giới hạn, và hơn thế nữa.
Caption - Resources. Hiển thị tài nguyên của trang web như hình ảnh, font, script, css, ... Bạn có thể xác nhận mọi thứ có được vận hành theo đúng định dạng và cấu trúc mình muốn hay không.
Caption - Timelines. Cung cấp các thông tin về những hoạt động xảy ra với trang web đang mở, như là mạng, layout và tình trạng kết xuất, JavaScript và các sự kiện, và bộ nhớ. Mọi thứ được phát hoạ gọn gàng trên một thanh tiến trình hoặc ghi lại thành từng frame, giúp bạn nhiều cách khám phá để tối ưu cho trang web.
Caption - Debugger. Sử dụng công cụ sửa lỗi để giúp bạn tìm ra nguyên nhân gây ra các lỗi Javascript trên trang web. Bạn có thể thiết lập điểm dừng để tạm dừng các đoạn script để quan sát các kiểu data và giá trị của mỗi biến số như nó đã được định nghĩa.
Caption - Storage. Hiển thị chi tiết nơi lưu trữ dữ liệu trong bộ nhớ điệm của trang web như application cache, cookies, databases, indexed databases, local storage, và session storage.
Caption - Console. Gõ các lệnh JavaScript vào console để sửa lỗi, bổ sung hay lấy thông tin trang web một các tương tác. Bạn cũng có thể thấy các nhật ký, các lỗi, và các cảnh báo từ trang web, từ đó có thể nhận định mức độ quan trọng của vấn đề và định ra hướng giải quyết một cách nhanh chóng.
Caption
Responsive Design Mode
Safari có một giao diện mạnh mẽ giúp nhà thiết kế thử nghiệm nhanh tình trạng trang web hiển thị trên màn hình các thiết bị với kích thước và độ phân giải phổ biến hiện nay như iPhone, iPad, smash phone.
Bạn có thể tuỳ chỉnh bằng cách kéo các cạnh cửa sổ để thay đổi kích thước, click lên cửa sổ để xoay màn hình theo chiều dọc hay ngang,.. thậm chí bạn có thể hiển thị cửa sổ ở chế độ Split View của iPad nữa.
