hướng dẫn sử dụng google developer tool

Hướng dẫn sử dụng Google Developer Tool chi tiết dễ hiểu11 phút đọc

Một trong những công cụ đầu tiên khi mình đi làm mà mình buộc phải sử dụng thành thạo đó chính là Google Developer Tool.

Sử dụng Google Developer Tool có lẽ đã trở nên khá quen thuộc với nhiều lập trình viên website.Tuy nhiên với những bạn mới thì chắc đây vẫn là một công cụ mới cần thời gian để làm quen.

Việc sử dụng những chức năng cơ bản của Google Developer Tool không hề khó và bạn chỉ cần đọc hết bài viết này mình nghĩ bạn đã có đủ kiến thức để làm được khá nhiều việc rồi đó.

Hãy cùng mình tìm hiểu thật chi tiết xem công cụ Google Developer Tool này có những chức năng gì nhé.

Trong bài viết ở một số vị trí mình sẽ viết tắt Google Developer Tool là GDT nhé.

Mở Google Developer Tool lên

Mình có để link để bạn download trình duyệt Chrome về máy tính ở dưới cho bạn nào chưa dùng Google Chrome.

Sau khi cài đặt Google Chrome bạn hãy khởi động nó lên và mở Google Developer Tool bằng một trong các cách sau.

Cách 1 : 

  • Nhấn tổ hợp phím : Ctrl + Shift + I (Window) /  Cmd + Opt + I (Mac)

Cách 2 : 

sử dụng Google Developer Tool WDI Blog 01

Bạn hãy nhấn chuột phải tại website bạn đang xem và chọn menu “Kiểm tra” để mở nhanh Google Developer Tool.

Cách 3 : 

sử dụng Google Developer Tool WDI Blog 02

Từ dấu ba chấm ở góc trên cùng bên phải bạn hãy chọn menu “Công cụ khác” rồi chọn tiếp menu con “Công cụ dành cho Nhà phát triển” để mở Google Developer Tool.

 Thay đổi vị trí hiển thị

hướng dẫn sử dụng Google Developer Tool 1

Sau khi bạn khởi động công cụ GDT lên thì một màn hình nhỏ là giao diện của công cụ này sẽ xuất hiện.

Hiện tại như hình ảnh ví dụ minh họa trên đây thì GDT sẽ xuất hiện phía bên phải màn hình trình duyệt web.Bạn có thể thay đổi vị trí hiển thị của nó một cách linh hoạt tùy theo sở thích của mình.

Bạn hãy nhấn vào dấu ba chấm trên cùng của GDT để mở ra menu chức năng và để ý đến menu con “Dock site” và 4 icon nằm bên phải nó.

Từ trái qua phải các icon này tương ứng với các kiểu hiển thị :

  • Tách ra một màn hình thao tác riêng
  • Mở ra phía bên trái trình duyệt hiện tại
  • Mở ra phía dưới trình duyệt hiện tại
  • Mở ra phía phải trình duyệt hiện tại

Để trực quan và dễ thao tác nhất các bạn nên chọn ví trí hiển thị dưới cùng như hình ảnh minh họa dưới đây.

Xem hiển thị trên nhiều thiết bị

sử dụng Google Developer Tool WDI Blog 03

Bạn có thể xem hiển thị của website hiện tại trên nhiều thiết bị bằng công cụ mô phỏng của GDT.Để kích hoạt chức năng này của GDT bạn hãy nhấn vào icon mà mình đã khoanh tròn ở hình trên.

Lập tức màn hình hiển thị phía website của bạn sẽ thu nhỏ lại như hình trên đây.Ở kiểu hiển thị trên đa thiết bị này sẽ xuất hiện một số menu phía trên đầu như mình đã đánh số ở hình trên.

(1) : bạn có thể xem chính xác hiển thị của website trên thiết bị đã được chỉ định sẵn

(2) : thay đổi kích thước màn hình hiển website hiện tại thị nếu như nó quá nhỏ và khó quan sát

(3) : thay đổi chiều hiển thị của thiết bị từ dọc sang ngang và ngược lại

Ở kiểu hiển thị đa thiết bị này còn có một số menu ẩn nữa mà bạn nên thử.Bạn hãy nhấn vào dấu ba chấm như vùng mình khoanh đỏ ở hình dưới đây để mở ra menu ẩn này.

sử dụng Google Developer Tool WDI Blog 04

Trong số menu ẩn này có một chức năng khá thú vị đó là mô phỏng hình dạng thiết bị thực tế ở chế độ xem (hình iPhone như ảnh trên).Bạn hãy chọn menu “Show device frame” ngay trên đầu menu ẩn để kích hoạt chức năng này.

Ngoài ra bạn cũng có thể chụp ảnh lại chế độ xem hiện tại bằng cách nhấn vào menu con “Capture screenshot” hoặc “Capture full size screenshot“.

Một số phím tắt hữu ích

Command + Shift + D (Mac) / Control + Shift + D (Window) : thay đổi vị trí hiển thị của GDT.Bạn chỉ có thể thay đổi hai giữa hai vị trí đó là vị trí hiện tại và vị trí đã mở ngay trước đó.

Command + Shift + M (Mac) / Control + Shift + M (Window) : mở nhanh chế độ xem đa thiết bị như trên smartphone, iPad.

Command + Shift + U (Mac) / Control + Shift + U (Window) : hiển thị toàn bộ code của website hiện tại ở một tab trình duyệt mới.

Chọn yếu tố HTML và tùy chỉnh CSS cho nó

Như bạn có thể thấy trong hình dưới đây thì ở tab Elements thì có hai khung hiển thị song song là 1 và 2 theo như mình đã đánh dấu.

Khung thứ nhất là khung hiển thị toàn bộ code HTML của trang web hiện tại mà bạn đang mở trên trình duyệt và khung thứ hai là code CSS của trang web đó.

Chức năng đầu tiên của GDT mà mình muốn giới thiệu đó là xem nhanh và chỉnh sửa tùy ý bất kì yếu tố nào trên trang web.

hướng dẫn sử dụng Google Developer Tool 2

Bạn nhấn vào icon có hình mũi tên trỏ vào màn hình như mình đã đánh số 0 ở hình ảnh trên.Sau đó bạn trỏ vào bất kì yếu tố nào trên trang web mà bạn đang mở để xem mã HTML và CSS tương ứng của nó.

Ví dụ như ảnh trên là mình đã nhấn vào chữ “Lorem Ipsum” to nhất ở ngay chính giữa màn hình.Lúc này một khung nhỏ hiển thị tất cả những thuộc tính cơ bản của yếu tố đó sẽ xuất hiện để bạn theo dõi nhanh.

hướng dẫn sử dụng Google Developer Tool 3

Đồng thời thì bên phần code HTML thẻ chứa chữ “Lorem Ipsum” là thẻ <h1> cũng sáng lên so với những thẻ khác báo hiệu bạn đang trỏ vào yếu tố được bao bọc bởi thẻ <h1> đấy.

Giờ bạn chuyển qua bên phần code CSS sẽ thấy code CSS của thẻ <h1>.Tại đây bạn có thể tùy chỉnh một số chức năng sau :

  • Bật tắt khung tích V màu xanh lá để vô hiệu hóa thuộc tính hoặc bật thuộc tính lên
  • Kích chuột trái vào tên thuộc tính hoặc giá trị của nó để thay đổi tên thuộc tính hoặc giá trị tương ứng của nó.Ngoài ra bạn có thể xóa đi thuộc tính và giá trị của nó bằng cách chọn rồi nhấn nút Delete
  • Kích chuột trái vào cuối giá trị của một thuộc tính đã có sẵn để bắt đầu thêm một thuộc tính mới.Như dấu mũi tên ở hình ảnh minh họa trên

Đây là một trong những chức năng được sử dụng nhiều nhất khi thao tác với công cụ Google Developer Tool nên bạn cần thành thạo nó càng sớm càng tốt.

Khi bạn trỏ chuột vào trong vùng CSS của một yếu tố nào đó thì phía góc dưới cùng bên phải sẽ xuất hiện thêm một dấu ba chấm dọc.Bạn trỏ chuột lên dấu ba chấm dọc này thì một menu icon như mình khoanh đỏ ở hình dưới đây sẽ hiện ra.

sử dụng Google Developer Tool WDI Blog 06

Mình sẽ giải thích về menu icon này theo thứ tự từ trái qua phải nhé.

  • Icon chữ T : thêm thuộc tính text-shadow và map để tùy chỉnh các giá trị
  • Icon hai hình vuông chồng lên nhau : thêm thuộc tính box-shadow và map để tùy chỉnh giá trị
  • Icon chữ A : thêm thuộc tính color và bảng màu để điều chỉnh màu
  • Icon hộp sơn : thêm thuộc tính background-color và bảng màu để điều chỉnh

Thêm bớt chỉnh sửa css / class / id cho yếu tố HTML

sử dụng Google Developer Tool WDI Blog 05

Một trong những chức năng rất hay của GDT đó là cho phép chúng ta thêm class, id, thuộc tính CSS cũng như chỉnh sửa yếu tố HTML.

Để mở chức năng này lên bạn hãy nhấn chuột phải tại yếu tố HTML mà bạn muốn chỉnh sửa.Một danh sách các menu sẽ hiện ra như hình trên.Một số menu con trong này mà mình thường xuyên sử dụng đó là :

  • Add attribute : thêm class, id hay thuộc tính CSS mới.Ví dụ ở trên mình đã thêm style=”color: red;” cho thẻ <h1>
  • Edit attribute : chỉnh sửa class, id hay thuộc tính CSS đã có sẵn.Như ở ví dụ ảnh trên mình đã thêm class google-developer-tool vào cho thẻ <h1>
  • Edit as HTML : chỉnh sửa yếu tố HTML một cách linh hoạt như trên trình soạn thảo code.Mình đã chỉnh sửa tiêu đề thẻ <h1> từ 2020 thành 2030 ở ví dụ trên.Chỉnh sửa xong bạn hãy nhấn tổ hợp phím Command + return (Mac) / Control + enter (Window) để áp dụng.
  • Delete element : xóa yếu tố HTML bạn đã chọn.Có một cách khác để xóa đi yếu tố HTML đó là chọn nó rồi nhấn nút Delete.
  • Copy : giúp bạn nhân bản một yếu tố HTML bạn đã chọn một cách nhanh chóng.Bạn cũng có thể nhấn tổ hợp phím tắt Command + CCommand + V trên Mac (Control + CControl + V trên Window) để copy và paste nhanh một yếu tố HTML.
  • Force state : thêm một số Pseudo Class cho yếu tố HTML như : active, hover, focus, visited.

sử dụng Google Developer Tool WDI Blog 07

Để kiểm tra xem những thuộc tính nào đang có tác dụng lên yếu tốt HTML mà mình đang chọn bạn hay chuyển qua tab “Computed” để xem.

Danh sách những thuộc tính đang có tác dụng lên yếu tố HTML sẽ xuất hiện, chúng bao gồm cả những thuộc tính mặc định được thêm vào của trình duyệt.Bạn hãy theo dõi và loại bỏ những thuộc tính không cần thiết khi mà thuộc tính bạn muốn áp dụng không có tác dụng nhé.

Sử dụng Google Developer Tool – Tab Console

hướng dẫn sử dụng Google Developer Tool 5

Chức năng trong tab Console vô cũng tuyệt vời với những ai đang làm việc với tài liệu Javascript.

Chức năng này giúp bạn kiểm tra lỗi của tài liệu Javascript.Nó sẽ thông báo cho bạn những dòng lỗi và nguyên nhân lỗi để bạn sửa.

Điều thú vị hơn nữa là bạn có thể viết trực tiếp mã Javascript tại tab Console và thực thi nó ngay khi cần.Quá tiện cho bạn nào mới học Javascript phải không nào.

Bạn để ý thấy biểu tượng > ở dòng cuối cùng của tab Console không ? Bạn gõ code Javascrip vào đó để thực thi nhé.

Bạn còn có thể xem kết quả thực hành code Javascript tại đây nếu muốn (phần này khá nâng cao và dành cho bạn nào học Javascript).

Sử dụng Google Developer Tool – Tab Sources

Tab Sources sẽ giúp bạn biết được toàn bộ cấu trúc code cũng như có thể download code của một trang web bất kì về máy.

Thời gian đầu khi học HTML, CSS, Javascript bạn có thể dùng cách này để download code của trang web mà bạn quan tâm về.

Mục đích là để học hỏi xem cách viết code của họ ra sao, họ dùng những thủ thuật gì để tạo ra những hiệu ứng bắt mắt…vv.

Khi mình đi làm cũng có bị yêu cầu lấy code của một trang web trên cả máy tính và điện thoại thông minh.Một số công cụ online mình dùng không thể lấy được code hoàn chỉnh hoặc có lấy được thì cũng  rất nhiều phần dư thừa mà mình không biết.

Do đó sử dụng Google Developer Tool là cách tốt nhất mà mình đã sử dụng khi đó.Có lẽ đây là kinh nghiệm mà khi nào đó bạn sẽ gặp phải nếu đi làm.

hướng dẫn sử dụng Google Developer Tool 6

Kết luận

Công cụ Google Developer Tool này còn có khá nhiều tab nhưng do giới hạn bài viết có hạn và mình thấy những tab đó cũng hiếm khi sử dụng với một lập trình viên web bình thường nên mình bỏ qua không giới thiệu đến các bạn.

Nếu bạn thấy cần bổ sung cho bài viết thì hãy liên hệ với mình qua phần link liên hệ ở chân website.Mình sẽ hồi đáp và bổ sung sớm nhất có thể.

Với những gì mình đã hướng dẫn ở trên hi vọng bạn sẽ sử dụng Google Developer Tool thành thạo một số chức năng chính và áp dụng vào thực tế công việc của mình.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x