Devtools

DevTools
DevTools

DevTools là một bộ công cụ phát triển web được tích hợp trực tiếp vào các trình duyệt web. DevTools cung cấp cho bạn tất cả những thông tin cần thiết về trang web, từ tài liệu HTML, đến các tài nguyên đi cùng…

Tổng quan

Để hỗ trợ việc phát triển web và các ứng dụng trên nền web. Các trình duyệt web hiện đại (Google Chrome, Firefox, Microsoft Edge…vv) thường sẽ phát hành một công cụ giành riêng cho các lập trình viên. Chúng ta gọi các công cụ này là Devtools.

Mặc dù ảnh đại diện của bài viết mình để logo của Google Chrome, tuy nhiên đó chỉ là trình duyệt ưa thích của mình. Như đã nói phía trên, hầu hết các trình duyệt đều có Devtools với chức năng tương đương. Do đó, trong bài viết này, mình sẽ giới thiệu và demo trên trình duyệt Chrome. Các bạn có thể dễ dàng tìm kiếm chức năng tương tự trên trình duyệt của mình mà không cần phải thay đổi trình duyệt web ưa thích nhé.

Mở chức năng Devtools

  1. Sử dụng main menu của trình duyệt. View -> Developer -> Developer Tools
  2. Sử dụng phím tắt. Tùy vào hệ điều hành thì phím tắt sẽ hơi khác nhau một xíu. Bạn có thể sử dụng cách 1 ở lần đầu tiên và ghi nhớ phím tắt. Từ những lần thứ 2 bạn có thể sử dụng phím tắt để tiết kiệm thời gian.
  3. Sử dụng chuột. Bạn có thể sử dụng chuột phải, trên context menu bạn cần chọn item ‘Inspect’ (kiểm tra phần tử).

Bạn sẽ thấy một khu vực mới được mở trên trình duyệt web của mình.

Google Chrome Devtools
Google Chrome Devtools

Nếu của bạn không giống của mình, thì đừng vội lo lắng nhé. Chúng ta có thể dễ dàng cài đặt nó lại. Tuy nhiên, mình vẫn giữ quan điểm trước giờ. Các bạn chỉ cần biết tính năng này tồn tại. Không nhất thiết phải cài đặt giống y chang của mình. Hãy tìm hiểu và chọn cách các bạn cảm thấy phù hợp nhất.

Để điều chỉnh vị trí của Devtools các bạn quan sát tìm thanh công cụ của cửa sổ Devtools nhé.

Các bạn click vào dấu 3 chấm để mở popup cài đặt.

Có 4 vị trí tương đối của Devtools trên cửa sổ trình duyệt. Bạn có thể thử chọn cho mình vị trí phù hợp nhất nhé.

Các chức năng cơ bản

Thông thường Devtools sẽ để những chức năng bên dưới mặc định. Các tabs này có thể kéo thả đổi chỗ cho nhau. Do đó, thứ tự trên máy của bạn có thể sẽ khác so với của mình. Tiếp theo mình sẽ giới thiệu sơ từng chức năng một cho các bạn.

Elements

Elements
Elements

Đây là một chức năng quan trọng bậc nhất trong quá trình học tập và làm việc của chúng ta. Các bạn có thể thấy, màn hình của chúng ta được chia làm 2 phần riêng biệt. Bên tay trái các bạn có thể thấy toàn bộ dữ liệu về HTML của trang web. Bên tay phải sẽ là một số tính năng chi tiết. Tạm thời chúng ta sẽ chỉ quan tâm đến 2 tính năng

  • Styles: Khi bạn chọn 1 phần tử ở phía bên tay trái, thông tin về các rules css phần tử đó đang bị áp dụng sẽ hiển thị
  • Computed: Khi một phần tử bị áp dụng nhiều rule. Có những thuộc tính bị ghi đè. Vậy sau khi trình duyệt sử dụng các thuật toán tính toán của nó. Những rules có độ ưu tiên lớn nhất sẽ được thực thi. Vậy, ở tab computed sẽ cho chúng ta biết, nhưng thuộc tính đang được áp dụng lên phần tử này

Khi làm việc với Elements có một chức năng mà chúng ta không thể bỏ qua. Đó chính là inspect element (kiểm tra phần tử). Để kích hoạt chức năng này, chúng ta click vào button chức năng trên Devtools.

Sau khi kích hoạt, chúng ta có thể kiểm tra 1 phần tử theo 2 phương án:

Phương án 1

Kiểm tra trên giao diện. Chúng ta sẽ đưa con trỏ chuột vào vùng cần kiểm tra. Phần tử HTML tương ứng sẽ được bôi đen, các thông số CSS của phần tử cũng được hiển thị phía bên phải. Ngoài ra, những thuộc tính cơ bản của đối tượng cũng được hiển thị.

Phương án 2

Kiểm tra phần tử HTML. Lúc này, thay vì chọn 1 phần tử trên giao diện, chúng ta có thể kiểm tra 1 phần tử trên tài liệu HTML. Trình duyệt sẽ chuyển đến và focus vào phần tử tương ứng trên giao diện. Các thuộc tính CSS ở khu vực bên phải cũng thay đổi như phương án 1.

Vậy dù chúng ta sử dụng phương án nào. Thì cũng có thể kiểm tra được các phần tử HTML. Cách trình duyệt đang thể hiện chúng. Và hơn nữa là các thông tin về các rule CSS thông tin về các thuộc tính CSS đang áp lên chúng.

Simulator

Hay còn được gọi là chức năng giả lập. Ngày nay, việc một trang web phải đáp ứng được giao diện trên các kích thước màn hình khác nhau là một yêu cầu bắt buộc. Chức năng giả lập của trình duyệt sẽ giúp chúng ta giảm được thời gian phát triển và kiểm thử.

Để kích hoạt chức năng giả lập, chúng ta chỉ cần click vào button chức năng của nó trên Devtools

Lúc này, trang web của chúng ta đã được giả lập hiển thị trên một thiết bị di động.

Các bạn có thể dễ dàng kiểm tra giao diện trang web của mình trên các thiết bị có kích thước khác nhau. Hơn nữa chúng ta có thể chọn rất nhiều loại thiết bị, và điều chỉnh hướng của thiết bị (landscape hay portrait).

Để thoát khỏi chức năng này, chúng ta chỉ cần click lại button chức năng simulator một lần nữa, hoặc thoát khỏi Devtools.

Network

Network
Network

Trên nguyên tắc cơ bản của HTTP. Các tài nguyên trên trang web phải được tải về để hiển thị. Chức năng này sẽ cung cấp cho chúng ta thông tin về:

  • Thứ tự, thời gian và trạng thái của các request
  • Với mỗi request, chúng ta có thể xem chi tiết thông tin về Headers, Response, Timing …vv
Request
Request

Consoles

Console
Console

Chức năng console có 2 khu vực chính chúng ta quan tâm.

  • (1) Là các thông báo của hệ thống. Khi các tài nguyên (file ảnh, file css..vv) không load được. Hay khi trang web liên kết đến những tài nguyên khác bằng giao thức không an toàn..vv
  • (2) Là khu tương tác với JavaScript. Mã nguồn JavaScript có thể xuất các thông tin qua console ở khu vực này. Hoặc bạn có thể viết và thực thi mã JavaScript trực tiếp tại đây

Sources

Sources
Sources

Chức năng này giúp chúng ta kiểm tra chi tiết thông tin các nguồn tài nguyên trong trang web. Ví dụ: các bạn có thể theo dõi được nguồn gốc các file hình ảnh, font chữ…vv được tải về từ nguồn nào.

Application

Application
Application

Chức năng này cho phép chúng ta quản lý các thông của trang web như: Session, Cookies, Local Storage…vv

Memory

Memory
Memory

Chức năng này hỗ trợ chúng ta kiểm tra, quản lý bộ nhớ và các vấn đề liên quan đến JavaScript thực thi trên trang.

Performance

Performance
Performance

Chức năng này giúp chúng ta đo và đánh giá các thông số về hiệu năng.

Security

Security
Security

Chức năng này sẽ cung cấp cho chúng ta các thông tin về bảo mật trang web như: thông tin về SSL, giao thức bảo mật đường truyền …vv

Khả năng mở rộng

Ngoài những chức năng mình trình bày phía trên, Devtools còn được tích hợp sẵn rất nhiều tính năng khác. Tùy thuộc vào mục đích sử dụng, các bạn có thể tìm hiểu và mở rộng thêm. Để mở thêm các chức năng có sẵn khác. Các bạn có thể vào khu vực setting của Devtools -> More tools -> Chọn chức năng mình cần mở thêm.

Mở thêm chức năng cho Devtools

Ngoài những chức năng có sẵn của trình duyệt. Devtools cũng cho phép người dùng mở rộng các chức năng. Do đó, chúng ta có thể dễ dàng cài đặt thêm một vài tiện ích hỗ trợ công việc lập trình. Quan trọng nhất là chúng ta đừng quên sử dụng Devtools nhé. Dưới đây là một vài công cụ hỗ trợ mình cài đặt thêm, phục vụ cho công việc của mình:

Đây là một công cụ giúp phát triển các ứng dụng dựa trên vuejs. Công cụ này có thể tích hợp trên Google Chrome và Firefox.

vue-devtools
vue-devtools

Kế đến là công cụ Lighthouse. Chúng ta có thể tích hợp thêm vào Devtools của trình duyệt Chrome. Công cụ này hỗ trợ chúng ta kiểm tra trang web của mình theo một số tiêu chí như: ‘hiệu năng’, ‘SEO’…vv

Lighthouse
Lighthouse