1. 首頁
  2. 問答
  3. HTML5畫布檢查器？

HTML5畫布檢查器？

2012-02-04 46 views
21

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

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

來源

2012-02-04 mastak

+0

JavaScript並不是HTML。我更新了你的問題。 – Jonas 2012-02-04 18:22:09

+0

開發者工具（Ctrl + Shift + J）下的谷歌瀏覽器的配置文件標籤可能會有所斬獲。我從來沒有嘗試過畫布。 – Ryan 2012-02-04 18:23:54

+0

@minitech：通過配置文件選項卡，您可以查看JavaScript CPU和堆的使用情況;它與屏幕上顯示的內容沒有任何關係。 – josh3736 2012-02-04 18:26:40

回答

42

編輯： 這個回答不上新的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

來源

2013-01-22 19:53:59 jedierikb

+0

在我的Chrome版本'24 .0.1312.56米'或鉻金絲雀它不存在：.. – mastak 2013-01-23 10:21:33

+1

更新說明。它是一個有點複雜的過程。 – jedierikb 2013-01-23 15:11:00

+6

有一個原因爲什麼這將奇蹟般消失嗎？我有它在金絲雀和香草，一天poof工作。啓用，沒有探查器，沒有畫布檢查？ – pailhead 2015-04-18 03:35:31

10

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

yourcanvas.toDataURL();

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

來源

2012-02-04 18:38:14 spliter

+3

畫布是位圖：它的內容只是你在屏幕上看到的內容 – 2012-02-04 19:39:11

+1

不太確定最後一條評論的內容是什麼，謝謝@spliter - 這對調試非常有用！ – UpTheCreek 2012-10-10 22:09:18

1

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

來源

2012-02-04 18:50:46 rezoner

2

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

這裏是WebGL的督察特點：

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

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

來源

2012-02-04 19:37:31 sysop

7

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

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

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

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

來源

2012-02-04 19:40:48

+2

正確..沒有瀏覽器支持帆布檢查呢..只有一種方法使用正確的框架，如[Kohana]（http://alertdevelop.ru/projects/profilertoolbar） – mastak 2012-02-29 10:05:19

相關問題

 相關問題