Kiểm tra extension của google chrome với developer tools

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


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!