Một số tính năng DevTools trên nhiều trình duyệt mà bạn có thể không biết

Tôi dành nhiều thời gian cho DevTools và tôi chắc rằng bạn cũng vậy. Đôi khi tôi thậm chí bị trả lại giữa chúng, đặc biệt là khi tôi đang gỡ lỗi các sự cố trên nhiều trình duyệt. DevTools rất giống bản thân các trình duyệt — không phải tất cả các tính năng trong DevTools của một trình duyệt sẽ giống hoặc được hỗ trợ trong DevTools của một trình duyệt khác.

Nhưng có khá nhiều tính năng của DevTools có thể tương tác với nhau, thậm chí một số tính năng ít được biết đến hơn mà tôi sắp chia sẻ với bạn.

Để cho ngắn gọn, tôi sử dụng “Chromium” để chỉ tất cả các trình duyệt dựa trên Chromium, như Chrome, Edge và Opera, trong bài viết. Nhiều DevTools trong đó cung cấp các tính năng và khả năng giống hệt nhau, vì vậy đây chỉ là cách viết tắt của tôi để đề cập đến tất cả chúng cùng một lúc.

Tìm kiếm các nút trong cây DOM

Đôi khi cây DOM chứa đầy các nút được lồng trong các nút được lồng trong các nút khác, v.v. Điều đó làm cho việc tìm kiếm chính xác cái mà bạn đang tìm kiếm trở nên khá khó khăn, nhưng bạn có thể nhanh chóng tìm kiếm cây DOM bằng cách sử dụng Cmd + F (macOS) hoặc Ctrl + F (Các cửa sổ).

Ngoài ra, bạn cũng có thể tìm kiếm bằng bộ chọn CSS hợp lệ, chẳng hạn như .redhoặc sử dụng XPath, như //div/h1.

Trong trình duyệt Chromium, tiêu điểm sẽ tự động chuyển đến nút phù hợp với tiêu chí tìm kiếm khi bạn nhập, điều này có thể gây khó chịu nếu bạn đang làm việc với các truy vấn tìm kiếm dài hơn hoặc cây DOM lớn. May mắn thay, bạn có thể vô hiệu hóa hành vi này bằng cách chuyển đến Cài đặt (F1) → Sở thích (Preferences) → Toàn cầu → Tìm kiếm khi bạn nhập → Vô hiệu hoá.

Sau khi bạn đã định vị nút trong cây DOM, bạn có thể cuộn trang để đưa nút vào chế độ xem bằng cách nhấp chuột phải vào nút và chọn “Cuộn vào chế độ xem”.

Truy cập các nút từ bảng điều khiển

DevTools cung cấp nhiều cách khác nhau để truy cập nút DOM trực tiếp từ bảng điều khiển.

Ví dụ, bạn có thể sử dụng $0 để truy cập nút hiện được chọn trong cây DOM. Trình duyệt Chromium tiến thêm một bước này bằng cách cho phép bạn truy cập các nút được chọn theo thứ tự thời gian đảo ngược của lựa chọn lịch sử bằng cách sử dụng, $1, $2, $3, Vv

Một điều khác mà trình duyệt Chromium cho phép bạn thực hiện là sao chép đường dẫn nút dưới dạng biểu thức JavaScript ở dạng document.querySelector bằng cách nhấp chuột phải vào nút và chọn Sao chép → Sao chép đường dẫn JS, sau đó có thể được sử dụng để truy cập nút trong bảng điều khiển.

Đây là một cách khác để truy cập nút DOM trực tiếp từ bảng điều khiển: dưới dạng một biến tạm thời. Tùy chọn này khả dụng bằng cách nhấp chuột phải vào nút và chọn một tùy chọn. Tùy chọn đó được gắn nhãn khác nhau trong DevTools của mỗi trình duyệt:

• Chromium: Nhấp chuột phải → “Lưu dưới dạng biến toàn cục”
• Firefox: Nhấp chuột phải → “Sử dụng trong Bảng điều khiển”
• Safari: Nhấp chuột phải → “Phần tử Nhật ký”

Trực quan hóa các yếu tố với huy hiệu

DevTools có thể giúp trực quan hóa các phần tử khớp với các thuộc tính nhất định bằng cách hiển thị huy hiệu bên cạnh nút. Huy hiệu có thể nhấp được và các trình duyệt khác nhau cung cấp nhiều loại huy hiệu khác nhau.

In Safari, có một nút huy hiệu trong thanh công cụ của bảng Thành phần có thể được sử dụng để chuyển đổi chế độ hiển thị của các huy hiệu cụ thể. Ví dụ, nếu một nút có một display: grid or display: inline-grid Tuyên bố CSS được áp dụng cho nó, một grid huy hiệu được hiển thị bên cạnh nó. Nhấp vào huy hiệu sẽ làm nổi bật các khu vực lưới, kích thước bản nhạc, số dòng, v.v. trên trang.

Các huy hiệu hiện được hỗ trợ trong FirefoxDevTools của được liệt kê trong Firefox tài liệu nguồn. Ví dụ: scroll huy hiệu cho biết phần tử có thể cuộn được. Nhấp vào huy hiệu sẽ làm nổi bật phần tử gây tràn với một overflow huy hiệu bên cạnh.

In Chromium trình duyệt, bạn có thể nhấp chuột phải vào bất kỳ nút nào và chọn “Cài đặt huy hiệu…” để mở một thùng chứa liệt kê tất cả các huy hiệu có sẵn. Ví dụ, các phần tử có scroll-snap-type sẽ có một scroll-snap huy hiệu bên cạnh, khi nhấp vào, sẽ chuyển đổi scroll-snap lớp phủ trên phần tử đó.

Chụp ảnh màn hình

Chúng tôi đã có thể chụp ảnh màn hình từ một số Công cụ dành cho nhà phát triển được một thời gian, nhưng tính năng này hiện có sẵn trong tất cả các Công cụ đó và bao gồm các cách mới để chụp ảnh toàn trang.

Quá trình bắt đầu bằng cách nhấp chuột phải vào nút DOM mà bạn muốn chụp. Sau đó, chọn tùy chọn để nắm bắt nút, được gắn nhãn khác nhau tùy thuộc vào DevTools bạn đang sử dụng.

Lặp lại các bước tương tự trên html node để chụp ảnh màn hình toàn trang. Tuy nhiên, khi bạn làm như vậy, điều đáng chú ý là Safari giữ lại độ trong suốt của màu nền của phần tử — Chromium và Firefox sẽ chụp nó dưới dạng nền trắng.

Có một lựa chọn khác! Bạn có thể chụp ảnh màn hình “phản hồi” của trang, cho phép bạn chụp trang ở chiều rộng khung nhìn cụ thể. Như bạn có thể mong đợi, mỗi trình duyệt có những cách khác nhau để đến đó.

• Chromium: Cmd + Shift + M (macOS) hoặc Ctrl + Shift + M (Các cửa sổ). Hoặc nhấp vào biểu tượng “Thiết bị” bên cạnh biểu tượng “Kiểm tra”.
• Firefox: Công cụ → Công cụ trình duyệt → “Chế độ thiết kế đáp ứng”
• Safari: Phát triển → “Vào Chế độ thiết kế đáp ứng”

Mẹo Chrome: Kiểm tra lớp trên cùng

Chrome cho phép bạn trực quan hóa và kiểm tra các thành phần lớp trên cùng, chẳng hạn như hộp thoại, cảnh báo hoặc phương thức. Khi một phần tử được thêm vào #top-layer, nó nhận được một top-layer huy hiệu bên cạnh, khi nhấp vào, huy hiệu này sẽ đưa bạn đến vùng chứa lớp trên cùng nằm ngay sau </html> tag.

Thứ tự của các phần tử trong top-layer container tuân theo thứ tự xếp chồng, có nghĩa là cái cuối cùng ở trên cùng. Nhấn vào reveal huy hiệu để nhảy trở lại nút.

Mẹo Firefox: Chuyển đến ID

Firefox liên kết phần tử tham chiếu thuộc tính ID với phần tử đích của nó trong cùng một DOM và làm nổi bật phần tử đó bằng một gạch chân. Sử dụng CMD + Click (macOS) hoặc CTRL + Click (Windows) ) để chuyển đến phần tử đích có mã định danh.

Kết thúc

Khá nhiều thứ, phải không? Thật tuyệt vời khi có một số tính năng DevTools cực kỳ hữu ích được hỗ trợ trong Chromium, Firefox và Safari. Có bất kỳ tính năng nào khác ít được biết đến hơn được hỗ trợ bởi cả ba tính năng mà bạn thích không?

Có một số tài nguyên mà tôi luôn theo sát để cập nhật những thông tin mới. Tôi nghĩ tôi muốn chia sẻ chúng ở đây:

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/