Hysen Labsec-devtools
ec-devtools是支持canvas库 ( easycanvas , https://github.com/chenzhuo1992/easycanvas ) 的chrome调试工具，能对canvas的元素的样式、物理属性等进行修改，达到所见即所得的效果，提高调试效率
A Chrome debugger for the easycanvas library
ec-devtools is a Chrome extension that edits easycanvas elements in place, and the README doubles as a writeup of how Chrome devtools pages, scripts, and messages fit together.
The tool
ec-devtools is a Chrome debugging extension built for the easycanvas canvas library. It lets you modify the styles, physics properties, and other attributes of canvas elements and see the result right away, which is the what-you-see-is-what-you-get effect the README advertises. The goal is to speed up debugging when you are tweaking canvas scenes by hand.
Where it fits
The README sets the context with two familiar examples. Vue developers reach for vue-devtools, React developers reach for react-devtools. ec-devtools is meant to play that same role for easycanvas, a canvas library rather than a UI framework. There is a link to the source repository for anyone who wants to read the extension code or contribute.
Three moving parts
The writeup explains Chrome devtools as three pieces. The DevTools Page is the panel you actually interact with. The Background Page is a background JavaScript script, despite the name. The Content Script runs inside the webpage's context. Understanding which piece runs where is the key to following the message flow.
How messages travel
A webpage cannot talk to the DevTools Page directly. Messages have to go from the page to the content script, then through the background page, using the chrome runtime API, and finally reach the devtools panel. The README walks through each leg of that path and notes that the tool covers basically all the communication methods Chrome devtools offers, which is the most useful part for anyone learning to build their own extension.
What it covers
So the repository does two things at once. It is a working debugger for easycanvas, and it is a teaching example for Chrome devtools communication. The source link points at the extension repo itself, so the examples in the article can be checked against real code. For someone starting out with devtools extensions, that combination is the actual value.
Community notes