Hello Các bạn mình là Tôi Đi Code Dạo Hôm nay tụi mình sẽ tiếp tục tiết mục Code cùng Code dạo nha 😀 😀 Thì thay vì nói về code, mình sẽ nói về công cụ mà dân Web Developer rất hay dùng nha Chrome Developer Tools là công cụ rất là mạnh và hầu như dân Web developer như tụi mình ngày nào cũng đụng tới nó hết Nên hôm nay mình sẽ giới thiệu những chiêu trò, những trò hay ho các bạn có thể làm với nó trong công việc lập trình Web Có 1 vài trò hay ho mà các bạn không biết gì về lập trình cũng làm được luôn Do vậy mình sẽ chia làm 3 phần.
Phần đầu: Giới thiệu sơ về Chrome Developer Tools này Phần hai: Một số trò vui vui, bựa bựa mà các bạn không biết lập trình cũng có thể làm theo được Phần ba: Những trò, những kinh nghiệm khi dùng Chrome Developer Tools mà mình và các bạn lập trình viên hay dùng nha Ok nè, mình giới thiệu sơ về Chrome Developer Tool này tý nha Các bạn có thể mở bằng cách, trên Windows, các bạn có thể mở bằng tổ hợp phím Ctrl + Shift + I Còn nếu trên Mac thì dùng control + option + I Rồi nó sẽ mở Hoặc các bạn có thể click chuột phải vào 1 element, sau đó là chọn mục Inspect thì nó sẽ mở cửa sổ ra nha Đây là cái Tool mà dân developer ngày nào cũng đụng, ngày nào cũng xài.
Nhất là mấy bạn làm Web Nó có cái gì? Đầu tiên là những cửa sổ của nó.
Tab đầu tiên là Elements.
Nó là những Elements nằm trong trang Web này Ví dụ như mỗi ảnh là một Element nè Bên phải là những css thuộc tính của những tấm ảnh đó Mình thường dùng để tăng height ảnh lên chẳng hạn, hoặc width của ảnh lên chẳng hạn Đây là 1 số cái style mình có thể thêm vào Tiếp theo là cửa sổ Console.
Cửa này dùng để chạy Console để hiện các thông tin mà người ta in vào đây Ví dụ như trong source code có cái dòng Console.
Tức là code đã run thì cửa sổ Console nó sẽ hiện trong này Và cửa sổ Console này cũng là nơi để có thể mình viết code, mình nghịch ngợm, chỉnh sửa, chỉnh sửa cái trang này Ví dụ mình có thể cho toàn bộ cái hình biến mất chẳng hạn Viết code để cho nó biến mất, viết code để cho toàn bộ cái hình biến mất chẳng hạn.
Đó.
.
.
* dùng forEach* undefined Đó, bây giờ là toàn bộ hình biến mất rồi đó Mình có thể viết code để thay đổi trang web Phần Sources này tức là chứa source code của trang web đó thì cái này mình sẽ nói rõ thêm sau nhưng mà các bạn có thể hiểu những file JavaScript này nọ các bạn có thể xem source code của chúng ở trong này Chúng ta có thể xem code và sửa code trong này rất là tiện Phần này mình hay dùng để debug, tức là để kiểm tra lỗi, code có chạy đúng hay không Tiếp theo là phần Network.
Phần này thì không có gì hết nhưng mà mình refresh lại trang cho các bạn thấy nè Phần Network này nó sẽ hiển thị https:// request mà browser gửi tới server Các bạn có thể phân ra thành XHR tức là những AJAX call (cdn.
json) để lấy json nè JS tức là những file JavaScript được tải về CSS tức là những CSS được tải về Img tức là toàn bộ những cái ảnh được browser tải về từ server Đó, đây là những tab hay dùng Tiếp theo là 1 số tab như là Performance Đây là tab dùng để đánh giá code, xem code chạy chậm chỗ nào để sửa Memory cũng vậy, để tìm xem memory leak gì không để fix Application nó chứa những thứ như Local Storage.
Tức là thông tin browser lưu hoặc là cookie này Các bạn có thể vào để xóa Cookie hoặc là sửa Cookie gì đó Cái tab này lâu lâu mình cũng hay đụng tới Còn 2 tab Security với Audits mình đụng khá là ít Security thì check là HTTPS đúng không Audits này chỉ dùng để hiện, hoặc để chạy, đánh giá xem trang này được bao nhiêu điểm thôi Đó tóm lại đây là những cái tabs bọn mình hay dùng.
4 cái tabs thông dụng nhất như là Elements, Console, Source, Network Phần 2: mình sẽ chỉ các bạn các chiêu trò các bạn có thể dùng.
Nếu các bạn không biết lập trình cũng được thì các bạn có thể dùng cái Tool này để làm nha Nó sẽ rất là hay để lòe bạn bè.
Ok tụi mình tiếp tục nha Nếu các bạn không biết gì về lập trình thì các bạn có thể làm vài trò khá hay ho, khá là bựa Khi mà các bạn dùng Tool này, cửa sổ mình hay dùng nhiều nhất đó là Console Các bạn mở cửa sổ Console lên bằng cách mình đã giới thiệu.
Ctrl + Shift + I hoặc MAC (Control + option + I) Khuyến cáo chút các bạn làm thì phải biết mình làm gì nha Facebook cũng cảnh báo nè.
Tại vì nhiều người bị lừa quá.
Người ta cũng ghi là dán vào đây, bật tính năng để hack gì đó Các bạn phải cẩn thận, phải biết làm mình dán cái gì vào.
Các bạn đừng có nghe người ta rồi các bạn làm theo lung tung thì rất là dễ chết người nha Tại vì dòng code trong này nó có thể kiểm soát được trình duyệt của các bạn luôn đó.
Các bạn phải cẩn thận!! Một trong những chiêu trò dễ dàng nhất cho dân ngoại đạo đó là document.
designMode = 'on' Chiêu này sẽ mở 1 design mode trong trang web của bạn Bây giờ các bạn có thể thoải mái sửa những dòng này lại (dòng mình trỏ chuột) design mode có gì hay.
.
các bạn có thể sửa hầu như toàn bộ các text trong trang web Vd: chỗ này sửa thành codedao_deom (nhìn chỗ giới thiệu nhé) hoặc các bạn có thể vào thẳng, sửa 1 cái status Vd: như sửa status này thành :” Các bạn nhớ bấm like và Sub sờ cờ rai cho anh code dạo nha” v.
v.
.
.
Chỗ đây có thể sửa thành Ngọc Trinh (Fan Cuồng Code Dạo) Đó là 1 chiêu khá hay.
Cái này thì nó có vài cái nhược điểm đó là hơi khó để chỉnh link và chỉnh ảnh Nếu các bạn biết về HTML thì chỉnh dễ hơn.
Vd: đây là tấm hình của Ngọc Trinh đúng không? Thì nó là 1 thẻ a có ảnh thì thay vì để ảnh này, mình có thể đổi thành ảnh Tôi đi code dạo sau đó bỏ qua đây, sửa cái source này lại Các bạn sẽ được một cái giống giống cái này Được 1 cái giống thế này thì các bạn có thể khoe Tương tự, các bạn cũng có thể dễ dàng sửa text mấy cái chat của bạn bè.
Do vậy đừng có tin nha Vd: mình có thể sửa text này lại Do vậy đừng nên tin những cái Screenshot vì Screenshot rất dễ chỉnh sửa nha Những cái đó là chiêu cơ bản nhất Chiêu thứ 2 mình hay dùng đó là vào Tab Network nè Nó sẽ hiển thị những cái request từ client tới server nè các bạn có thể lọc bằng tab img nè các bạn sẽ thấy đây là toàn bộ ảnh được tải về các bạn có thể tìm xem những ảnh chất lượng cao thì xem cũng khá là tiện chức năng này cũng có thể lấy được uil full của ảnh không cần phải chuột phải rồi bấm download nữa OK, nãy giờ mình giới thiệu cho các bạn ít biết về lập trình Còn bây giờ là cho những bạn biết về lập trình, hay dùng kinh nghiệm với Developer Tool này mà mình hay dùng nha Đầu tiên là những kinh nghiệm khi mà mình hay xài khi mà ở cái tab Elements này nè Thì cái tab này cho mình chọn những Elements trong một trang web thì các bạn có thể bấm cái inspect tool và chọn một cái element Thì cái tool này khá mạnh, khi các bạn call element nó sẽ cho các bạn biết color gì, background gì, css như thế nào luôn Cái tool này rất là tiện khi các bạn cần viết Front-end Giả sử như là mình chọn cái dice này mình dùng cái tool để tăng số lượng của nó lên trong class đó, sau này chỉ cần sửa trong code là ok Tiếp theo là có những cái như mình phải hover lên 1 cái nút thì mình mới coi được css Ở đây mình dùng cái này, chọn :hover bấm hover hoặc là bấm active, hoặc là active, focus thì nó sẽ hiển thị trạng thái của button đó với trạng thái khi mà đã được focus hoặc active.
v.
v.
.
.
.
Một cái nữa cũng khá hay đó là khi mà bạn xem trang web, bạn thấy màu rất là đẹp Bạn không biết làm sao để lấy để bỏ vô code thì các bạn có thể bấm vào màu bất kỳ Nó sẽ có 1 cái cửa sổ để bạn chọn color picker này các bạn nhấp vào color picker rồi bấm vào màu mình cần lấy, thì các bạn có 1 cái mã HEX để các bạn bỏ vào code nè Đó các bạn thấy tiện ghê chưa Đó là khi các bạn muốn làm web, khi các bạn làm thì đôi khi các bạn cần, muốn cái web mình trên mobile nó chạy ra sao thì các bạn bấm vào đây nè Toggle Device thì nó sẽ hiển thị code của bạn trên web ví dụ như google, pixel, hoặc trên iPhone hiển thị ra sao hoặc là trên iPad nó hiển thị ra sao, rất là tiện Và cũng có 1 cái tool mà mình hay xài trên này no throttling trên này Bây giờ viết JavaScript nhiều sẽ khá là nặng nên các bạn có thể throttling thì các bạn có thể chọn cho cái máy yếu đi một tý Tại vì các bạn đang chạy trên này chạy bằng Laptop, CPU rất là mạnh nhưng nhiều khi, các bạn muốn thử mấy cái máy yếu yếu như máy cùi nó chạy code của mình nổi không thì các bạn chọn cái này để giảm lưu lượng mạng của cái máy xuống giảm tốc độ xử lý của cái máy để cho nó chạy coi nó chậm cỡ nào một cái nữa mình cũng hay làm, bên Tab Network nó cũng có no throttling.
các bạn có thể chọn Fast 3G hoặc là Slow 3G để các bạn xem khi mà chạy bằng 3G chậm hay là 3G nhanh thì để xem cái trang của mình là load chậm hay load nhanh Đó các bạn thấy không, mình để 3G chậm cái là nó load cái hình lâu chết bà luôn Các bạn có thể để vậy để biết là trang web của mình có nặng hay không nha OK, đó là cái tab Elements Tiếp theo đó là tab Source Tức là Source Code thì tab này các bạn có thể dùng nhiều để các bạn debug cách mình hay dùng đó là các bạn gõ Control + P thì nó sẽ hiển thị các file Vd như mình muốn test Store trên này thì mình sẽ gõ Store nè, mình sẽ thấy Source code của cái đó nè Sau đó mình sẽ đặt debugger bằng cách đặt debugger vào đây luôn Đó tiện không Hoặc là mình muốn tới line 100, mình cũng cứ Control + P gõ 100 thì nó cũng đi tới line 100 của cái code này luôn mình có thể biết line nào có lỗi thì mình đặt debugger ngay đây luôn Debugger là cái tool khá hay.
Nếu các bạn nào chưa biết debugger thì khi mà cái code chạy tới đó thì nó sẽ dừng Ví dụ như khi mình đặt Debugger ở đây chẳng hạn thì mình refresh lại trang nè thì Debugger sẽ dừng ở đây để mình biết lúc này cái element giá trị của nó là bao nhiêu, value của nó là bao nhiêu thì mình có thể chạy tiếp từng dòng code một chẳng hạn để mình coi là code mình chạy có đúng không.
Đó, nó tiện không 😀 Ngoài ra khi bạn code rối quá, không biết đặt Debugger ở đâu thì các bạn mở code lên nè VD như mình mở cái file Store lên Mình có thể đặt Debugger chẳng hạn, thì mình chỉ cần viết 1 hàm có lệnh debugger; rồi save lại Thì mình refresh lại (à khỏi cần, của mình Auto refresh) Đó, thì Debugger sẽ được đặt ngay tại dòng lệnh đó luôn Mình khỏi cần đặt trong này.
Đặt trong này thì các bạn có thể Toggle tới lui được Nhưng mà đặt trong này, các bạn có thể không cần biết source code đâu, nó sẽ tự chạy tới line đó luôn Ngoài ra còn có 1 cái khá hay là các bạn có thể search toàn bộ Source code luôn Các bạn có thể dùng IDE ở trong Chrome cũng hỗ trợ luôn.
Các bạn bấm Ctrl +Shift+F hoặc trong mac thì control + option + F Thì các bạn có thể search như là mình tìm dice.
Nó sẽ tìm trong này.
Khá là lâu.
Nó sẽ tìm những line nào có chứ dice nè để nó hiện cho mình Tool này khá tiện, thường mình hay search trong IDE hơn Lâu lâu bí quá search trong này cũng được Đó, tiếp theo là tab Console.
Đây là tab để mình có thể chạy JavaScript.
Ở trong này mình làm đủ trò hết Mình giới thiệu một số cái tricks mà mình hay dùng thôi Vd: thường các bạn hay code bằng cách console.
log code bình thường thôi.
các bạn có thể console.
info.
hoặc là console.
debug.
Thì tại sao lại có nhi cấp độ log như thế này thì ở đây này các bạn thấy Default Level nè các bạn có thể bấm debug thì nó sẽ show những debug luôn còn các bạn kiu tao chỉ muốn coi những cái warnning hoặc info thôi thì các bạn thấy không thì console.
log sẽ không hiện Những cái nào là console.
warning thì nó mới hiện Cái này dùng khi các bạn test, các bạn muốn coi toàn bộ log nhưng mà khi các bạn tìm lỗi các bạn chỉ muốn coi error hoặc warning thì các bạn có thể dùng cái này Cái này cũng khá là hay Tiếp theo lâu lâu các bạn refresh cái trang mấy cái log này sẽ mấy hết, rất là bực mình Thì ở đây có 1 chức năng cho phép các bạn Preserve Log Tức là các bạn log rồi á, log bao nhiêu lần các bạn refresh trang bao nhiêu lần thì nó vẫn còn cái log này giờ mình refresh trang Đó, log này của mình nó vẫn còn nè.
Nó không có mất.
Thì đó cũng là một cái của mình khá hay dùng Tiếp theo, nếu các bạn vào Facebook nó có chữ màu đỏ đỏ Thì làm sao để làm cái đó? Thì cũng dễ thôi, các bạn vẫn console.
log như thường nhưng mà các bạn thêm %c vào các bạn để nội dung anh Hoàng đẹp trai chẳng hạn thì phía trước là nội dung, phía sau là style các bạn để chữ trắng, nền xanh nha thì nó sẽ hiện thị là Anhhoangdeptrai, padding là 5, nền xanh nè Thì các bạn muốn trong log có thêm màu mè các bạn thêm %c vào, rồi thêm cái CSS đằng sau là được Một cái chiêu trò hay đó là log thì các bạn nên log nguyên object vào luôn Ví dụ như trong này nha, mình muốn log cái store chẳng hạn.
Muốn log thì các bạn cứ đặt debugger để log Cái này là debugger tức là các bạn Edit breakpoint các bạn có thể log, khi tới dòng này, nó không có dừng lại nha nó chỉ log (logpoint) thôi các bạn cứ log là diceRollSound là được thì nó cũng sẽ ra ví dụ mình refresh lại cái trang nè thì nó cũng chỉ có 1 cái object đó nhưng mà các bạn nên log toàn bộ cái object đó thì nó sẽ log được tên biến và thấy được giá trị của biến thì nó sẽ tiện hơn nhiều Giả sử như mình đổi lại là mình log toàn bộ tên biến object đó thì khi mình refresh lại nè Đó các bạn thấy không, nó log 1 cái object thì object này nó tiện hơn vì biết biến này tên là gì và nội dung trong biến có gì luôn Đó, nhắc object mới nhớ thì thường thường các bạn log object thì cũng không sao, nhưng có 1 cách khá hay để log object Các bạn tạo 1 object tên là Hoàng, đúng không (từ đoạn này mình sẽ không sub để các bạn theo dõi màn hình không bị che) Sau một clip ngắn ngắn mình đã chỉ cho các bạn những cái chiêu trò hay , những cái kinh nghiệm mà mình hay dùng khi làm việc với Chrome Developer Tool rồi đó thì các bạn thấy clip có dễ hiểu không, các bạn cảm thấy có quá khó so với các bạn không Các bạn muốn làm những clip khó hơn nữa thì cứ comment cho mình biết nha thì nói chung mình sẽ làm theo yêu cầu.
tức là các bạn cảm thấy nó dễ quá thì mình sẽ tăng độ khó của nó lên còn các bạn có cảm giác khó quá thì mình sẽ làm chậm lại, giảm độ khó cho các bạn dễ tìm hiểu còn cái vụ JavaScript thì có vẻ có nhiều bạn ủng hộ nên mình sẽ sắp thời gian nếu mà mình có hứng thì mình sẽ làm phần 2 Ok cảm ơn các bạn nhiều nhớ like và sub cho mình nha.
góc dưới này nè hoặc góc trên này nè.
nhớ bấm cái chuông nữa nha.
bye bye mọi người, hẹn gặp lại thứ 3 tuần sau ^o^/.
