# Debugging Shaders

**URL:** <https://discourse.threejs.org/t/debugging-shaders/2127>\
**Category:** Questions\
**Tags:** dev-tools, shaders\
**Created:** [March 14, 2018, 6:32pm UTC](https://discourse.threejs.org/t/debugging-shaders/2127 "2018-03-14T18:32:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![macrael](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/macrael/32/1327_2.png) [@macrael](https://discourse.threejs.org/u/macrael)\
**Post date:** [March 14, 2018, 6:32pm UTC](https://discourse.threejs.org/t/debugging-shaders/2127/1 "2018-03-14T18:32:30Z")

</div>

Are there any good tools for editing webgl shaders? I found it very annoying the last time I tried because I got poor errors out of the browser when I made a mistake. If there is a way to compile a shader outside of the browser I feel like it might make this easier.

---

<div class="post-metadata">

**Author:** ![hccampos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hccampos/32/1034_2.png) [@hccampos](https://discourse.threejs.org/u/hccampos)\
**Post date:** [March 14, 2018, 6:57pm UTC](https://discourse.threejs.org/t/debugging-shaders/2127/2 "2018-03-14T18:57:37Z")

</div>

There is the webgl inspector:

- [https://chrome.google.com/webstore/detail/webgl-inspector/ogkcjmbhnfmlnielkjhedpcjomeaghda?hl=en](https://chrome.google.com/webstore/detail/webgl-inspector/ogkcjmbhnfmlnielkjhedpcjomeaghda?hl=en)

Or you could take a look at an editor like:

- [https://thebookofshaders.com/edit.php](https://thebookofshaders.com/edit.php)
- [https://shaderfrog.com/app](https://shaderfrog.com/app)
- [http://www.kickjs.org/example/shader\_editor/shader\_editor.html](http://www.kickjs.org/example/shader_editor/shader_editor.html)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 14, 2018, 7:04pm UTC](https://discourse.threejs.org/t/debugging-shaders/2127/3 "2018-03-14T19:04:32Z")

</div>

@hccampos That’s a really good selection! I’d like to add the default shader edit tools in FF:

> **[Shader Editor](https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor)**
>
> The Shader Editor enables you to see and edit the vertex and fragment shaders used by WebGL.

AFAIK, there is no real debugger for GLSL. In most cases, you have to produce visual outputs if you want to check intermediate results.