通过着色编辑器你可以检测并编辑the vertex and fragment shaders资源。
Here's another screencast, showing how you can use the Shader Editor for complex applications (in this case, the Unreal Engine demo):
着色编辑器默认为关闭。为了激活它，打开Toolbox settings并在"Default Firefox Developer Tools"选项中选中"Shader Editor"。然后你可以看到"Shader Editor"在工具栏中显示。点击即可打开着色编辑器。
To get started, load a page which creates a WebGL context and loads a program into it. The screenshots below are from the Unreal Engine demo.
你会发现窗口分割成三个部分：左边是所有的GLSL程序，中间是目前选中的程序的vertex shader，右边是目前选中的程序的fragment shader：
The left hand pane lists all programs currently in use by a WebGL context. If you hover over an entry in the list, the geometry drawn by that program is highlighted in red:
If you click the eyeball icon just left of the program's entry, that program is disabled. This is useful for focusing on certain shaders or hiding overlapping geometry:
If you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.
The middle and right hand panes show the vertex and fragment shaders for the currently selected program.
You can edit these programs and see the results the next time the WebGL context redraws (for example, in the next animation frame). For example, you can modify the colors:
The editor highlights syntax errors in your code:
If you hover over the cross shown next to a line containing an error, you'll see more details about the problem: