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...
Nội dung trích xuất từ tài liệu:
Kiểm tra extension của Google Chrome với Developer ToolsKiểm tra extension của Google Chrome với Developer ToolsTrong 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ảocá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 tasẽ dễ dàng hơn trong việc kiểm tra các thành phần popup. Để tiếp tục, cácbạn mở trang Extension theo cách ở trên hoặc gõ đường dẫnchrome://extensions, sau đó nhấn chuột phải vào biểu tượng của extensionvà 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ểnthị 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 popupcũng như gán thêm ảnh vào đó. Khởi tạo 1 breakpoint trong vòng lặp củaviệ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 20bức ảnh trong đó. Tại phần Console, gõ lệnh location.reload(true) và nhấnEnter: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 ScopeVariables 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ácbiế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 ilà 0 và photos là danh sách các node có chứa ít nhất vài thành phần có liênquan trong chuỗi (trong trường hợp này là 20 thành phần được đánh dấu từ 0tớ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 = 19Bê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 quahàm tiếp theo. Và để kết thúc quá trình tải toàn bộ trang, nhấn chuột vàodò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 đườngdẫn: chrome://extensions- Xem được những trang khó tìm được cũng như các file khác trongextension 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 nhautrong đ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!