Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Safari Web Inspector

Mẹo nhỏ: Sử dụng Web Inspector để gỡ lỗi Safari Mobile

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Xây dựng và gỡ lỗi các trang web và các ứng dụng web cho các thiết bị di động có thể là một rắc rối thật sự. Trên Desktop, chúng ta có các công cụ gỡ lỗi mạnh mẽ; Hầu hết các trình duyệt có một công cụ Inspector. Nhưng chúng ta không có những công cụ đó cho các thiết bị như iPhone và iPad... cho đến lúc này!

Với việc phát hành Safari 6 và iOS 6 gần đây, bây giờ bạn có thể sử dụng web inspector để xây dựng và gỡ lỗi các trang web trên máy tính và trên điện thoại di động trong Safari. Trên hết, nó là một quá trình thiết lập đơn giản. Làm theo hướng dẫn này và bạn sẽ có một số công cụ gỡ lỗi mạnh mẽ cho các thiết bị di động trong tầm tay của bạn một cách nhanh chóng.

Các công cụ phát triển của trình duyệt hiện đại đã trở thành một công cụ trợ giúp to lớn trong việc xây dựng trang web và các ứng dụng web. Chrome có developer tools. Firefox? Firebug. Safari? Web inspector. Tất cả các công cụ cực kỳ mạnh mẽ trong phát triển web.

Screenshot Safari web inspector

Có thể là vậy, nhưng đến thời điểm này gỡ lỗi trang web và các ứng dụng web trên thiết bị di động đã trở nên rắc rối. Vì cả Safari và Chrome đều chạy trên webkit, có rất nhiều điểm tương đồng trong cách trình duyệt desktop và điện thoại di động kết xuất một giao diện web. Vì vậy, hầu hết các nhà thiết kế/nhà phát triển xây dựng và tinh chỉnh trang web của họ trên máy tính bằng cách sử dụng một trong những trình duyệt này, giả định rằng kết quả tương tự từ webkit sẽ kết xuất trang web tương đương trên thiết bị di động.

Tuy nhiên, nền tảng di động và desktop thật sự hơi khác nhau. Chúng có năng lực bộ nhớ, hiệu suất, thiết bị đầu vào và kết nối mạng khác nhau. Vì vậy, bắt buộc các công cụ gỡ lỗi của một nhà thiết kế dành cho các thiết bị di động thực thi tốt hơn và tương xứng với những máy desktop của họ.

Piên bản phần mềm mới của iOS 6Safari 6 của Apple mang đến nhiều tính năng của các công cụ gỡ lỗi trên trình duyệt Desktop mà tất cả chúng ta đều biết và yêu thích vào các thiết bị di động. Bài này sẽ hướng dẫn cho bạn quá trình thiết lập đơn giản để gỡ lỗi cho các trang web di động sử dụng Web Inspector của Safari.

Trước khi chúng ta bắt đầu, một lưu ý về khả năng tương thích: Có một ít tin xấu cho những người dùng Windows. Bạn chỉ có thể gỡ lỗi bằng cách sử dụng remote web inspector trên máy Mac. Safari 6 cho Windows hiện vẫn chưa có. Ngoài ra, Safari 6 chỉ có sẵn cho máy Mac chạy OSX Lion hoặc cao hơn.

Phương pháp để Sử dụng Web Inspector

Có hai phương pháp để sử dụng web inspector trên Safari mobile:

  1. Phương pháp Thiết bị thật: Sử dụng một iDevice thật (iPhone, iPad, vv) kết nối với máy tính qua USB
  2. Phương pháp Thiết bị Ảo: Sử dụng iOS simulator, nó là một phần của Xcode

Chúng ta sẽ khái quát cả hai phương pháp này và cho phép bạn chọn một phương pháp phù hợp nhất với vấn đền của bạn.

Bước 1: Đảm bảo bạn đã cập nhật

Bởi vì gỡ lỗi các thiết bị di động với web inspector là một tính năng mới, bạn sẽ phải chắc chắn rằng bạn có tất cả các phần mềm mới nhất.

Phương pháp Thiết bị Thật: Để sử dụng web inspector cùng với một iDevice thật, bạn sẽ cần những thứ sau đây:

  • Một iDevice (iPhone, iPad, iTouch) chạy iOS 6
  • Cáp USB
  • Safari 6
  • Mac OSX Lion (10.7.4) hoặc cao hơn

Phương pháp Thiết bị Ảo: Để sử dụng web inspector cùng với iOS simulator, bạn sẽ cần những thứ sau đây:

Kiểm tra phiên bản phần mềm: Để kiểm tra xem bạn có đang chạy iOS 6 trên iDevice của bạn hay không, hãy vào "Settings > General > About" trên thiết bị của bạn.

iOS Version Number Screenshot

Để kiểm tra xem bạn có đang chạy Safari 6 hay không hãy tìm đến thanh menu của Safari và bấm "Safari > About Safari".

Safari Version Number Screenshot

Để đảm bảo bạn đang chạy Lion, hãy nhấp vào biểu tượng Apple trong thanh menu và chọn "About this Mac"

OSX Version Number Screenshot

Để đảm bảo bạn đang chạy đúng phiên bản Xcode, mở Xcode và chọn "Xcode > About Xcode"

Xcode Version Number Screenshot

Bước 2: Bật Developer Tools

Bạn phải kích hoạt Developer Tools và web inspector trên phiên bản desktop và di động của Safari.

Phương pháp dùng Thiết bị Thật: Nếu bạn đang sử dụng một thiết bị thật, hãy kết nối nó với mac của bạn thông qua cổng USB.

Phương pháp dùng Thiết bị Ảo: Nếu bạn đang sử dụng iOS silumator, hãy Xcode, sau đó nhấp chuột phải vào biểu tượng trên thanh dock và chọn "Open Developer Tool > iOS Simulator".

Screenshot opening iOS Simulator

Safari Mobile: Trên iDevice thật của bạn hoặc trong iOS simulator hãy vào "Settings > Safari > Advanced" và bật "Web Inspector".

iOS Screenshot for turning on web inspector

Safari Desktop: Nếu bạn vẫn chưa bật, hãy đảm bảo bạn đã bật Developter Tools trong Safari. Bạn sẽ biết bạn có bật chúng hay chưa nếu bạn có thấy "Developer" trong thanh menu.

Safari 6 Developer Menu

Nếu bạn không nhìn thấy "Developer" trong thanh menu, hãy vào thanh menu và bấm "Safari > Preferences > Advanced" và tích vào hộp đánh dấu "Show developer menu in menu bar".

Safari 6 Advandced Preferences

Bước 3: Kiểm tra Website của bạn

Bây giờ bạn có iOS Simulator hoặc iDevice được kết nối với mac của bạn thông qua USB (hoặc cả hai), bạn đã sẵn sàng để bắt đầu sử dụng web inspector trên trang web của bạn.

Trên mac của bạn, mở Safari và đi đến "Developer". Bây giờ bạn sẽ thấy các iDevice (ảo hoặc thực) mà bạn đã kết nối và chạy với mac của bạn. Trong ảnh chụp màn hình dưới đây, bạn sẽ thấy tôi có hai thiết bị trong menu: một là iOS simulator, cái kia là một chiếc iPhone thật kết nối với mac của tôi.

Screenshot developer menu devices

Để thật sự bắt đầu kiểm tra một trang web, bạn cần phải chạy Safari mobile trên thiết bị và mở một tab truy cập vào trang web. Nếu bạn không mở Safari mobile, bạn sẽ thấy một thông báo nói rằng "No Inspectable Applications".

Screenshot developer menu no applications

Để bắt đầu kiểm tra, chỉ cần nhập URL của trang web mà bạn muốn kiểm tra trong Safari mobile và sau đó chọn trang web đó từ menu "Develop". Bạn có thể bắt đầu kiểm tra các trang web trên iDevice thật của bạn hoặc từ iOS simulator. Khi bạn chọn trang web, bạn sẽ thấy một lớp phủ màu xanh trên trang, cho biết một trang mà bạn đã chọn.

Screenshot developer menu virtual device
Screenshot developer menu real device

Bằng cách chọn một trang web, web inspector của Safari sẽ mở ra và cho phép bạn bắt đầu kiểm tra trang web của bạn. Thật đơn giản!

Screenshot iOS simulator and web inspector

Tóm tắt

Bây giờ bạn đã có web inspector của Safari trong tầm tay của bạn, bạn có thể kiểm soát nhiều hơn nữa việc xây dựng và gỡ lỗi trang web và các ứng dụng web.

Đây là một ví dụ về một số thứ mà bạn có thể làm khi gỡ lỗi các trang web di động:

  • Trực tiếp cập nhật các thay đổi đối với HTML và CSS.
  • Xem trang web/ứng dụng web của bạn thực thi như thế nào bao gồm các chi tiết cho các sự kiện JavaScript và các yêu cầu mạng.
  • Gỡ lỗi JavaScript sử dụng breakpoint và các công cụ khác.
  • Xem các cảnh báo và lỗi.
  • Truy cập giao diện console.
  • Tìm kiếm DOM.
  • Truy cập và xem dữ liệu mà trang web lưu trữ.

Bạn đã có các công cụ, hãy tiến hành xây dựng thôi!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.