CƠ BẢN VỀ CHROME DEVTOOLS VÀ ỨNG DỤNG

Chrome Developer Tools (hay còn gọi là Chrome DevTools) được hiểu đơn giản là một bộ các công cụ dành cho các lập trình viên website. Nó được tích hợp sẵn ngay bên trong trình duyệt Chrome khi chúng ta cài đặt. Trong bài viết này, hãy cùng tìm hiểu những kiến thức Cơ Bản Về Chrome DevTools và Ứng Dụng  trong một số công việc.

Đối với một nhà phát triển website thì việc sử dụng Chrome Devtools có thể được coi như một công việc mặc định hằng ngày. Bài viết này sẽ cung cấp thông tin tổng quan nhất về Chrome Devtools, hướng đến những developer, tester có nhu cầu tìm hiểu thêm về công cụ này.

Cơ bản về Chrome DevTools: Cách truy cập

Vì được tích hợp sẵn ngay bên trong trình duyệt, chúng ta có thể dễ dàng tìm và truy cập bộ công cụ này. Có 1 vài cách để mở Chrome Devtools như sau:

1. Mở từ browser menu: Click vào menu góc phải chọn More tools => Chọn Developer tools
2. Mở bằng menu: click chuột phải vào màn hình Chrome và chọn Inspect
3. Sử dụng tổ hợp phím tắt:

• Đối với Mac: Cmd + Opt + I
• Đối với Windows: F12 hoặc Ctrl + Shift + I

Sử dụng Chrome DevTools như thế nào?

Khi mở Chrome DevTools thành công, ta sẽ thấy công cụ này bao gồm những tabs cơ bản như sau:

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse

Trong bài viết Cơ Bản Về Chrome DevTools và Ứng Dụng, chúng ta sẽ chỉ tìm hiểu 4 tabs thường được ứng dụng trong công việc. Đó là: Elements, Console, Sources, Network.

1. Elements: 

Tab Element cho phép chúng ta thấy toàn bộ html của 1 trang web, bao gồm cả css và các thuộc tính của trang đó. Ở tab Elements, chúng ta có thể thực hiện được một số công việc cơ bản như sau:

• Kiểm tra thuộc tính, css, html của 1 thành phần nào đó trên trang. Cách thức: rê chuột lên yếu tố muốn kiểm tra và click chuột phải, chọn inspect.

• Chỉnh sửa CSS của một trang để theo dõi sự thay đổi một yếu tố trên trang sẽ ảnh hưởng như thế nào. Cách thức: chọn Inspect vào thành phần cần chỉnh sửa, trên giao diện của Elements di chuyển tới tab Styles, điều chỉnh css theo ý bạn muốn.

• Tương tác trên các thành phần của website hoặc khi muốn kiểm tra code mới hoạt động thế nào trước khi bắt tay vào thực hiện. Cách thức: sử dụng chức năng inspect đến các phần tử cần kiểm tra, thêm bớt điều chỉnh đoạn code tại vị trí mong muốn trên giao diện devtools.

2. Console: 

Console là tab sẽ hiển thị tất cả các message, error xảy ra bởi các thành phần trên website. Ngoài ra chúng ta có thể tự thêm các đoạn js để tương tác vào bất kỳ thành phần nào trên website dựa vào khung console này.

3. Sources: 

Mục Sources sẽ cho phép xem và tìm hiểu tất cả file được sử dụng bên trong website. Đây cũng là nơi để debug 1 chức năng nào đó trong quá trình phát triển. Một số tác vụ có thể thực hiện trên tab Sources có thể kể đến như:

• Xem một file bất kì được nhúng trên trang web đó.

• Tìm kiếm file. Cách thức: ấn chọn ký hiệu 3 dấu chấm dọc, chọn Open File hoặc phím tắt Ctrl + P. Nhập tên file cần tìm vào khung nhập.

• Bên trong Source còn có một chức năng mở rộng có tên Pretty Print. Nó cho phép sắp xếp lại hiển thị HTML và CSS của website với một cấu trúc rõ ràng, gọn gàng hơn. Ta có thể tận dụng chức năng này để giải quyết việc tìm kiếm những file ở dạng nén.

4. Network 

Mục Network sẽ hiển thị ra tất cả những file được tải lên khi chạy website. Nó sẽ cho chúng ta biết mọi thông tin liên quan đến việc tải file như: quá trình load file diễn ra như thế nào, file nào đang bị lỗi (404, 500,…), file nào đang load chậm ảnh hưởng đến tốc độ của website,…

Ngoài ra, Network còn cho chúng ta lựa chọn hiển thị theo bộ lọc các request đang được gọi, với các lựa chọn như JS, CSS, Image,… Click chọn vào từng loại đối tượng bạn muốn lọc để thu hẹp kết quả trả về.

Chúng ta cũng có thể nhập tên request vào ô nhập để filter theo tên theo như hình bên dưới

Kết

Trên đây là những thông tin cơ bản nhất về Chrome Devtools, cũng như một số công dụng cơ bản của 4 chức năng Elements, Console, Sources và Network. Hy vọng bài viết phần nào giúp ích cho các bạn lập trình viên cũng như kiểm thử viên đang bắt đầu tìm hiểu về công cụ này.

Hẹn gặp lại các bạn ở những chuyên mục sau!

Bài viết có tham khảo kiến thức từ các nguồn sau

The Beginner’s Guide to Chrome Developer Tools (nira.com)

My Favorite Chrome Dev Tools Tips and Tricks (freecodecamp.org)

CO-WELL ASIA

Tham khảo các bài viết khác của CO-WELL Asia tại đây.