Xây dựng ứng dụng web cross-browser có thể khó khăn, vì nhiều trình duyệt cung cấp ít công cụ debug thường khác nhau. May mắn thay, ngày nay hầu hết trình duyệt hỗ trợ tiêu chuẩn hiện đại và cung cấp tính năng hữu ích cho developer.
Các trình duyệt chính như Chrome, Firefox, Edge liên tục cập nhật developer tools, mỗi cập nhật có thể mang tính năng mới cho web developer. Tính năng mới tăng dễ sử dụng bằng UI trực quan, debug nâng cao, và công cụ phân tích hiệu suất mạnh hơn.
Cập nhật những thay đổi này giúp bạn dùng DevTools trình duyệt tối đa để quy trình làm việc dễ dàng và tăng tốc giao付 ứng dụng web.
Mục Lục
- Cách Dùng Scroll Into View Trong DevTools
- Cách Dùng Console Shortcuts Trong DevTools
- Cách Chặn Yêu Cầu Tài Nguyên Cho Test Website 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 Dùng Trong DevTools
- Cách Bật Accessibility Tree Trong DevTools
- Tóm Tắt
Trong bài này, chúng ta khám phá vài tính năng DevTools cross-browser tốt và thảo luận cách dùng.
Bắt đầu!
Khi debug, có thể nhiều HTML node để lướt qua tìm vấn đề. Hầu hết thời gian, tìm thấy node, bạn không thấy nó cho đến khi scroll đến vị trí trên trang.
Tính năng Scroll Into View dễ dàng đưa DOM node vào viewport bằng chuột phải chọn Scroll Into view trong Chrome, Firefox, Edge.
Tính năng này tiết kiệm nhiều thời gian debug CSS hoặc verify vị trí đúng element trên trang, đảm bảo nhanh chóng định vị element qua HTML node mà không cần scroll thủ công qua nhiều dòng nội dung.
Trong ảnh dưới, đang tìm element h2 lồng sâu trong nhiều layer element khác.
Trong ảnh, thay vì scroll toàn trang tìm h2, chuột phải dùng Scroll Into View đưa ngay h2 vào view. Có thể mở rộng tính năng làm điều khác với element khi đã scroll tới. Có thể chỉnh CSS real-time qua panel Styles và tìm sửa layout issue.
Nhiều shortcut dùng trong Console giúp developer debug nhanh hơn. Một trong số đó là shortcut $_. Shortcut này trả về giá trị biểu thức gần nhất được đánh giá bởi Console. Ví dụ, có hàm multiplier:
Trong ảnh dưới, thấy cách shortcut $_ dùng như biến đặc biệt trong Console lưu biểu thức gần nhất đánh giá:
Không có $_, phải gõ lại toàn bộ gọi hàm hoặc lưu kết quả trong biến như:
let result = multiply(5) result(4) // returns 20 Trong code trên, multiply(5) phải trả về hàm và gán cho result, rồi gọi với 4 tham số result(4).
Chắc bạn thấy cách này đã tạo thừa thãi và bước thừa cồng kềnh khi xử lý operation phức tạp hoặc nhiều bước tính toán. Đây là lúc $_ tỏa sáng. Khi chạy multiply(5) trong Console, hàm trả về được lưu trong biến $_ bởi Console, truy cập bằng shortcut $_.
Shortcut khác là dùng $0 truy cập node từ Console. $0 truy cập node đang chọn trong DOM tree từ Console. Khi inspect trang với DevTools, thường duyệt DOM tree trong panel Elements tìm element quan tâm. Khi click element trong panel, DevTools theo dõi nội bộ element này, nó trở thành element đang chọn.
$0 là shortcut tham chiếu element đang chọn trong Console, thao tác trực tiếp trong Console không cần viết query chọn lại.
Screenshot dưới cho thấy dùng $0 trong Console truy cập node chọn trong DOM tree và đổi background color.
Từ ảnh, bắt đầu inspect element mong muốn trong panel elements. Thay vì query lại element dùng document.querySelector('#element'), dùng $0 thao tác trực tiếp như:
$0.style.backgroundColor = 'lightblue'; Mã này đổi background color của <div> chọn thành light blue nhẹ. Điều làm $0 hữu ích là tham chiếu trực tiếp đến element chính xác bạn chọn trong DOM, đảm bảo làm việc với element đúng, kể cả element động hoặc lồng sâu.
Tính năng Block Resource Request DevTools quan trọng cho web developer test website hành xử khi tài nguyên cụ thể không load được.
Tính năng này cho phép mô phỏng tình huống image, JavaScript, CSS, hoặc toàn bộ domain không thể truy cập, và xem webpage hành xử ra sao.
Tài nguyên trình duyệt yêu cầu không luôn đảm bảo tải xuống, dẫn đến trải nghiệm bất ngờ cho user. Bạn có thể chặn request tài nguyên trên Chrome, Firefox, Edge và test site hành xử.
Trên Chrome và Edge:
- Trên panel Network, chuột phải tài nguyên muốn chặn chọn Block request URL.
- Refresh website, tài nguyên chặn không tải và không ảnh hưởng trang.
Trong ảnh dưới, dùng Block request URL ở tab Network chặn request CSS xem trang web trông như nào nếu CSS file thất bại load.
Từ ảnh, thấy tất cả network request của webpage bao gồm image, CSS, JS, v.v. Lọc chỉ CSS file hiển thị.
Từ đây, chuột phải CSS file trong panel Network chọn Block request URL. Hành động ngăn trình duyệt tải CSS file cụ thể lần refresh tiếp theo.
Bằng cách chặn request, quan sát hành vi lạ và đo lường vắng mặt tài nguyên chặn ảnh hưởng page load time và performance như thế nào.
Trên Firefox:
- Trên panel Network, chuột phải tài nguyên muốn chặn chọn Block URL.
- Reload trang.
Tôi dùng test site hành xử khi không load file JavaScript cụ thể. Tính năng giúp debug issue nảy sinh khi user tắt JavaScript.
Một trong những tính năng DevTools hay nhất là chỉnh sửa và gửi lại network request ngay trong trình duyệt. Tính năng hữu ích debug vấn đề network request. Ví dụ, muốn xem thay đổi tham số request, header, hoặc body ảnh hưởng response từ server như thế nào, không cần thay mã frontend hoặc restart toàn bộ quy trình request.
Khi tạo network request, request tới backend service có thể fail hoặc không respond dữ liệu ý định. Đau khổ phải reload toàn trang retry request, đó là lý do Edit and Resend hữu ích.
Trên Edge và Firefox, chỉnh sửa và gửi lại network request bằng chuột phải request muốn edit/resend chọn Edit and Resend, như ảnh dưới.
Trong ảnh, thử login website. Khi user submit credentials, form gửi request POST đến API endpoint /auth/login với username/password.
Thỉnh thoảng server trả 400 Bad Request, để debug lỗi và biết tại sao, phải retry request. Không muốn điền form lại, dùng Edit and Resend như dưới.
Ảnh trên là network Console hoặc sidebar mở khi click Edit and Resend, hiển thị chi tiết request. Tại đây, có thể edit:
- URL: Sửa URL hoặc thêm query parameter nếu cần.
- Headers: Có thể nhận thấy thiếu hoặc sai Content-Type header, sửa ở đây.
- Body: Điều chỉnh payload, như sửa username/password field.
Trên Chrome, edit and resend chỉ hoạt động cho XHR request, dùng chuột phải request chọn replay.
Công cụ Coverage trong DevTools cho developer phát hiện vùng code JavaScript và CSS không dùng trong giai đoạn load và tương tác webpage. Tính năng quan trọng tăng hiệu suất web bằng cách giảm kích thước file và loại code thừa cho page load nhanh hơn và UX tốt hơn.
Loại bỏ JS và CSS không dùng là cách tốt tiết kiệm bandwidth user. Coverage tool tìm code không dùng trong source, loại bỏ hoặc defer cho đến khi cần.
Trên Chrome và Edge:
- Trong DevTools, bấm
Ctrl/cmd+Shift+P, gõ coverage chọn Start instrumenting coverage, refresh trang, enter. - Sẽ thấy bảng file JS và CSS với cột unused byte.
- Click file bất kỳ mở nó. Dòng bên cạnh chỉ section code không dùng màu đỏ.
Trong ảnh dưới, xác định CSS code không dùng để có thể loại bỏ hoặc defer load.
Từ ảnh, sau ghi xong, Coverage tool hiển thị danh sách file CSS và JS tải bởi trang, kèm metric chi tiết:
- Total Bytes: Kích thước file.
- Unused Bytes: Số byte trong file không dùng.
- Usage Visualization: Thanh trực quan tỷ lệ code dùng vs không dùng.
Trên Safari: Trong panel Sources, mở left navigation sidebar click file JS bất kỳ. Góc phải toolbar, click icon coverage c refresh trang. Sẽ thấy section code không thực thi bị xám.
Accessibility tree giống DOM tree element và dùng bởi công nghệ hỗ trợ như screen reader đọc nội dung web. Developer dùng tính năng này debug accessibility issue trên website. Chromium browser dùng Chrome accessibility API, Firefox có accessibility tool riêng.
Trên Chrome và Edge:
- Trên trang settings, chọn tab Experiments.
- Check box Enable full accessibility tree view option in the Elements panel.
- Refresh DevTools vào Elements tool.
- Góc trên phải element view, click Switch to DOM Tree view.
Ví dụ, trong ảnh dưới, kiểm tra link và nút trên website có được nhận diện đúng và accessible cho user dùng screen reader:
Với accessibility tree bật, thấy phiên bản đơn giản DOM tree, focus element liên quan accessibility. Khi chọn element trên accessibility tree xem property, tree hiển thị role, name, và attribute quan trọng như aria-label nếu có.
Cũng thấy element có focusable không và computed accessibility properties là gì.
Giúp rất nhiều vì nếu element không xuất hiện đúng trong accessibility tree hoặc thiếu attribute thiết yếu, có thể cần điều chỉnh HTML hoặc ARIA attribute cải thiện accessibility.
Trên Firefox:
- Trong Firefox DevTools, click tab accessibility và expand document node.
- Click node khác nhau xem property.
- Accessibility issue cho node hiển thị tab Checks.
Tóm Tắt
Tóm lại, cập nhật tính năng DevTools cross-browser mới nhất tiết kiệm thời gian cho web developer. Bài viết chạm đến mẹo inspect element, shortcut Console làm debug dễ hơn, và mẹo hữu ích monitor network.
Hy vọng bạn tiếp tục khám phá và dùng nhiều tính năng DevTools hơn cải thiện trải nghiệm developer.
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm lập trình viên. Bắt đầu ngay