Vài điều hay ho về Chrome DevTools
#DevTools
1
White

Văn Đức Thái viết ngày 06/05/2020

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
alt text

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
alt text
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, ...
alt text

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, ...
alt text

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
alt text

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 ><.
alt text
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
alt text

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.
alt text

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 ><
alt text
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
alt text
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
alt text

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 (。◕‿◕。)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Văn Đức Thái

22 bài viết.
109 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
29 18
1. Tản mạn ngoài lề (Ảnh) MySQL với DB thì có cái quần què gì chứ? Đọc thôi để thấy cũng vài cái hay ho và này nọ. 2. MySQL: MyISAM & InnoDB & ...
Văn Đức Thái viết hơn 2 năm trước
29 18
White
27 13
1. Tản mạn ngoài lề Khuya vật vã. Chẳng ngủ được. Mà chẳng biết làm gì giữa cái lúc dở dở ương ương này. Viết blog vậy :(. Bài viết dành cho các...
Văn Đức Thái viết hơn 2 năm trước
27 13
White
19 3
1. Tản mạn ngoài lề (Ảnh) Khi gặp một vấn đề trong cuộc sống bạn sẽ làm gì? Người yêu đá đít, cuối tháng hết tiền lương, sếp đì trên đi xuống, bl...
Văn Đức Thái viết hơn 2 năm trước
19 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
22 bài viết.
109 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!