Tối đa hóa hiệu quả phát triển:Tận dụng các tính năng của DevTools trên nhiều trình duyệt

Xây dựng các ứng dụng web trên nhiều trình duyệt có thể là một nhiệm vụ khó khăn vì nhiều trình duyệt cung cấp một số công cụ gỡ lỗi thường khác nhau giữa chúng. May mắn thay, ngày nay hầu hết các trình duyệt đều hỗ trợ các tiêu chuẩn hiện đại và cung cấp các tính năng hữu ích cho nhà phát triển.

Các trình duyệt chính, chẳng hạn như Chrome, Firefox và Edge, liên tục cập nhật các công cụ dành cho nhà phát triển của họ, với mỗi bản cập nhật có khả năng mang lại các tính năng mới cho các nhà phát triển web. Những tính năng mới này giúp tăng tính dễ sử dụng bằng cách thêm giao diện người dùng trực quan, gỡ lỗi nâng cao hơn và các công cụ phân tích hiệu suất nâng cao.

Việc luôn cập nhật những thay đổi này cho phép bạn sử dụng DevTools của trình duyệt ở mức tối đa tiềm năng để giúp quy trình làm việc của bạn dễ dàng hơn và tăng tốc độ phân phối ứng dụng web của bạn.

Mục lục

• Cách sử dụng tính năng cuộn vào chế độ xem trong DevTools

• Cách sử dụng phím tắt trên bảng điều khiển trong DevTools

• Cách chặn yêu cầu tài nguyên để kiểm tra trang web trong DevTools

• Cách chỉnh sửa và gửi lại yêu cầu mạng trong DevTools

• Cách phát hiện mã nguồn không được sử dụng trong DevTools

• Cách bật Cây trợ năng trong DevTools

• Tóm tắt

Trong bài viết này, chúng ta sẽ khám phá một số tính năng hữu ích của DevTools trên nhiều trình duyệt và thảo luận cách sử dụng chúng.

Hãy bắt đầu nào!

Khi gỡ lỗi, có thể có rất nhiều nút HTML cần lướt qua để tìm ra vấn đề của bạn ở đâu. Trong hầu hết các trường hợp, khi bạn tìm thấy nút, bạn sẽ không nhìn thấy nút đó cho đến khi bạn cuộn đến vị trí của nút đó trên trang.

Tính năng Scroll Into View dễ dàng đưa nút DOM vào khung nhìn bằng cách nhấp chuột phải và chọn Scroll Into view trong Chrome, Firefox và Edge.

Tính năng này tiết kiệm rất nhiều thời gian khi gỡ lỗi các vấn đề về CSS hoặc muốn xác minh vị trí chính xác của các phần tử trên một trang, đảm bảo bạn có thể nhanh chóng định vị các phần tử trên trang thông qua các nút HTML mà không cần phải cuộn qua nhiều dòng nội dung theo cách thủ công.

Trong hình ảnh bên dưới, chúng tôi đang cố gắng tìm h2 phần tử được lồng bên trong một số lớp của phần tử khác.

Trong hình trên, thay vì cuộn qua toàn bộ trang để tìm h2 phần tử, chúng tôi đã nhấp chuột phải và sử dụng tính năng Cuộn vào chế độ xem để đưa ngay h2 phần tử vào chế độ xem. Chúng tôi có thể mở rộng tính năng này để thực hiện những việc khác với phần tử khi chúng tôi cuộn đến phần tử đó. Chúng tôi có thể điều chỉnh các thuộc tính CSS trong thời gian thực thông qua bảng kiểu và thậm chí tìm và khắc phục các vấn đề về bố cục.

Có rất nhiều phím tắt có thể được sử dụng trong Bảng điều khiển để cho phép bạn, với tư cách là nhà phát triển, gỡ lỗi nhanh hơn. Một trong số đó là $_ lối tắt. Phím tắt này trả về giá trị của biểu thức gần đây nhất được Bảng điều khiển đánh giá. Ví dụ:giả sử chúng ta có hàm nhân:

Trong hình ảnh bên dưới, bạn có thể thấy $_ phím tắt được sử dụng làm biến đặc biệt trong Bảng điều khiển của trình duyệt để lưu trữ biểu thức được đánh giá gần đây nhất:

Không có $_ lối tắt, bạn sẽ phải gõ lại toàn bộ lệnh gọi hàm hoặc bạn có thể lưu kết quả vào một biến như sau:

let result = multiply(5)
result(4) // returns 20

Trong đoạn mã trên, multiply(5) hàm phải trả về một hàm và gán hàm đó cho kết quả, sau đó hàm này được gọi bằng 4 dưới dạng tham số result(4) .

Tôi chắc rằng bạn có thể thấy điều này đã đưa ra một số bước dự phòng và bổ sung có thể rườm rà khi bạn xử lý các thao tác phức tạp hơn hoặc khi thực hiện nhiều bước tính toán. Đây là nơi $_ phím tắt tỏa sáng. Khi chúng tôi chạy multiply(5) mã trong Bảng điều khiển, một hàm được trả về và lưu trữ trong $_ biến bằng Bảng điều khiển mà chúng ta có thể truy cập bằng $_ lối tắt.

Một phím tắt khác là sử dụng $0 để truy cập các nút từ Bảng điều khiển. $0 có thể được sử dụng để truy cập nút hiện được chọn trong cây DOM từ trong Bảng điều khiển. Khi kiểm tra một trang web bằng DevTools, bạn thường duyệt qua cây DOM trong bảng Thành phần để tìm thành phần mà bạn quan tâm. Khi bạn nhấp vào một thành phần trong bảng này, DevTools sẽ theo dõi nội bộ thành phần này và nó sẽ trở thành thành phần hiện được chọn.

$0 là lối tắt tham chiếu đến phần tử hiện đang được chọn trong Console nên bạn có thể thao tác trực tiếp trong Console mà không cần viết truy vấn để chọn lại.

Ảnh chụp màn hình bên dưới cho thấy cách chúng tôi có thể sử dụng $0 trong Bảng điều khiển để truy cập vào nút đã chọn trong cây DOM và thay đổi màu nền thành bất cứ thứ gì chúng ta muốn.

Từ hình ảnh trên, chúng tôi bắt đầu bằng cách kiểm tra phần tử mong muốn mà chúng tôi muốn trong bảng thành phần. Bây giờ, thay vì truy vấn lại phần tử bằng cách sử dụng document.querySelector('#element') , bạn chỉ có thể sử dụng $0 để thao tác trực tiếp như thế này:

$0.style.backgroundColor = 'lightblue';

Mã này thay đổi màu nền của <div> đã chọn sang màu xanh nhạt dịu dàng. Điều thực sự tạo nên $0 hữu ích trong trường hợp này là nó cho phép bạn tham chiếu trực tiếp đến phần tử chính xác mà bạn đã chọn trong DOM, đảm bảo rằng bạn đang làm việc với đúng phần tử, ngay cả trong trường hợp các phần tử được tạo động hoặc được lồng sâu.

Tính năng Block Resource Yêu cầu DevTools là một tính năng quan trọng để các nhà phát triển web kiểm tra cách trang web của họ hoạt động khi các tài nguyên cụ thể không thể tải được.

Tính năng này cho phép bạn mô phỏng các tình huống trong đó hình ảnh, JavaScript, CSS hoặc toàn bộ miền không thể truy cập được và bạn có thể xem trang web của mình sẽ hoạt động như thế nào trong tình huống đó.

Các tài nguyên mà trình duyệt yêu cầu không phải lúc nào cũng được đảm bảo tải xuống, điều này có thể dẫn đến những trải nghiệm không mong muốn cho người dùng trang web của bạn. Bạn có thể chặn yêu cầu tới một tài nguyên trên Chrome, Firefox và Edge và kiểm tra cách trang web của bạn hoạt động.

Trên Chrome và Edge:

• Trên bảng Mạng, nhấp chuột phải vào tài nguyên bạn muốn chặn và chọn Chặn URL yêu cầu.

• Làm mới trang web và tài nguyên bị chặn sẽ không được tải xuống cũng như không ảnh hưởng đến trang web.

Trong hình ảnh bên dưới, chúng tôi đang sử dụng tùy chọn Chặn URL yêu cầu trong tab Mạng để chặn yêu cầu CSS và xem trang web sẽ trông như thế nào nếu tệp CSS đã chọn không tải được.

Từ hình ảnh trên, chúng ta có thể thấy tất cả các yêu cầu mạng do trang web thực hiện, bao gồm các yêu cầu về hình ảnh, tệp CSS, tệp JavaScript, v.v. Trong trường hợp của tôi, tôi đã lọc chỉ các tệp CSS được hiển thị.

Từ đây, bạn có thể nhấp chuột phải vào tệp CSS trong bảng Mạng và chọn Chặn URL yêu cầu. Hành động này sẽ ngăn trình duyệt tải tệp CSS cụ thể vào lần làm mới trang tiếp theo.

Bằng cách chặn yêu cầu, chúng tôi có thể đề phòng các hành vi kỳ lạ và cũng đo lường mức độ ảnh hưởng của việc thiếu tài nguyên bị chặn đến thời gian và hiệu suất tải trang.

Trên Firefox:

• Trên bảng Mạng, nhấp chuột phải vào tài nguyên bạn muốn chặn và chọn Chặn URL.

• Tải lại trang.

Tôi đã sử dụng điều này để kiểm tra xem trang web của tôi hoạt động như thế nào khi tôi không tải một tệp JavaScript cụ thể. Tính năng này có thể giúp nhà phát triển gỡ lỗi các vấn đề có thể phát sinh khi người dùng tắt JavaScript.

Một trong những tính năng thú vị nhất của DevTools là khả năng chỉnh sửa và gửi lại các yêu cầu mạng ngay trong trình duyệt. Tính năng này có thể thực sự hữu ích để gỡ lỗi sự cố yêu cầu mạng. Ví dụ:các trường hợp mà bạn muốn xem những thay đổi đối với tham số, tiêu đề hoặc nội dung yêu cầu ảnh hưởng như thế nào đến phản hồi từ máy chủ mà không cần phải thực hiện bất kỳ thay đổi nào đối với mã giao diện người dùng hoặc khởi động lại toàn bộ quá trình yêu cầu.

Khi thực hiện yêu cầu mạng, các yêu cầu gửi đến dịch vụ phụ trợ có thể không thành công hoặc không phản hồi với dữ liệu dự định. Thật khó khăn khi phải tải lại toàn bộ trang để thử lại yêu cầu, đó là lý do tại sao tính năng Chỉnh sửa và Gửi lại lại hữu ích.

Trong trình duyệt Edge và Firefox, bạn có thể chỉnh sửa và gửi lại yêu cầu mạng bằng cách nhấp chuột phải vào yêu cầu bạn muốn chỉnh sửa hoặc gửi lại và chọn Chỉnh sửa và gửi lại, giống như trong hình bên dưới.

Trong hình trên, chúng tôi đã cố gắng đăng nhập vào một trang web. Khi người dùng gửi thông tin xác thực của họ, biểu mẫu sẽ gửi POST yêu cầu tới điểm cuối API, /auth/login , với tên người dùng và mật khẩu của người dùng.

Đôi khi, máy chủ có thể trả về 400 Lỗi Yêu cầu không hợp lệ và để chúng tôi gỡ lỗi và tìm hiểu lý do tại sao, chúng tôi phải thử lại yêu cầu. Chúng tôi không muốn tiếp tục điền vào biểu mẫu nên chúng tôi sử dụng tính năng Chỉnh sửa và Gửi lại như hiển thị bên dưới.

Hình trên là Bảng điều khiển mạng hoặc một thanh bên sẽ mở ra khi bạn nhấp vào Chỉnh sửa và Gửi lại, hiển thị chi tiết về yêu cầu. Tại đây, bạn có thể chỉnh sửa:

• URL:Nếu cần, bạn có thể sửa đổi URL hoặc thêm tham số truy vấn.

• Tiêu đề:Bạn có thể nhận thấy tiêu đề Loại nội dung bị thiếu hoặc không chính xác. Bạn có thể sửa tiêu đề này tại đây.

• Nội dung:Đây là nơi bạn có thể điều chỉnh tải trọng, chẳng hạn như sửa trường tên người dùng hoặc mật khẩu.

Trong trình duyệt Chrome, tính năng chỉnh sửa và gửi lại chỉ hoạt động đối với các yêu cầu XHR và bạn có thể sử dụng tính năng này bằng cách nhấp chuột phải vào yêu cầu và chọn phát lại.

Công cụ Bảo hiểm trong DevTools cho phép nhà phát triển phát hiện các khu vực trên tệp JavaScript và CSS vẫn chưa được sử dụng trong giai đoạn tải và tương tác của trang web. Đây là một tính năng quan trọng để nâng cao hiệu suất web bằng cách giảm kích thước tệp và loại bỏ mã không cần thiết để có thời gian tải trang nhanh hơn và trải nghiệm người dùng tốt hơn.

Xóa mã JS và CSS không sử dụng là một cách tuyệt vời để tiết kiệm băng thông người dùng của bạn. Công cụ Coverage cho phép bạn tìm mã không được sử dụng trong mã nguồn của mình và xóa mã đó hoặc trì hoãn mã đó cho đến khi cần đoạn mã đó.

Trên Chrome và Edge:

• Trong DevTools, nhấn Ctrl/cmd+Shift+P , nhập mức độ phù hợp và chọn Bắt đầu phạm vi đo lường, làm mới trang rồi nhấn enter.

• Bạn sẽ thấy một bảng gồm các tệp JS và CSS có cột byte không được sử dụng.

• Bấm vào bất kỳ tập tin nào để mở nó. Dòng bên cạnh cho biết phần mã nào không được sử dụng có màu đỏ.

Trong hình ảnh bên dưới, chúng tôi đang xác định mã CSS không được sử dụng để có thể xóa hoặc trì hoãn việc tải mã.

Từ hình ảnh trên, sau khi ghi xong, công cụ Coverage sẽ hiển thị danh sách các tệp CSS và JavaScript được trang tải cùng với các số liệu chi tiết:

• Tổng số byte:Kích thước của tệp.

• Byte chưa sử dụng:Số byte trong tệp không được sử dụng.

• Trực quan hóa cách sử dụng:Thanh trực quan biểu thị tỷ lệ mã được sử dụng và mã không được sử dụng.

Trên Safari:Trong bảng Nguồn, mở thanh bên điều hướng bên trái và nhấp vào bất kỳ tệp JS nào. Ở trên cùng bên phải của thanh công cụ, nhấp vào biểu tượng vùng phủ sóng c và làm mới trang của bạn. Bạn có thể thấy những phần mã không được thực thi sẽ có màu xám.

Cây khả năng truy cập tương tự như cây DOM phần tử và được sử dụng bởi các công nghệ hỗ trợ như trình đọc màn hình để đọc nội dung web. Nhà phát triển có thể sử dụng tính năng này để gỡ lỗi các vấn đề về khả năng truy cập trên trang web của họ. Trình duyệt Chrome sử dụng API trợ năng của Chrome để thực hiện điều này, trong khi Firefox có công cụ trợ năng riêng.

Trên Chrome và Edge:

• Trên trang cài đặt, chọn tab Thử nghiệm.

• Chọn hộp cho tùy chọn Bật chế độ xem dạng cây hỗ trợ đầy đủ trong bảng Thành phần.

• Làm mới DevTools và đi tới công cụ Elements.

• Ở góc trên bên phải của chế độ xem phần tử, nhấp vào Chuyển sang chế độ xem dạng cây DOM.

Ví dụ:trong hình ảnh bên dưới, chúng tôi đang kiểm tra xem các liên kết và nút trên trang web của chúng tôi có được nhận dạng chính xác và có thể truy cập được đối với những người dùng dựa vào trình đọc màn hình hay không:

Khi bật cây khả năng truy cập, bạn có thể thấy phiên bản đơn giản hóa của cây DOM, tập trung vào các phần tử có liên quan đến khả năng truy cập. Khi bạn chọn một phần tử trên cây khả năng truy cập để xem các thuộc tính của nó, cây sẽ hiển thị vai trò, tên và các thuộc tính quan trọng khác của phần tử đó, chẳng hạn như nhãn aria nếu chúng có mặt.

Bạn cũng sẽ biết liệu phần tử có thể lấy tiêu điểm hay không và các thuộc tính trợ năng được tính toán của phần tử đó là gì.

Điều này giúp ích rất nhiều vì nếu phần tử không xuất hiện chính xác trong cây khả năng truy cập hoặc thiếu các thuộc tính thiết yếu, bạn có thể cần phải điều chỉnh các thuộc tính HTML hoặc ARIA của mình để cải thiện khả năng truy cập.

Trên Firefox:

• Trong Firefox DevTools, nhấp vào tab trợ năng và mở rộng nút tài liệu.

• Bạn có thể nhấp vào các nút khác nhau để xem thuộc tính của chúng.

• Các vấn đề về khả năng truy cập của các nút sẽ được hiển thị trên tab Kiểm tra.

Tóm tắt

Tóm lại, việc cập nhật các tính năng DevTools trên nhiều trình duyệt mới nhất sẽ giúp bạn tiết kiệm thời gian với tư cách là nhà phát triển web. Bài đăng này đề cập đến các mẹo kiểm tra thành phần, một số phím tắt trên Bảng điều khiển để giúp quá trình gỡ lỗi của bạn dễ dàng hơn và một số mẹo hữu ích để giám sát mạng.

Hy vọng bạn sẽ tiếp tục khám phá và sử dụng nhiều tính năng DevTools hơn để cải thiện trải nghiệm cho nhà phát triển của mình.

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu