Devtool là gì

1. Vào đề ngoài lề

Là một dev chắc hẳn ai cũng đã từng vào Chrome DevTools. Vọc vạch vài thứ hay ho, nhất là mấy ông DevWeb, sửa CSS, thêm màu mè, thêm từng pixel trên màn hình cho đẹp rồi mới chạy vào code mà sửa, cũng hay - nhanh, gọn, tiện

2. Chrome DevTools có cái khỉ gì

Để sử dụng thì Chuột phải -> Inspect hoặc nhanh hơn là Ctrl + Shift + I

Thường thì mình hay vọc vạch trong mấy cái chính
a. Elements: Hiển thị các elements của web, có thể sửa css, chỉnh text các element.
b. Console: Nơi có thể thêm mấy đoạn code javascript để thay đổi web chơi chơi.
c. Sources: Nơi chứa source code của web, có thể debug dễ dàng.
d. Network: hiển thị ra các https request mà brower gửi tới server, cụ thể hơn

• XHR: là đối tượng XMLHttpRequest trong AJAX để lấy json.
• JS: tức là những file javascript được tải về.
• CSS: tức là những file CSS được tải về.
• Img: tức là những image được tải về.

Ngoài ra thì Performance là tab để đánh giá code xem code chạy nhanh hay chậm chỗ nào để sửa, Memory cũng tương tự vậy.
Application nơi chứa các local storage và cookie.

3. Vài điều hay ho về Chrome DevTools

1. Select Element

Bằng cách bấm cái hình mũi tên, hoặc là Crtl+Schift+C thì sẽ chọn được element chính xác dựa vào di chuột trên màn hình, cái hay là nó show ra được dùng thẻ gì, color chi, font thế nào, ...

2. hover và focus

Việc này mình hay dùng khi muốn chỉnh màu hay hiệu ứng cho các trường hợp di chuyển chuột qua element hay click, ...

3. Color picker

Vào bên Styles chọn phần color. Giờ nếu ưng cái màu nào trên web thì chọn vào hình cái bút rồi di vào đó là lấy được màu, khá tiện

4. Test web chạy với tốc độ rùa bò thế nào.

Mạng ngon nghé, điện thoại hịn thì không sao, bạn đã từng nghĩ đến việc đối ứng cho những máy cùi, điện thoại đểu hay là mạng cá mập cắn chưa, sẽ hữu ích nếu chúng ta test trước. Thường sẽ xảy ra trên điện thoại nên trước hết tìm hiểu phiên bản điện thoại trước.
Hiện nay việc phải responsive đối ứng cho các dòng điện thoại, tablet là cần thiết. Chúng ta chọn cái hình điện thoại hoặc Ctrl+Shift+M, có thể chọn tùy ý các dòng điện thoại như Iphone, LG, ...
Có thể test máy cùi mạng chậm ở các chế độ Mid-tier Mobile cho đt tầm trung, hay Low-end Mobile cho đt cùi, mạng 2G hoặc căng là 3G, còn chọn Offline thì xác định =)). Việc test các trường hợp này là khá cần thiết vì không ai cũng giàu như bạn ><.

Ngoài ra thì bạn có thể test web như thế nào nếu mạng chậm bằng cách vào Network

5. Console lòe bạn bè

Bạn bấm document.designMode='on', thế là giờ tha hồ chỉnh sửa text, ảnh, bla bla. Rồi mà tự sướng.
Tất nhiên việc này khá nguy hiểm vì facebook có thể lần được ip của bạn, cho nên hãy biết mình đang làm gì, đừng console lung tung là được.

6. Preserve log

Preserve log là một tính năng hữu ích khác để giữ log / console output của bạn không bị xóa khi bạn chuyển sang các trang khác nhau. Tránh được việc đang log hăng say tự nhiên reload trang rồi mất tiêu ><

7. console.log và phần còn lại

Không phải console.log mà ngoài ra còn có rất nhiều cái khác như console.warn console.error console.table, ...
Dễ nhìn, dễ phân biệt là ưu điểm của nhưng phần như console.warn console.error console.table

8. Screenshot

Ctrl + Shift + P sau đó nhập 'screenshot'. Có khả nhiều lựa chọn như fullsize, chọn vùng screenshot,... Khá tiện

3. Lời kết

Trên đây là một số trick nhỏ khi sử dụng Chrome DevTools. Còn cái nào hay hay mn comment nhé.

Bài Bái

(｡｡) NyLaa (｡｡)