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 >