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

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

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

Ref

Nguồn: viblo.asia

Bài viết liên quan

Thay đổi Package Name của Android Studio dể dàng với plugin APR

Nếu bạn đang gặp khó khăn hoặc bế tắc trong việc thay đổi package name trong And

Lỗi không Update Meta_Value Khi thay thế hình ảnh cũ bằng hình ảnh mới trong WordPress

Mã dưới đây hoạt động tốt có 1 lỗi không update được postmeta ” meta_key=

Bài 1 – React Native DevOps các khái niệm và các cài đặt căn bản

Hướng dẫn setup jenkins agent để bắt đầu build mobile bằng jenkins cho devloper an t

Chuyển đổi từ monolith sang microservices qua ví dụ

1. Why microservices? Microservices là kiến trúc hệ thống phần mềm hướng dịch vụ,