Chatbox

Các bạn vui lòng dùng từ ngữ lịch sự và có văn hóa,sử dụng Tiếng Việt có dấu chuẩn. Chúc các bạn vui vẻ!
02/01/2023 17:01 # 1
buiducduong
Cấp độ: 22 - Kỹ năng: 1

Kinh nghiệm: 17/220 (8%)
Kĩ năng: 0/10 (0%)
Ngày gia nhập: 25/09/2020
Bài gởi: 2327
Được cảm ơn: 0
Mẹo sử dụng Chrome DevTools - Part 1 - 😊 (Series: Bí kíp Javascript - PHẦN 46)


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.😉

Ref




 
Copyright© Đại học Duy Tân 2010 - 2024