HTML5畫布檢查器？

Question

是否有能力檢查呈現在HTML5畫布上的對象，就像我們在Silverlight和Silverlight間諜中所做的一樣？

如果我使用Chrome元素檢查器，我只能檢查DOM。

Answer 1

編輯： 這個回答不上新的Chrome版本一起看： chrome canvas inspector 2015

在Chrome Canary版：

在瀏覽器中
1. ，輸入這個網址chrome://flags/
2. 使啓用開發工具實驗
3. 重新啓動Chrome
4. 在開發工具，點擊「齒輪」帶動了開發者的偏好
5. 選擇實驗從菜單
6. 選擇帆布檢查
7. 接近devtools，刷新網頁，重新打開devtools

---

在畫布上探查完整指南： http://www.html5rocks.com/en/tutorials/canvas/inspection/

GIF動畫顯示在用行動表明： https://twitter.com/umaar/status/480705624448045057

Answer 2

畫布的內容不是DOM的一部分，因此您無法檢查它的內容。正如您已經正確指出的那樣，檢查員只能檢查DOM，因此畫布已經超出了範圍。您可以檢查畫布內容在devtools的控制檯雖然與

yourcanvas.toDataURL(); 

並檢查輸出dataURL在鄰近的標籤。

Answer 3

將畫布視爲ms畫。沒有物體，只有像素和方法可以將它們放在屏幕上。

Answer 4

沒有辦法檢查的那一刻畫布內容，但在WebGL的情況下，你可以使用「WebGL Inspector」擴展爲谷歌Chrome，所以我覺得有可能作出類似的擴展畫布太。但它不像常見的DOM檢查器那樣工作。

這裏是WebGL的督察特點：

• 擴展現有應用程序中有一個腳本注入網頁
• 嵌入包括
• 捕獲整個GL幀
• 註釋的通話記錄與步進/資源導航和多餘呼叫警告
• 像素歷史記錄 - 查看所有對像素+混合信息作出貢獻的繪圖調用
• GL狀態顯示
• 資源瀏覽器的紋理，緩衝區和程序

但願我不是越野，但在目前沒有位圖或矢量圖帆布檢查。

Answer 5

在HTML5 Canvas上沒有渲染對象。只有像素。當你繪製一個形狀時，畫布揮動它的魔杖，像素出現，然後它忘記了甚至發生了任何事情。

正如很多人所做的那樣，您可以跟蹤您在畫布上繪製的內容，以便擁有用於重繪的持久對象。我寫了幾個popular tutorials on that，毫無疑問，如果你搜索，你會發現更多。

在構建持久對象系統時，您幾乎可以肯定需要包含大量調試代碼，以輸出易於理解的對象列表及其座標。許多人選擇使用console.log語句來執行此操作，這些語句將向開發人員控制檯（大多數現代瀏覽器中的F12開發人員工具的一部分）輸出任何字符串。

但就是這樣。你建立的是你用來檢查事物的東西。