DevTools Showdown Edge F12 vs Firefox vs Chrome

Công cụ dành cho nhà phát triển của Microsoft Edge, trình duyệt mặc định mới của Windows 10 có thiết kế hiện đại và một vài tính năng mới so với người tiền nhiệm của nó, F12 Dev Tools của Internet Explorer 11.

Câu hỏi liệu các công cụ phát triển của Microsoft Edge có đo lường được đối thủ cạnh tranh phổ biến của họ hay không - các công cụ phát triển trong các trình duyệt hiện đại khác như Mozilla Firefox và Google Chrome - xuất hiện một cách tự nhiên trong suy nghĩ của nhiều nhà phát triển.

Trong bài đăng này, chúng tôi cố gắng trả lời câu hỏi này và tìm hiểu xem F12 Dev Tools có thực sự đáng sử dụng hay không. Chúng tôi sẽ so sánh các tính năng của nó với các tính năng của Công cụ dành cho nhà phát triển của Firefox và DevTools của Google Chrome.

Mở công cụ Dev

Nhấn F12 sẽ mở các công cụ dành cho nhà phát triển trong cả 3 trường hợp: Công cụ dành cho nhà phát triển trong Firefox, DevTools trong Chrome và F12 Dev Tools trong Microsoft Edge. Đây là phím tắt trong đó Tên chính thức của Công cụ Dev F12 của Edge đến từ.

Khi bạn mở Công cụ Dev của Edge, bạn có thể gặp ngay một trong những thiếu sót nổi tiếng nhất của nó: hiện tại nó là không thể ghim các công cụ vào một cửa sổ hiện có. Mặc dù bạn có thể theo dõi những gì đang diễn ra trên màn hình trên Firefox Developer Tools và Chrome DevTools bằng cách ghim cửa sổ công cụ dev xuống cuối màn hình, bạn (hiện tại) không thể làm tương tự với Edge.

Các nhà phát triển của Microsoft tuyên bố họ sẽ khắc phục vấn đề này trong bản cập nhật trong tương lai.

Kiểm tra DOM

Các DOM Explorer công cụ (Phím tắt: CTRL + 1) là tab đầu tiên của Công cụ phát triển F12 của Microsoft Edge. Bố cục và thiết kế tổng thể của nó khá giống với Thành phần tab của Chrome và Thanh tra tab trong Firefox, tuy nhiên các khả năng khác nhau.

Trong Edge, bạn có thể xem tài liệu HTML được hiển thị, các kiểu CSS có liên quan và các trình xử lý sự kiện đã đăng ký trên mỗi thành phần. Bạn cũng có thể tìm thấy đồ họa nhỏ về mô hình hộp CSS với các giá trị được tính toán, đã được biết đến từ hai trình duyệt cạnh tranh.

Bạn có thể thử nghiệm với các quy tắc CSS bằng cách xóa những cái hiện tại và thêm cái mới, và bạn có thể thấy tóm tắt thay đổi trên một bảng phụ riêng biệt được gọi là “Thay đổi” (nó nằm ở phía bên tay trái). Đây là một tính năng không được tích hợp trong Firefox Developer hay Chrome DevTools. Nó có thể cung cấp một bản tóm tắt nhanh chóng cho người dùng, vì vậy đây là một lựa chọn thực sự hữu ích.

Có một số tính năng trong Firefox Developer Tools mà cả Edge và Google Chrome hiện không cung cấp, nhưng có thể giúp ích đáng kể cho cuộc sống của một nhà thiết kế: các công cụ phân tích Font và Animation.

Ở Edge có một chọn màu mát mẻ mặc dù điều đó có thể phần nào bù đắp cho người dùng cho nó.

Tương tác với JavaScript

Các Bảng điều khiển tab (Phím tắt: CTRL + 2) trong Microsoft Edge cho phép bạn tương tác với JavaScript của trang web của mình, giống như trong Firefox và Chrome Dev Tools. Cả ba đều cho phép bạn theo dõi các lỗi JavaScript trong thời gian thực và bạn cũng có thể phân tích chúng bằng cách nhập dữ liệu nhập của riêng bạn.

Công cụ Console của F12 Dev Tools có một công cụ tuyệt vời tính năng tự động hoàn thành Điều đó giúp bạn với các lệnh, tuy nhiên dường như là ít hiểu biết được so sánh với công cụ trong Firefox và Chrome Dev Tools.

Cạnh phân tách lỗi, cảnh báo và tin nhắn đó là một sự trợ giúp lớn, mặc dù không phải là thứ mà hai bộ công cụ kia không có.

Bảng điều khiển của Firefox dường như là công cụ chuyên nghiệp nhất trong số ba công cụ phát triển, vì nó cũng riêng biệt hiển thị các loại vấn đề khác: mạng, CSS, lỗi bảo mật và thông điệp đăng nhập, và cho phép bạn tương tác với những thứ này thông qua Giao diện điều khiển, không chỉ với các lỗi JavaScript.

Hiểu mã của bạn đang làm gì

Các Trình gỡ lỗi công cụ (Phím tắt: CTRL + 3) giúp bạn hiểu những gì đang xảy ra với mã của bạn trong khi tìm các lỗi tiềm ẩn. Bạn có thể đặt đồng hồ và điểm dừng và xem ngăn xếp cuộc gọi.

Ngăn Đồng hồ hiển thị các giá trị biến, chế độ Callstack hiển thị chuỗi các lệnh gọi hàm dẫn đến trạng thái hiện tại và chế độ Breakpoint hiển thị danh sách các điểm dừng bạn đã đặt.

Công cụ Dev F12 của Edge cho phép bạn tạm dừng mã của bạn ở giữa thực thi và bước qua từng dòng một. Bạn cũng có tùy chọn để cải thiện khả năng đọc của tệp JavaScript được biên dịch hoặc rút gọn, và bạn có thể gỡ lỗi các tài nguyên khác nhau (JavaScript, tiện ích mở rộng, v.v.) từng cái một.

Firefox và Chrome DevTools cung cấp tất cả các chức năng này, vì vậy Edge không cung cấp trải nghiệm gỡ lỗi đặc biệt, nhưng nó cung cấp cho người dùng một công cụ chắc chắn và đáng tin cậy ngang với các đối thủ cạnh tranh.

Hãy xem Giao tiếp trên Trình duyệt-Máy chủ

Các Mạng công cụ (Phím tắt: CTRL + 4) đã được thiết kế lại hoàn toàn cho Microsoft Edge kể từ Internet Explorer 11. Với sự trợ giúp của công cụ tiện dụng này, bạn có thể theo dõi giao tiếp giữa máy chủ và trình duyệt, và kiểm tra các yêu cầu cá nhân.

Bạn có thể lọc kết quả theo loại nội dung chẳng hạn như bảng định kiểu, hình ảnh, phương tiện, phông chữ, XHR và nhiều thứ khác. Bạn cũng có thể gỡ lỗi AJAX với sự trợ giúp của công cụ Mạng.

Tab Mạng của Edge và Firefox cung cấp các khả năng và giao diện người dùng khá giống nhau. Cả hai đều có ngăn thanh bên thân thiện với người dùng cho phép bạn xem tiêu đề HTTP, phần thân HTTP, tham số, cookie liên quan và định thời gian theo từng mục.

Tab Mạng của Chrome DevTools không có ngăn như thế này, nhưng nếu bạn nhấp vào từng yêu cầu, bạn có thể thấy thông tin tương tự. Đó là một giải pháp ít trực quan hơn.

Theo dõi trang chậm

Các Hiệu suất tab (Phím tắt: CTRL + 5) giúp bạn hiểu lý do đằng sau một trang web chậm. Với công cụ Hiệu suất, Microsoft đã có một bước tiến vượt bậc bằng cách kết hợp trước đó UI Responsively và Profiler các công cụ để tạo chế độ xem từ đầu đến cuối của tất cả các tập lệnh của bạn và trực quan hóa hiệu suất.

Công cụ tiện dụng này cung cấp cho bạn các báo cáo về các loại sử dụng CPU khác nhau, cung cấp cho bạn cái nhìn sâu sắc về sơn khung trang web của bạn và cũng có thể cô lập các kịch bản người dùng khác nhau bằng cách đặt nhãn trên dòng thời gian.

Trong quá trình thử nghiệm, chúng tôi thấy rằng công cụ Hiệu suất trong Edge đã cung cấp cho chúng tôi thêm thông tin về các vấn đề tốc độ hơn cả Nhà phát triển Firefox hoặc DevTools của Chrome. Giao diện người dùng của tab Hiệu suất trong Edge được thiết kế khá tốt, giúp chúng tôi có nhiều tín hiệu trực quan và tương đối dễ sử dụng. Nếu bạn muốn biết thêm về cách sử dụng nó, hãy đọc Tài liệu chi tiết.

Chẩn đoán các vấn đề về bộ nhớ

Các Ký ức công cụ (Phím tắt: CTRL + 6) cho phép tìm rò rỉ bộ nhớ Điều đó cũng có thể làm chậm trang web của bạn, hơn nữa có thể tác động đến sự ổn định của trang web của bạn.

Với sự trợ giúp của một biểu đồ đẹp, bạn có thể dễ dàng hiểu được mức độ sử dụng bộ nhớ của mình đang tăng lên và bạn có thể tạo ảnh chụp nhanh tại các điểm cụ thể để có thể phân tích việc sử dụng bộ nhớ. Bạn cũng có thể so sánh hai ảnh chụp được thực hiện tại các điểm khác nhau của vòng đời trang để hiểu sự khác biệt giữa chúng.

Chrome DevTools cũng có trình cấu hình bộ nhớ đẹp trong tab Cấu hình, trong khi Nhà phát triển Firefox không cung cấp tính năng này theo mặc định, nhưng bạn có thể tải xuống và cài đặt các addon như thế này nếu muốn. Trình cấu hình bộ nhớ của Chrome DevTools khá tiên tiến và cung cấp nhiều tính năng hơn so với Edge, ví dụ như nó cho phép bạn ghi lại phân bổ đối tượng JavaScript theo thời gian có thể giúp bạn cách ly rò rỉ bộ nhớ.

Kiểm tra trang web của bạn trên các kích thước màn hình khác nhau

Các Thi đua công cụ (Phím tắt: CTRL + 7) cho phép bạn kiểm tra trang web của mình trong các trường hợp khác nhau. Bạn có thể chọn từ hai cấu hình trình duyệt, Desktop và Windows 10 Mobile và từ nhiều tác nhân người dùng khác nhau bao gồm tất cả các phiên bản Internet Explorer dành cho máy tính để bàn và di động trở lại IE6, cùng với nhiều đối thủ của Edge, Chrome, Firefox, Safari, v.v..

Thật thú vị khi bạn có tùy chọn để thực hiện nhìn vào trang của bạn như một Bing Bot. Bạn cũng có thể giả lập GPS, và thiết lập nghị quyết và định hướng khác nhau.

Firefox Developer Tools không có công cụ mô phỏng thiết bị, nhưng DevTools của Chrome có trình giả lập tinh vi đến mức mà Edge khó có thể cạnh tranh với nó.

Ví dụ: màn hình mô phỏng của Chrome có một lưới chính xác nơi chế độ xem mô phỏng được chèn vào, và bạn không chỉ có thể chọn từ cấu hình trình duyệt và tác nhân người dùng mà còn từ nhiều thiết bị như phiên bản khác nhau của iPhone hoặc Samsung Galaxy và nhiều người khác. Trình giả lập Chrome DevTools cũng có một tiện ích Tùy chọn thu phóng và bạn có thể kiểm tra trang web của mình trên các mạng khác nhau như 3G, 4G, DSL, WiFi, v.v..

Tóm lược

Nhìn chung, F12 Dev Tools của Microsoft Edge dường như rất tốt. Nó cung cấp các tính năng khá giống với các bộ công cụ phát triển web phổ biến của các trình duyệt hiện đại khác. Có hai lĩnh vực mà F12 Dev Tools khá mạnh: giao diện người dùng Đó là thực sự trực quan, thân thiện với người dùng và được thiết kế tốt, và công cụ chẩn đoán hiệu suất.

Đối với hai tính năng này, có thể đáng để xem xét chuyển sang hoặc ít nhất là thử nghiệm Edge. Thiếu sót lớn nhất là thiếu khả năng ghim các công cụ dev xuống cuối màn hình, nhưng hãy hy vọng Microsoft sẽ nhanh chóng khắc phục vấn đề này.