Hướng dẫn sử dụng dev tools cơ bản

Trong khuôn khổ bài viết này chúng ta cùng nhau đi tìm hiểu những cách dùng cơ bản nhất, và làm quen với Chrome DevTools nhé. Bắt đầu thôi nào

Cách mở Developer Tools trên Chrome

Với hệ điều hành Windows , bạn mở website bạn đang làm bằng Chrome và click chuột phải vào bất kỳ đâu trên trang và chọn vào dòng Kiểm tra lập tức Chrome DevTools sẽ hiện ra.

 devtool

Trong hình mình có khoanh vùng và đánh số thành 3 vùng chính mà chúng ta hay dùng nhất, khu vực màu đỏ là nơi sẽ hiện thị tất cả các thẻ HTML, ở trên trình soạn thảo mã chúng ta viết như thế nào thì ở đây sẽ hiện thị như thế. Khi hơ chuột vào thẻ nào ở trong vùng này Dev Tools sẽ hightline phần tử đó lên trên trang cho chúng ta thấy. Khi click vào thẻ chúng ta sẽ chuyển qua khoanh vùng màu xanh.

khung xanh sẽ là nơi hiện thị các thuộc tính css mà thẻ đó đang được áp dụng, chúng ta có thể click vào các dòng css này và chỉnh sửa 1 cách trực tiếp luôn, rất tiện nhé và chúng ta cũng rất hay làm cách này. Lưu ý là khi chúng ta chỉnh sửa xong mà reload lại trang thì những gì chúng ta vừa chỉnh sửa sẽ bị mất đi, khi chỉnh sửa đã xong rồi chúng ta nên coppy lại và viết vào file css nhé. Phía trên cùng khung xanh là các tab chuyển đổi cho chúng ta nhìn trực quan hơn , chúng ta thử chuyển qua tab computer xem như nào .

 devtools

Nhìn rất trực quan và chúng ta có thể click vào các con số để chỉnh sửa luôn các màu sắc được dev tools thể hiện cho mỗi thuộc tính css mà thẻ đó đang áp dụng. Sau này khi đã thành thạo hơn chúng ta cũng ít hay dùng tab này vì khi đã quen chúng ta sẽ mường tượng ra được trong đầu vị trí và các thuộc tính css của thẻ đó. Các tab còn lại trong vùng xanh mình hầu như rất ít dùng đến. Khi dùng css chúng ta rất hay sử dụng thuộc tính hover cho 1 phần tử nào đó và số 4 mình đánh dấu là nơi khi mình click vào đó thì các đoạn mã css khi hover vào phần tử đó mới hiện ra để chúng ta thấy và chỉnh sửa. Và phần số 5 là phần khá quan trọng là nơi mình biết được thẻ đó đang được thừa hưởng những thuộc tính css nào từ thẻ cha.

Vùng vàng là nơi chúng ta chuyển qua chuyển lại giữa các tab của dev tools tab console là nơi hiện thị những thông báo của chúng ta hoặc của trình duyệt khi thực thi file javascript . Nếu bạn học javascript thì chắn chắn bạn sẽ dùng tab này rất thường xuyên. Sources đúng như tên của nó tab này là nơi hiện thị những tài nguyên của trang, hay các tài nguyên mà trang đang dùng, khi link 1 file css file js chúng ta hãy vào tab này để kiểm tra xem chúng ta đã nhúng được file đó vào trang chưa nhé . Các tab còn lại như Network application được dùng rất nhiều trong lập trình phía Backend chúng ta sẽ trở lại các tab này trong phần backend nhé.

Mặc định dev tools khi được mở sẽ nằm ngang như ảnh phía trên, để thuận tiện và có nhiều không gian làm việc hơn, dễ quan sát và điều chỉnh hơn thì khi click vào số 3 trên ảnh chúng ta sẽ có thể chọn lựa cho mình cách nhìn vị trí các khung màu sao thuận tiện nhất. Số 1 đây là nơi giúp chúng chọn nhanh phần tử mà chúng ta muốn, như trong ảnh mình click vào và chọn phần tử Là nơi tôi chia sẻ mọi thứ tôi biết để làm nên blog này thì phần tử này sẽ hightline lên cho chúng ta cái nhìn trực quan hơn, khi muốn tắt chức năng này chúng ta chỉ việc click vào nó 1 lần nữa. Số 2 là nơi chúng ta chuyển qua xem trang của chúng ta trên các thiết bị khác như mobile, tablet, ... chúng ta sẽ dùng nhiều phần này ở lúc thiết kế responsive.

Kết lại

Trên đây là những gì khái quát nhất về cách sử dụng Chrome DevTools hi vọng bạn thích và có được chút gì đó về Chrome Devtools. Trong Chrome DevTools còn khá là nhiều chức năng nữa khi nào có bài viết liên quan mình sẽ chia sẻ cùng các bạn, bạn có ý kiến gì về bài viết này hãy để lại comment bên dưới cho mình nhé. Cảm ơn bạn đã đọc, chúc bạn thành công.

Tag: CSS