Blog#63: Mẹo sử dụng Chrome DevTools - Part 1 - 😊 (Series: Bí kíp Javascript - PHẦN 46)

image.png

Ok như thường lệ lại là mình Tuấn đây,

Hôm nay OT sấp mặt, giờ cũng khuya rồi nên mình cùng nhau lướt nhanh qua một số Tips sử dụng Chrome DevTools nhé.

Chụp màn hình

AE nào đang làm Outsourcing cho FPT, Rikkei,... các kiểu! 1 ngày chụp cả trăm bức evidence thì đây đúng là Típ hay. (Tất nhiên có ae nhiều ae đang xài tool nhưng sao mà ngầu bằng Chrome DevTools được 😂... Cmd + shift + P gõ cạch cạch enter là xong)

Chức năng chụp toàn màn hình

Mở DevTools máy Mac thì click chuột phải chọn Inspect

Screenshot 2022-12-12 at 23.30.34.png

Tiếp theo góc bên trái chọn 3 chấm sau đó chọn Run command (Hoặc nhấn tổ hợp phím: Cmd + shift + P)

Screenshot 2022-12-12 at 23.30.17.png

Gõ chứ 'screen' nó sẽ hiện một số chức năng như sau Chọn chức năng Capture full size screenshot

Screenshot 2022-12-12 at 23.33.44.png

Kết quả sẽ như hình bên dưới

viblo.asia_u_Clarence161095 (3).png

Chức năng chụp một Element bất kỳ

Tại Elements Panel chọn vào Element bạn muốn chụp Ở đây mình muộn chụp thẻ <header> mình click chọn vào nó

Screenshot 2022-12-12 at 23.35.35.png

Sau mở Run command hoặc nhấn phím tắt Cmd + shift + P gõ 'screen'

Screenshot 2022-12-12 at 23.38.15.png

Chọn vào Capture node screenshot -> ta da đây chính là kết quả

Capture node screenshot

Tương tự thì Run Comand có rất nhiều hàm có sẵn hay ho

Phần này ae tự khám phá nhé nhiều lắm...

Tham chiếu tới một biến trong console panel

Ngồi buồn buồn dùng console tính toán xem tiền bạc cuối năm thế nào.... Giới thiệu ae một biến magic: $_ nó tham chiếu tới kết quả chuối cùng của ae

Screenshot 2022-12-12 at 23.50.54.png

Thử một ví dụ khác xem nào:

Screenshot 2022-12-12 at 23.54.46.png

Tất nhiên là nó có thể refer tới bất cứ thứ gì chúng ta mới thực thi. Điều này có nghĩa có sẽ là kết quả excute cuối cùng của callStack (maybe 🤣)

Screenshot 2022-12-13 at 00.08.13.png

Kết luận

Chuỗi bài về các mẹo sử dụng Chrome DevTools còn rất dài nên hôm này dừng lại đây thôi.

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

NGUYỄN ANH TUẤN

Xin chào, mình là Tuấn, một kỹ sư phần mềm đang làm việc tại Tokyo. Đây là blog cá nhân nơi mình chia sẻ kiến thức và kinh nghiệm trong quá trình phát triển bản thân. Hy vọng blog sẽ là nguồn cảm hứng và động lực cho các bạn. Hãy cùng mình học hỏi và trưởng thành mỗi ngày nhé!

Đăng nhận xét

Mới hơn Cũ hơn