Gỡ rối sự cố bố cục CSS trong Android

Question

Chúng tôi có một trang web hiện có và tôi đã được yêu cầu kiểm tra khả năng tương thích của nó với các trình duyệt di động.

Tôi đã cài đặt SDK Android trên máy tính để bàn của mình. Tôi có thể xem trang web localhost của tôi trong trình giả lập và tôi đã xác định được một số trục trặc trong bố cục trang xuất hiện trong trình duyệt Android.

Nhưng vì không có sự cố nào trong số này xảy ra trong bất kỳ trình duyệt dành cho máy tính để bàn nào, tôi đã phải vật lộn với cách gỡ lỗi chúng. Ví dụ, trong Firefox, nó rất dễ sử dụng Firebug để xem những bảng định kiểu nào đã được appies và điều chỉnh chúng trên bay để xem nó ảnh hưởng như thế nào đến layout. Nhưng tôi đã không tìm thấy một cách để làm bất cứ điều gì tương tự như trên giả lập Android.

Câu hỏi đặt ra là, thiếu lỗi + dùng thử, làm cách nào để tìm hiểu xem nguyên nhân gây ra những vấn đề bố cục đó là gì? Trình duyệt Android (hay Android SDK) có bất kỳ loại công cụ nào hữu ích để gỡ lỗi CSS không? Nếu vậy, làm thế nào để sử dụng chúng?

[EDIT] Tôi đã không tìm thấy một giải pháp này, vì vậy tôi ném mở cửa để các thợ săn tiền thưởng ...

Answer 1

Weinre có lẽ là gần nhất với những gì bạn đang tìm kiếm:

Nếu bạn đang muốn tìm một cái gì đó cho phép bạn tinh chỉnh bố trí trong thời gian thực nó nên làm cho bạn hạnh phúc.

Answer 2

Bạn có thể đã nhìn thấy điều này, nhưng trang web tài liệu SDK có một số thông tin cơ bản về phát triển và gỡ lỗi các ứng dụng web trên Android:

Web Apps Overview

Debugging Web Apps

Hy vọng rằng sẽ giúp!

Answer 3

https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US

https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US

https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US

Tôi tìm thấy một số tùy chọn xuất hiện như thể họ sẽ làm việc cho bạn nếu một mô phỏng/mô phỏng sẽ đủ hoặc ít nhất giúp bạn bắt đầu. Lợi ích của việc này là Công cụ dành cho nhà phát triển Chrome dường như hoạt động với các tiện ích bổ sung!

Answer 4

Tôi không biết cách bạn phát hiện thiết bị di động nhưng tôi phát hiện khách hàng có tác nhân người dùng. Bởi vì điều này tôi chỉ đơn giản có thể gửi một chuỗi tác nhân người dùng khác nhau để kiểm tra CSS hoạt động khá tốt.

Đối với Firefox, tôi sử dụng User Agent Switcher. Ngoài ra, tôi sử dụng công cụ Nhà phát triển web không chỉ để xem tất cả các cài đặt mà còn là tùy chọn Thay đổi kích thước để mô phỏng chiều rộng khung nhìn.

Safari của Apple có phần mở rộng dành cho nhà phát triển và bên trong cũng là Trình chuyển đổi tác nhân người dùng. Bạn có thể thêm chuỗi User Agent của riêng bạn.

Answer 5

Cá nhân tôi rất muốn làm điều này trên phần cứng Android thực tế. Trong sử dụng một chiếc điện thoại màn hình cảm ứng là khá khác nhau để ngay cả những giả lập chính xác nhất; Những thứ như gamma, mật độ điểm ảnh, hiệu suất, tương tác chạm (là các liên kết đủ lớn?), hướng dọc/ngang và thậm chí thực tế bạn giữ nó trong tay làm cho nó hoàn toàn khác với trải nghiệm của máy tính để bàn. Nếu bạn muốn xem trang web hoạt động tốt như thế nào trên thiết bị di động/Android, hãy mua thiết bị cũ giá rẻ để kiểm tra!

Để gỡ lỗi; Tôi luôn luôn bao gồm chức năng "đăng nhập" của riêng tôi mà tạo ra một giao diện điều khiển div # nếu firebug/trình điều khiển trình duyệt không có sẵn. Điều này hoạt động khá tốt cho việc gỡ lỗi trên thiết bị cầm tay với thông báo trước rằng nó bao gồm một phần nội dung. Sau đó, bạn có thể in kiểu dáng hiện tại của một đối tượng bằng một cái gì đó như

log(window.getComputedStyle(document.getElementById("myobj")); 

Lưu ý: Ở trên sẽ không hoạt động trong IE.

Answer 6

Tôi thấy liên kết này để gỡ lỗi từ xa trong Android:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm.