Kiểm tra canvas bằng Công cụ của Chrome cho nhà phát triển

Paul Lewis

Giới thiệu

Bất kể bạn đang sử dụng ngữ cảnh 2D hay WebGL, bất kỳ 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. Việc xử lý canvas thường liên quan đến 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 ghi lại các lệnh được gửi đến ngữ cảnh canvas và thực hiện từng lệnh một. May mắn là có một 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 ta 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 cho canvas. Trình kiểm tra hỗ trợ cả ngữ cảnh 2D và WebGL, vì vậy, bất kể bạn đang sử dụng ngữ cảnh nào, bạn đều 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 truy cập vào about:flags trong Chrome rồi bật chế độ "Bật thử nghiệm Công cụ cho nhà phát triển"

Hình 1 – Bật Thử nghiệm công cụ cho nhà phát triển trong about:flags

Tiếp theo, hãy chuyển đến Công cụ cho nhà phát triển rồi nhấn vào biểu tượng bánh răng ở góc dưới bên phải. Tại đó, bạn có thể chuyển đến phần Experiments (Thử nghiệm) rồi bật Canvas inspection (Kiểm tra canvas):

Hình 2 – Bật tính năng kiểm tra Canvas trong các thử nghiệm của Công cụ cho nhà phát triển

Để 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ể dùng Alt+R hoặc Option+R, một cách thay thế tiện lợi).

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 một tuỳ chọn Trình phân tích tài nguyên Canvas mới.

Để bắt đầu, 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 vào Enable (Bật) và trang sẽ tải lại để sẵn sàng ghi lại các lệnh gọi <canvas>:

Hình 3 – Bật Trình phân tích Canvas

Bạn cần quyết định xem mình muốn chụp một khung hình hay các khung hình liên tiếp, trong đó một khung hình giống hệt như những gì bạn thấy trong Dòng thời gian của Công cụ cho nhà phát triển.

Thuật ngữ chính: Khung đại diện cho một lượt truyền duy nhất thông qua vòng lặp sự kiện của trang. Quá trình này bao gồm việc chạy JavaScript, xử lý sự kiện, cập nhật DOM, thay đổi kiểu, thực hiện bố cục, vẽ và kết hợp trang. Để ảnh động mượt mà, bạn cần mỗi khung hình mất ít hơn 1/60 giây hoặc 16, 6 mili giây.

Khung hình đơn 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, Consecutive frames (Khung hình 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. Chế độ bạn chọn phụ thuộc vào cách bạn sử dụng phần tử <canvas>. Đối với ảnh động đang diễn ra, bạn có thể muốn chụp một khung hình. Đối với ảnh động ngắn xảy ra để phản hồi 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.

Hình 4 – Chọn số lượng khung hình cần chụp

Như 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

Để ghi lại, bạn chỉ cần nhấn vào 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 DevTools và nếu bạn đang ghi lại liên tục, hãy nhấn vào Stop (Dừng).

Giờ đây, bạn đã có một hồ sơ mới trong danh sách bên trái, hoàn chỉnh với số lượng lệnh gọi ngữ 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ột màn hình có dạng như sau:

Hình 5 – Hồ sơ canvas trong Công cụ cho nhà phát triển

Trong ngăn dưới, bạn sẽ thấy danh sách tất cả các khung hình đã chụp mà bạn có thể xem qua và 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 thấy trạng thái của phần tử <canvas> ở cuối khung hình đó. Nếu có nhiều phần tử <canvas>, bạn có thể chọn phần tử 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.

Hình 6 – Chọn ngữ cảnh canvas

Bên trong khung, bạn sẽ thấy các nhóm hàm gọi vẽ. Mỗi nhóm hàm gọi vẽ chứa một hàm gọi vẽ duy nhất, đây sẽ là hàm gọi cuối cùng trong nhóm. Vậy hàm gọi vẽ là gì? Đối với ngữ cảnh 2D, đó sẽ là những hàm như clearRect(), drawImage(), fill(), stroke(), putImageData() hoặc bất kỳ hàm kết xuất văn bản nào, còn đối với WebGL, đó sẽ là clear(), drawArrays() hoặc drawElements(). Về cơ bản, đó là bất cứ thứ gì có thể thay đổi nội dung của vùng đệm vẽ hiện tại. (Nếu không rành về đồ hoạ, bạn có thể coi vùng đệm là một bitmap có các pixel mà chúng ta đang thao tác.)

Giờ đây, bạn chỉ cần thực hiện từng bước trong danh sách. Bạn có thể thực hiện việc này ở cấp khung hình, nhóm hàm gọi vẽ hoặc lệnh gọi. Dù bạn chọn cách nào để xem 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 di chuyển nhanh chóng), bạn sẽ thấy bối cảnh tại thời điểm đó, nghĩa là bạn có thể nhanh chóng tìm và sửa lỗi khi chúng xuất hiện.

Hình 7 – các nút điều hướng để chuyển đổi danh sách thuận tiện

Tìm điểm khác biệt

Một tính năng hữu ích khác là khả năng xem những thuộc tính và biến nào đã thay đổi giữa hai lệnh gọi.

Để xem, bạn chỉ cần nhấp vào nút thanh bên () và một chế độ xem mới sẽ bật ra. Khi thực hiện từng bước trong 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 nếu bạn di chuột qua chúng.

Hãy lên tiếng!

Giờ thì bạn đã biết cách gỡ lỗi cho canvas trong Công cụ của Chrome cho nhà phát triển. Nếu bạn có ý kiến phản hồi về công cụ Trình phân tích Canvas, vui lòng gửi lỗi hoặc đăng lên Nhóm Chrome DevTools. Hãy cho chúng tôi biết nếu bạn phát hiện lỗi hoặc nếu bạn muốn thấy bất kỳ điều gì khác khi kiểm tra <canvas>, vì chỉ thông qua việc sử dụng và phản hồi của nhà phát triển, các công cụ của Chrome mới có thể cải thiện.