Gỡ lỗi và tương tác với các ứng dụng Web qua Opera Dragonfly

Tôi đã là một fan hâm mộ lớn của Fireorms trong một thời gian dài, nhưng tôi đã nhanh chóng yêu thích Dragonfly thay thế Opera. Bộ công cụ phát triển Web toàn diện cuối cùng đã hết giai đoạn thử nghiệm và sẵn sàng cho thời gian chính. Bài viết này cung cấp một giới thiệu và tổng quan về công cụ với trọng tâm là các tính năng cụ thể trong các bài viết trong tương lai.

Chúng ta hãy đến Opera

Tôi thích Opera, nhưng tôi đã ngừng sử dụng trình duyệt khi họ bắt đầu tính phí cho nó. Chiến lược đó đã nhanh chóng bị loại bỏ và trình duyệt Opera miễn phí hiện đang có phiên bản 11.51 và có sẵn cho Windows, Mac và Linux, cũng như các nền tảng di động và máy tính bảng.

Mặc dù chỉ chiếm một tỷ lệ nhỏ trong thị trường trình duyệt, Opera cung cấp một trình duyệt nhẹ với giao diện người dùng bóng bẩy. Ngoài bộ công cụ dành cho nhà phát triển, nó cung cấp khả năng tăng tốc phần cứng, các tab xếp chồng và cử chỉ chuột; nó cũng hoạt động tuyệt vời trên nền tảng di động và tuyên bố công cụ JavaScript nhanh nhất được gọi là Carakan. Phiên bản mới nhất hiện là trình duyệt ưa thích của tôi trên cả máy tính xách tay Windows và Mac.

Bạn cần thêm gì nữa à?

Opera Dragonfly được cài đặt với trình duyệt; nó có sẵn từ Công cụ | Menu thả xuống nâng cao, lối tắt bàn phím (trên Windows, đó là Ctrl Shift I) hoặc bằng cách bấm chuột phải vào một yếu tố trong trang Web và chọn Kiểm tra phần tử từ menu bật lên.

Hình A

Bộ công cụ Opera Dragonfly có thể truy cập thông qua menu thả xuống Opera Tools. (Bấm vào hình để phóng to.)
Một cuộc khảo sát nhanh về các tính năng của Opera Dragonfly khiến bạn tự hỏi những nhà phát triển Web khác có thể cần gì để phát triển, thử nghiệm và gỡ lỗi triệt để các ứng dụng Web. Danh sách sau đây cung cấp một mẫu của các tính năng này, có thể truy cập thông qua thanh công cụ chính trong giao diện Opera Dragonfly ( Hình B ). Hình B

Thanh công cụ chính của Opera Dragonfly cung cấp quyền truy cập vào các tính năng chính. (Bấm vào hình để phóng to.)
Bạn thấy tất cả các tính năng được thảo luận dưới đây trong Hình C.
  • Trình kiểm tra DOM: Tính năng này khả dụng qua bảng Tài liệu trên thanh công cụ. Trình kiểm tra DOM hiển thị cây DOM cho tài liệu hiện tại như được trình duyệt Opera diễn giải. Trang web Opera có một mô tả tuyệt vời về tính năng này, họ gọi là "Xem nguồn trên steroid." Tính năng Style Inspector của tùy chọn, được hiển thị ở cửa sổ bên phải phía dưới, hiển thị kiểu tương ứng cho một phần tử được chọn trong cửa sổ bên trái (DOM Inspector).
  • Trình gỡ lỗi JavaScript: Trình gỡ lỗi đầy đủ tính năng có sẵn thông qua bảng điều khiển Tập lệnh. Nó cung cấp quyền truy cập vào JavaScript cho trang Web hiện tại và cho phép bạn kiểm soát luồng thông qua các điểm dừng và vv. Mã nguồn được hiển thị ở phần bên trái của cửa sổ; phía bên phải cung cấp các tính năng như điểm dừng, trạng thái (đồng hồ, ngăn xếp cuộc gọi, v.v.) và cho phép bạn dễ dàng tìm kiếm mã.
  • Trình kiểm tra mạng: Bảng điều khiển mạng mở tính năng này, được mô tả dưới dạng bảng điều khiển HTTP. Network Inspector cho phép bạn xem và kiểm tra tất cả các yêu cầu HTTP được liên kết với trang, cũng như trực quan hóa thời gian / thời gian tải xuống cho tất cả các tài nguyên được sử dụng bởi trang; bạn có thể xem tất cả điều này thông qua tab Nhật ký mạng. Một tính năng gọn gàng là khả năng gửi các yêu cầu HTTP của riêng bạn thông qua tab Make Request.
  • Trình kiểm tra tài nguyên: Lựa chọn bảng Tài nguyên cung cấp quyền truy cập vào tính năng này. Trình kiểm tra tài nguyên hiển thị tất cả các yêu cầu tài nguyên do trang Web khởi tạo. Nó hiển thị máy chủ cho tài nguyên và URI đầy đủ cùng với loại và kích thước. Điều này có thể được sử dụng cùng với Trình kiểm tra mạng để xem các tài nguyên lớn và thời gian tải xuống được liên kết của chúng, cho phép bạn xác định chính xác các vấn đề.
  • Trình kiểm tra lưu trữ: Tính năng này cung cấp tổng quan về lưu trữ phía máy khách được sử dụng bởi trang. Điều này bao gồm cookie và lưu trữ Web HTML 5.
  • Nhật ký lỗi: Bảng lỗi cung cấp quyền truy cập vào Nhật ký lỗi, đây là một trong những tính năng quan trọng hơn để làm việc với các ứng dụng Web của riêng bạn. Tiêu đề của bảng điều khiển bao gồm một số tổng số lỗi được trả về. Nó hiển thị lỗi và nguồn của nó. Bạn có thể định cấu hình Nhật ký lỗi thông qua Cài đặt để không hiển thị một số lỗi CSS nhất định và hộp Bộ lọc có thể được sử dụng để tinh chỉnh danh sách lỗi.
  • Bảng điều khiển: Bảng điều khiển cho phép bạn đánh giá các câu lệnh JavaScript một cách nhanh chóng và kiểm tra các đối tượng và thuộc tính.
  • Gỡ lỗi từ xa: Tính năng thú vị này cho phép bạn gỡ lỗi các phiên bản Opera riêng biệt trên cùng hoặc máy tính, thiết bị di động hoặc TV khác. Khi được sử dụng, Gỡ lỗi từ xa lắng nghe các kết nối đến một địa chỉ IP và cổng được chỉ định và kết nối và chuyển thông tin gỡ lỗi qua kết nối. Nó gỡ lỗi từ xa giống như một thể hiện cục bộ.
Hình C

Thanh tra DOM đã mở cho trang chủ TechRepublic. (Bấm vào hình để phóng to.)

Danh sách này chỉ làm trầy xước bề mặt ở những gì được bao gồm trong bộ công cụ Opera Dragonfly. Mỗi tính năng có bộ chức năng riêng. Opera Dragonfly hoàn toàn là nguồn mở và có rất nhiều tài liệu tốt cho các công cụ có sẵn trực tuyến.

Tính năng quá tải

Opera Dragonfly dường như cung cấp tất cả các công cụ cần thiết để gỡ lỗi và tương tác với các ứng dụng Web. Nó đi theo con đường rực lửa của Fireorms và cung cấp nhiều tính năng hơn nữa, đó là lý do tại sao Opera Dragonfly trở thành công cụ ưa thích của tôi. Trong các bài viết trong tương lai, tôi sẽ đề cập đến các tính năng cụ thể của Opera Dragonfly chi tiết hơn. Trong khi đó, nếu bạn chưa có, tôi khuyến khích bạn cài đặt Opera và thử Dragonfly.

Những công cụ phát triển Web nào bạn sử dụng hàng ngày? Những công cụ nào bạn xem xét không thể thiếu? Bạn hiện đang sử dụng Opera Dragonfly hay Fireorms? Chia sẻ suy nghĩ và kinh nghiệm của bạn với cộng đồng.

© Copyright 2020 | mobilegn.com