[Javascript] 9 bí kiếp xịn xò của Chrome Dev Tools có thể bạn chưa biết?

Là dân lập trình web không thể nào không biết đến Chrome Dev Tools nhưng bạn đã tận dụng nó đến mức độ nào?

Thường mình hay sử dụng tab Elements để xem các thành phần của web, chỉnh sửa css cho nó. Dùng tab Console để thử thực thi một số câu lệnh hoặc kiểm tra biến. Dùng tab Network để kiếm những APIs mà web đó đang gọi. Dùng tab Sources để debug source code.

Cơ bản thì vòng vòng là nhiêu đó là đủ xài nhưng hôm nay mình xin chia sẻ thêm 1 số bí kiếp nâng cao khá hay ho của Chrome Dev Tools giúp mình làm việc chuyên nghiệp, hiệu quả hơn. Hãy lướt xuống để cùng mình khám phá xem có bí kiếp nào bạn chưa biết thì hãy gom lụm về cho bản thân mình nhe!

Trước khi bắt đầu thì mình muốn giới thiệu trước về menu Command. Với menu này thì Chrome cho phép mình thực thi vô số câu lệnh. Chẳng hạn nhiều khi bạn muốn mở gì đó mà phải ngồi mò xem cái cài đặt đó nằm ở đâu thì mình cứ việc vô đây gõ rồi thực thi.

Để mở menu này thì ở màn hình Dev tools, mình chọn vào menu -> chọn Run command

Screenshots

Nào giờ để chụp màn hình của trang web, chúng ta cứ hay phải dùng trình chụp ảnh màn hình hoặc là một cái ứng dụng nào đó. Rồi giả sử như khi bắt bug, bạn cần chụp cái chỗ nào đó mà nó dài quá, ko nằm vừa trong màn hình cái chúng ta phải chụp từng tấm ảnh rồi ngồi ghép nó lại. Ây chà, hơi mất thời gian nhỉ… bạn có biết Chrome dev tools cũng hỗ trợ cho bạn cả việc này ko? Nó cho phép chúng ta chụp hình cả một trang web luôn. Thậm chí nó còn chụp được cả những nội dung bị ẩn hoặc cụ thể một element nào đó của trang web nữa.

Ví dụ bây giờ mình vô trang GitHub của mình, mở menu Command lên rồi gõ Capture full size screenshot là nó tự chụp rồi tải nguyên tấm hình này về luôn nè

Đó, ghê hơm ghê hơm?!?!?? Rồi, trường hợp bạn chỉ muốn chụp một DOM element nào đó thôi tại mình muốn tập trung vào report bug cho 1 khu vực nào đó của trang web thì mình sẽ chọn vào element đó ở tab Elements rồi sau đó dùng Command gõ Capture node screenshot là được 😀

Sử dụng kết quả vừa trả ra

Giả sử nhiều khi trong quá trình debug ở màn hình Console, mình muốn dùng kết quả trả ra của một phép toán hay một hàm nào đó để thực hiện câu lệnh kế tiếp. Chúng ta sẽ làm thế nào?

Khai báo một biến cho nó chẳng hạn như var sum = 2 + 2 rồi gọi tên biến sum đó ra chăng?

Ồ không, chúng ta có thể sử dụng cú pháp $_ để gọi kết quả vừa trả ra đó

Gọi lại XHR request

Thường để gọi lại API request, chúng ta sẽ refresh lại trang web nhưng ở đây chúng ta có thể gọi lại bằng cách mở tab Network -> chọn mục XHR -> tìm tới request mình cần gọi -> click chuột phải và chọn Replay XHR là xong.

Theo dõi trạng thái tải trang

Để theo dõi từng phẩn tử của trang web đã được load trong bao lâu, chúng ta có thể xem bằng cách vào mục Network -> chọn Capture screenshots. Lúc này Chrome sẽ ghi nhận lại từng frame với thời gian tải tương ứng. Nếu bạn không thấy tuỳ chọn Capture screenshots thì hãy bấm vào icon settings bên góc để mở ra danh sách tuỳ chọn này.

Copy biến

Ví dụ như chúng ta vừa có được kết quả của 1 biến nào đó là 1 JSON object. Làm sao chúng ta có thể copy JSON đó ra? Cứ tô chọn rồi copy bình thường thôi? Ở đây Chrome có hỗ trợ một cách đơn giản đó là gõ copy(<tên biến cần copy>) là được. Lúc này bạn cứ dán ra notepad hay đâu đó bình thường.

Table object array

Giả sử chúng ta có một cái mảng object như sau:

let users = [{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]

Nếu trường hợp ít data như vầy, chúng ta có thể mở từng phần tử ra để xem dữ liệu bên trong của từng phần tử. Nhưng nếu nhiều data quá thì sao? Chrome có hỗ trợ cho chúng ta một câu lệnh biến những dữ liệu này xuất hiện ở dạng bảng. Để làm được việc đó bạn chỉ việc gõ table(<tên biến>) là được

Truy cập phần tử đang chọn ở màn hình Console

Để gọi một phần tử nào đó trong màn hình Console, chúng ta chỉ việc chọn phần tử đó ở Elements tab sau đó qua tab Console gõ cú pháp $0 là Chrome sẽ hiển thị phần tử đang được chọn cho chúng ta.

Ẩn một phần tử bằng phím tắt

Trong quá trình đang tương tác với các phần tử trong trang web, giả sử chúng ta muốn ẩn đi một phần tử nào đó. Ngoài cách gõ display: none trong CSS ra chúng ta còn có thể nhấn trực tiếp phím H trên bàn phím là phần tử đó sẽ tự động được ẩn đi

Lưu DOM vào biến tạm toàn cục

Giả sử chúng ta cần lưu DOM vào một biến nào đó phục vụ cho việc nháp trước một bài toán gì đó. Chúng ta có thể chọn một phần tử -> click chuột phải -> chọn Store as global variable là Chrome sẽ tự động lưu DOM đó vào một biến temp1 chẳng hạn. Rồi cứ chọn thêm DOM khác để lưu thì nó sẽ tự gán cho một biến khác là temp2 chẳng hạn.

Hy vọng bài viết của mình cung cấp thêm cho bạn 1 số mẹo hữu ích mới. Nếu bạn còn mẹo gì hay hấp dẫn nữa thì comment chia sẻ với mình với nha! ^^