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ớ

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!