Kiểm tra extension Google Chrome với Developer Tools Trong viết trước giới thiệu với bạn số bước để tự tạo extension hỗ trợ dành cho trình duyệt Chrome Google Và phần này, tiếp tục với trình tải extension, tham khảo thông tin có liên quan trang quản lý Extension Trong trình duyệt Chrome chế độ Developer, dễ dàng việc kiểm tra thành phần popup Để tiếp tục, bạn mở trang Extension theo cách gõ đường dẫn chrome://extensions, sau nhấn chuột phải vào biểu tượng extension chọn Inspect popup từ menu hiển thị: Cửa sổ popup hiển thị với công cụ Developer Tools hình dưới: Nhấn nút Hide / Show Console phía cuối trang Developer Tools để hiển thị mã Console tương ứng Sử dụng debug: Trong phần tiếp theo, chuyển sang trình thực thi trang popup gán thêm ảnh vào Khởi tạo breakpoint vòng lặp việc gán ảnh cách tìm chuỗi img.src nhấn chuột vào dòng mã (ở dòng thứ 37): Tại thời điểm này, bạn nhìn thấy cửa sổ popup.html với 20 ảnh Tại phần Console, gõ lệnh location.reload(true) nhấn Enter: Sau đó, trang popup hiển thị ảnh cả, vòng lặp bị tạm dừng bắt đầu (dòng mã 37) Ở phía góc phải cửa sổ nhìn thấy phần Local Scope Variables với chức hiển thị tất giá trị tất biến scope Ví dụ ảnh chụp hình đây, giá trị i photos danh sách node có chứa vài thành phần có liên quan chuỗi (trong trường hợp 20 thành phần đánh dấu từ tới 19 – tương ứng với ảnh hiển thị) Nhấn nút Play / Pause script execution (ở phía góc bên phải cửa sổ Developer Tools) để duyệt trình vòng lặp từ từ Mỗi lần nhấn chuột giá trị i tăng thêm biểu tượng hiển thị trang popup Khi i = 19 Bên cạnh đó, bạn nhấn nút chức bên cạnh để chuyển qua hàm Và để kết thúc trình tải toàn trang, nhấn chuột vào dòng 37 để tắt breakpoint sau nhấn nút Play / Pause script execution để thực chức extension Qua số bước trên, có thể: - Tìm ID extension kết nối tới trang quản lý qua đường dẫn: chrome://extensions - Xem trang khó tìm file khác extension qua đường link: chrome-extension://extensionId/filename - Sử dụng Developer Tools để duyệt di chuyển hàm khác đoạn mã JavaScript - Reload trang kiểm tra từ Console lệnh location.reload(true) Chúc bạn thành công! ... duyệt Chrome chế độ Developer, dễ dàng việc kiểm tra thành phần popup Để tiếp tục, bạn mở trang Extension theo cách gõ đường dẫn chrome: //extensions, sau nhấn chuột phải vào biểu tượng extension. .. thực chức extension Qua số bước trên, có thể: - Tìm ID extension kết nối tới trang quản lý qua đường dẫn: chrome: //extensions - Xem trang khó tìm file khác extension qua đường link: chrome -extension: //extensionId/filename... giới thiệu với bạn số bước để tự tạo extension hỗ trợ dành cho trình duyệt Chrome Google Và phần này, tiếp tục với trình tải extension, tham khảo thông tin có liên quan trang quản lý Extension