Giới thiệu
Kể cả khi bạn sử dụng bối cảnh 2D hay WebGL, bất cứ ai đã từng làm việc với phần tử <canvas> đều biết rằng việc gỡ lỗi có thể cực kỳ khó khăn. Thao tác với canvas thường bao gồm một danh sách dài và khó theo dõi các lệnh gọi:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
Đôi khi, bạn muốn xem hướng dẫn được gửi đến bối cảnh ảnh in trên vải canvas và xem từng hướng dẫn một. Rất may là có tính năng Kiểm tra Canvas mới trong Công cụ cho nhà phát triển của Chrome cho phép chúng tôi làm việc đó!
Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng tính năng này để bắt đầu gỡ lỗi canvas. Công cụ kiểm tra hỗ trợ cả bối cảnh 2D và WebGL, do đó bất kể bạn đang sử dụng bối cảnh nào, bạn sẽ có thể nhận được thông tin gỡ lỗi hữu ích ngay lập tức.
Bắt đầu
Để bắt đầu, hãy chuyển đến about:flags trong Chrome và bật “Bật thử nghiệm của Công cụ cho nhà phát triển”
Tiếp theo, hãy chuyển đến Công cụ cho nhà phát triển và nhấn vào bánh răng 
ở góc dưới bên phải. Từ đó, bạn có thể chuyển đến mục Thử nghiệm và bật tính năng Kiểm tra Canvas:
Để các thay đổi có hiệu lực, bạn cần đóng rồi mở lại Công cụ cho nhà phát triển (bạn có thể sử dụng Alt+R hoặc Option+R, một giải pháp thay thế hữu ích).
Khi Công cụ cho nhà phát triển mở lại, hãy chuyển đến phần Hồ sơ và bạn sẽ thấy tuỳ chọn Trình phân tích tài nguyên Canvas mới.
Đầu tiên, bạn sẽ thấy Trình phân tích tài nguyên Canvas bị tắt. Sau khi có một trang chứa canvas mà bạn muốn gỡ lỗi, bạn chỉ cần nhấn Enable (Bật) và trang đó sẽ tải lại để sẵn sàng nhận các lệnh gọi <canvas>:
Bạn sẽ cần quyết định xem bạn muốn chụp một khung hình duy nhất hay các khung liên tiếp, khi đó một khung hình giống hệt như khi bạn thấy trong Tiến trình công cụ cho nhà phát triển.
Chế độ Một khung hình ghi lại các lệnh gọi cho đến khi kết thúc khung hình hiện tại rồi dừng lại. Mặt khác, Khung liên tiếp sẽ chụp tất cả khung hình của mọi phần tử <canvas> cho đến khi bạn yêu cầu dừng lại. Chế độ bạn chọn phụ thuộc vào cách bạn đang sử dụng phần tử <canvas>. Đối với ảnh động đang chạy, có thể bạn muốn chụp một khung duy nhất. Để một ảnh động ngắn xuất hiện để phản hồi một sự kiện của người dùng, bạn có thể cần chụp các khung hình liên tiếp.
Vậy là chúng ta đã thiết lập xong và sẵn sàng bắt đầu chụp!
Đang chụp khung hình
Để chụp, bạn chỉ cần nhấn Start (Bắt đầu) rồi tương tác với ứng dụng như bình thường. Sau một thời gian, hãy quay lại Công cụ cho nhà phát triển và nếu bạn chụp liên tục, hãy nhấn vào Dừng.
Giờ đây, bạn đã có một hồ sơ mới tinh trong danh sách bên trái, đầy đủ số lượng lệnh gọi theo bối cảnh được ghi lại trên tất cả các phần tử <canvas>. Nhấp vào hồ sơ và bạn sẽ thấy màn hình giống như sau:
Trong ngăn dưới, bạn sẽ thấy danh sách tất cả khung hình đã chụp mà bạn có thể thực hiện. Khi bạn nhấp vào từng khung hình, ảnh chụp màn hình ở trên cùng sẽ cho bạn biết trạng thái của phần tử <canvas> ở cuối khung đó. Nếu có nhiều phần tử <canvas>, bạn có thể chọn phần tử nào sẽ hiển thị bằng cách sử dụng trình đơn ngay bên dưới ảnh chụp màn hình.
Bên trong khung này, bạn sẽ thấy các nhóm lệnh gọi vẽ. Mỗi nhóm lệnh gọi vẽ chứa một lệnh gọi vẽ duy nhất. Đây sẽ là lệnh gọi cuối cùng trong nhóm. Vậy hàm gọi vẽ là gì? Đối với bối cảnh 2D sẽ là các hàm như clearRect(), drawImage(), fill(), stroke(), putImageData() hoặc bất kỳ chức năng kết xuất văn bản nào và đối với WebGL, bối cảnh đó sẽ là clear(), drawArrays() hoặc drawElements(). Về cơ bản, đó là bất kỳ thứ gì có thể thay đổi nội dung của vùng đệm vẽ hiện tại. (Nếu không chuyên về đồ hoạ, bạn có thể coi vùng đệm là một bitmap với các pixel mà chúng ta đang chỉnh sửa.)
Giờ bạn chỉ cần xem qua danh sách. Bạn có thể làm việc đó ở khung, vẽ cấp độ nhóm cuộc gọi hoặc cuộc gọi. Dù chọn cách nào để duyệt qua danh sách (và có các nút ngay bên dưới ảnh chụp màn hình giúp bạn điều hướng nhanh), bạn sẽ thấy ngữ cảnh tại thời điểm đó, có nghĩa là bạn có thể nhanh chóng tìm và sửa lỗi khi chúng xuất hiện.
Nhận ra điểm khác biệt
Một tính năng hữu ích khác là bạn có thể xem thuộc tính và biến nào đã thay đổi giữa hai lệnh gọi.
Để thấy rằng bạn chỉ cần nhấp vào nút thanh bên (
) và một chế độ xem mới sẽ mở ra. Khi thực hiện các hàm gọi vẽ, bạn sẽ thấy các thuộc tính đã được cập nhật. Mọi vùng đệm hoặc mảng sẽ hiển thị nội dung của chúng khi bạn di chuột qua chúng.
lắng nghe ý kiến của mọi người!
Giờ đây, bạn đã biết cách gỡ lỗi hoạt động của canvas trong Công cụ cho nhà phát triển của Chrome. Nếu bạn có ý kiến phản hồi về công cụ Trình phân tích tài nguyên Canvas, vui lòng gửi báo lỗi hoặc đăng lên Nhóm Công cụ của Chrome cho nhà phát triển. Hãy cho chúng tôi biết nếu bạn phát hiện lỗi hoặc nếu có điều gì khác bạn muốn xem khi kiểm tra <canvas>, vì thực ra các công cụ của Chrome chỉ có thể được cải thiện thông qua quá trình nhà phát triển sử dụng và phản hồi.