Danh sách các mẹo và thủ thuật thú vị dành cho Chrome DevTools

Công cụ dành cho nhà phát triển của Chrome cung cấp một bộ công cụ tuyệt vời để giúp bạn phát triển trên nền tảng Web. Dưới đây là một số mẹo có thể bạn chưa biết

Kiểm tratổng quan về Chrome DevToolsnếu bạn là người mới với họ

Kéo và thả trong bảng Elements

Trong bảng Phần tử, bạn có thể kéo và thả bất kỳ phần tử HTML nào và thay đổi vị trí của phần tử đó trên toàn trang

Drag and Drop in the Elements Panel

Tham chiếu phần tử hiện được chọn trong Bảng điều khiển

Chọn một nút trong bảng Thành phần và nhập$0trong bảng điều khiển để tham chiếu nó.

Reference elements in the Console

Mẹo: nếu bạn đang sử dụng jQuery, bạn có thể nhập$($0)để truy cập API jQuery trên phần tử này.

Sử dụng giá trị của thao tác cuối cùng trong Bảng điều khiển

Sử dụng$_để tham chiếu giá trị trả về của thao tác trước đó được thực thi trong Bảng điều khiển

Use the last result

Thêm CSS và chỉnh sửa trạng thái phần tử

Trong bảng Elements có 2 nút siêu hữu ích.

Đầu tiên cho phép bạn thêm một thuộc tính CSS mới, với bất kỳ bộ chọn nào bạn muốn nhưng điền trước phần tử hiện được chọn:

Add a CSS rule

Cái thứ hai cho phép bạn kích hoạt trạng thái cho phần tử đã chọn, vì vậy bạn có thể thấy các kiểu được áp dụng khi nó hoạt động, di chuột qua, trên tiêu điểm.

Element state

Tìm nơi xác định thuộc tính CSS

cmd-click(ctrl-clicktrên Windows) thuộc tính CSS trong bảng Elements, DevTools sẽ chỉ bạn đến nơi được xác định, trong bảng Nguồn

Find where a CSS property is defined

Lưu vào tệp CSS đã sửa đổi

Nhấp vào tên của tệp CSS mà bạn đã chỉnh sửa. Người kiểm tra mở nó vào ngăn Nguồn và từ đó bạn có thể lưu nó với các chỉnh sửa trực tiếp mà bạn đã áp dụng.

Thủ thuật này không hoạt động đối với các bộ chọn mới được thêm vào bằng cách sử dụng + hoặc vào các thuộc tính element.style, nhưng chỉ dành cho các bộ chọn hiện có, đã sửa đổi.

Save to File the modified CSS

Ảnh chụp màn hình một phần tử duy nhất

Chọn một phần tử và nhấncmd-shift-p(hoặc làctrl-shift-ptrong Windows) để mở Menu Lệnh và chọnChụp ảnh màn hình nút

Screenshot a single element

Tìm một phần tử bằng bộ chọn CSS

Épcmd-f(ctrl-ftrong Windows) mở hộp tìm kiếm trong bảng Elements.

Bạn có thể nhập bất kỳ chuỗi nào vào đó để khớp với mã nguồn hoặc bạn cũng có thể sử dụng bộ chọn CSS để Chrome tạo hình ảnh cho bạn:

Find an element using CSS selectors

Shift-enter trong Bảng điều khiển

Để viết các lệnh kéo dài trên nhiều dòng trong Bảng điều khiển, hãy nhấnshift-enter.

Khi bạn đã sẵn sàng, hãy nhấn enter ở cuối tập lệnh để thực thi:

Shift-enter in the Console

Xóa bảng điều khiển

Bạn có thể xóa bảng điều khiển bằng cách sử dụngThông thoángở trên cùng bên trái của bảng điều khiển hoặc bằng cách nhấnctrl-lhoặc làcmd-k.

Đi đến…

Trong bảng Nguồn:

cmd-o(ctrl-otrong Windows), hiển thị tất cả các tệp được tải bởi trang của bạn.
cmd-shift-o(ctrl-shift-otrong Windows) hiển thị các ký hiệu (thuộc tính, chức năng, lớp) trong tệp hiện tại.
ctrl-gđi đến một dòng cụ thể.

Files list

Xem biểu thức

Thay vì viết đi viết lại một tên biến hoặc một biểu thức mà bạn sẽ kiểm tra rất nhiều trong phiên gỡ lỗi, hãy thêm nó vàoXem biểu thứcdanh sách.

Watch Expressions

Gỡ lỗi XHR / Tìm nạp

Từ trình gỡ lỗi, mởXHR / Fetch Breakpointsbảng điều khiển.

Bạn có thể đặt nó để phá vỡ bất kỳ lúc nàoXHR/Tìm nạpcuộc gọi được gửi hoặc chỉ trên những cuộc gọi cụ thể:

XHR and Fetch debugging

Gỡ lỗi khi sửa đổi DOM

Nhấp chuột phải vào một phần tử và bậtPhá vỡ các sửa đổi trên cây con: bất cứ khi nào một tập lệnh đi ngang qua phần tử con đó và sửa đổi chúng, trình gỡ lỗi sẽ tự động dừng lại để cho phép bạn kiểm tra những gì đang xảy ra.

Debug on DOM modifications