Kiểm tra extension của Google Chrome với Developer Tools

Quản Trị Mạng - Trong bài viết trước chúng tôi đã giới thiệu với các bạn một số bước cơ bản để tự tạo extension hỗ trợ dành cho trình duyệt Chrome của Google. Và trong phần này, chúng ta sẽ tiếp tục với quá trình tải extension, tham khảo các thông tin có liên quan trong trang quản lý Extension.

Trong khi trình duyệt Chrome vẫn đang ở trong chế độ Developer, chúng ta sẽ dễ dàng hơn trong việc kiểm tra các thành phần popup. Để tiếp tục, các bạn mở trang Extension theo cách ở trên hoặc gõ đường dẫn chrome://extensions, sau đó nhấn chuột phải vào biểu tượng của extension và chọn Inspect popup từ menu hiển thị:

Cửa sổ popup sẽ hiển thị cùng với công cụ Developer Tools như hình dưới:

Nhấn nút Hide / Show Console ở phía cuối trang Developer Tools để hiển thị mã và Console tương ứng.

Sử dụng debug:

Trong phần tiếp theo, chúng ta sẽ chuyển sang quá trình thực thi trang popup cũng như gán thêm ảnh vào đó. Khởi tạo 1 breakpoint trong vòng lặp của việc gán ảnh bằng cách tìm chuỗi img.src và nhấn chuột vào dòng mã đó (ở đây là dòng thứ 37):

Tại thời điểm này, các bạn vẫn có thể nhìn thấy cửa sổ popup.html với 20 bức ảnh trong đó. Tại phần Console, gõ lệnh location.reload(true) và nhấn Enter:

Sau đó, trang popup sẽ hiển thị nhưng không có bức ảnh nào cả, vì vòng lặp đã bị tạm dừng ngay khi bắt đầu (dòng mã 37).

Ở phía trên góc phải cửa sổ chúng ta sẽ nhìn thấy phần Local Scope Variables với chức năng chính là hiển thị tất cả giá trị hiện tại của tất cả các biến của scope hiện tại. Ví dụ trong ảnh chụp màn hình dưới đây, giá trị của i là 0 và photos là danh sách các node có chứa ít nhất vài thành phần có liên quan trong chuỗi (trong trường hợp này là 20 thành phần được đánh dấu từ 0 tới 19 – tương ứng với từng bức ảnh được hiển thị).

Nhấn nút Play / Pause script execution (ở phía góc trên bên phải cửa sổ Developer Tools) để duyệt quá trình vòng lặp từ từ. Mỗi lần nhấn chuột thì giá trị của i sẽ tăng thêm và biểu tượng lần lượt hiển thị trên trang popup.

Khi i = 19

Bên cạnh đó, các bạn có thể nhấn các nút chức năng bên cạnh để chuyển qua hàm tiếp theo. Và để kết thúc quá trình tải toàn bộ trang, nhấn chuột vào dòng 37 để tắt breakpoint sau đó nhấn nút Play / Pause script execution để thực hiện chức năng của extension.

Qua một số bước cơ bản trên, chúng ta đã có thể:

- Tìm được ID của extension và kết nối tới trang quản lý hoặc qua đường dẫn: chrome://extensions

- Xem được những trang khó tìm được cũng như các file khác trong extension qua đường link: chrome-extension://extensionId/filename

- Sử dụng Developer Tools để duyệt và di chuyển giữa các hàm khác nhau trong đoạn mã JavaScript

- Reload trang đang kiểm tra từ Console bằng lệnh location.reload(true)

Chúc các bạn thành công!