# Three.js Developer Tools

**URL:** <https://discourse.threejs.org/t/three-js-developer-tools/8477>\
**Category:** Resources\
**Tags:** firefox, chrome, dev-tools\
**Created:** [July 12, 2019, 3:45pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477 "2019-07-12T15:45:28Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [July 12, 2019, 3:45pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/1 "2019-07-12T15:45:28Z")

</div>

@jsantell lately published a new tool for `three.js` developers at the Chrome web store. The `three.js` developers tools enhance your Chrome dev tools with an additional panel that provides various options like:

- Inspect the structure/hierarchy of a `three.js` scene
- Change properties of 3D objects, materials, textures or lights at runtime
- Inspect statistical information about the graphics board memory and the rendering process (see [WebGLRenderer.info](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.info))

Please note that the tool is still in an experimental stage. If you have ideas to make the tool even better or if you encounter any bugs, feel free to create an issue at the respective [github](https://github.com/threejs/three-devtools) repository.

> **[Three.js Developer Tools](https://chrome.google.com/webstore/detail/threejs-developer-tools/ebpnegggocnnhleeicgljbedjkganaek)**
>
> Developer tools for 3D library three.js.

> **[Three.js Developer Tools – Get this Extension for 🦊 Firefox (en-US)](https://addons.mozilla.org/en-US/firefox/addon/three-js-developer-tools/)**
>
> Download Three.js Developer Tools for Firefox. Developer tools for 3D library three.js.

---

<div class="post-metadata">

**Author:** ![soadzoor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/soadzoor/32/3055_2.png) [@soadzoor](https://discourse.threejs.org/u/soadzoor)\
**Post date:** [July 13, 2019, 9:30am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/2 "2019-07-13T09:30:25Z")

</div>

I cannot activate it, it stays greyed out for three.js webpages as well. What do I do wrong? 😕

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [July 13, 2019, 10:30am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/3 "2019-07-13T10:30:31Z")

</div>

I think it doesn’t work when the WebGL content is in an iframe. If you access the example’s page directly, it should work. Try this link: [https://threejs.org/examples/webgl\_animation\_keyframes.html](https://threejs.org/examples/webgl_animation_keyframes.html)

---

<div class="post-metadata">

**Author:** ![soadzoor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/soadzoor/32/3055_2.png) [@soadzoor](https://discourse.threejs.org/u/soadzoor)\
**Post date:** [July 13, 2019, 11:04am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/4 "2019-07-13T11:04:58Z")

</div>

No, it’s not in an iframe. I tried with the example you sent me, still greyed out.

It says “Three.js developer tool has access to this site” when I hover the mouse, but it says the exact same thing on every page (even the ones without three.js).

![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6dacde4015318250b404fa383ef43553a3447acc.png)

![Capture000](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/685689569fa90c32e305e8832362f6a14b91e648.png)

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [July 13, 2019, 12:03pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/5 "2019-07-13T12:03:40Z")

</div>

Once installed you’ll find it as a tab in the browser’s dev tools. Doesn’t work with iframes yet and it requires r106+ 🤓

---

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [July 13, 2019, 9:15pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/6 "2019-07-13T21:15:20Z")

</div>

> [@mrdoob](#):
>
> and it requires r106+ 🤓

Ohhh, That explains why it won’t work for me, I’m on 105.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [July 14, 2019, 5:55am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/7 "2019-07-14T05:55:37Z")

</div>

Yes! I’ve been looking forward to this 🤩

Two things that are going to be really useful for me: adjusting the render order in real time, and quickly enabling/disabling lights and shadows without reloading.

---

<div class="post-metadata">

**Author:** ![ip3ly5](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ip3ly5/32/4741_2.png) [@ip3ly5](https://discourse.threejs.org/u/ip3ly5)\
**Post date:** [July 14, 2019, 3:39pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/8 "2019-07-14T15:39:38Z")

</div>

Insanely useful, thanks for sharing

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [July 16, 2019, 4:41am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/9 "2019-07-16T04:41:51Z")

</div>

That’s great ! Where can we give some feedback to help improving it ?

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [July 16, 2019, 4:56am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/10 "2019-07-16T04:56:17Z")

</div>

> [@felixmariotto](#):
>
> Where can we give some feedback to help improving it ?

> **[Issues · threejs/three-devtools](https://github.com/threejs/three-devtools/issues)**
>
> three.js devtools. Contribute to threejs/three-devtools development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [July 16, 2019, 5:00am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/11 "2019-07-16T05:00:32Z")

</div>

@looeee thank you 🙂

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [July 16, 2019, 9:55am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/12 "2019-07-16T09:55:26Z")

</div>

Pinned globally on July 16, 2019, 9:55am UTC



---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 16, 2019, 8:28pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/13 "2019-07-16T20:28:07Z")

</div>

I really want to compliment the `threejs/${whatever}` pattern!

---

<div class="post-metadata">

**Author:** ![xiani\_zp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xiani_zp/32/6418_2.png) [@xiani\_zp](https://discourse.threejs.org/u/xiani_zp)\
**Post date:** [July 19, 2019, 10:16am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/14 "2019-07-19T10:16:16Z")

</div>

as for current 0.1 version this code worked:

```auto
    if (typeof __THREE_DEVTOOLS__!== 'undefined') {
    	__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('entity', { type: 'scene', detail: scene }));
    	__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('entity', { type: 'renderer', detail: renderer }));
    }

```

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [September 2, 2019, 5:56am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/15 "2019-09-02T05:56:57Z")

</div>

I love it.

---

<div class="post-metadata">

**Author:** ![ToniFF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toniff/32/7604_2.png) [@ToniFF](https://discourse.threejs.org/u/ToniFF)\
**Post date:** [October 15, 2019, 2:35am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/16 "2019-10-15T02:35:47Z")

</div>

😍Great!

---

<div class="post-metadata">

**Author:** ![Immugio](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/immugio/32/6686_2.png) [@Immugio](https://discourse.threejs.org/u/Immugio)\
**Post date:** [November 7, 2019, 10:37am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/17 "2019-11-07T10:37:50Z")

</div>

Great tool! It would be really useful if there was a way to pick an object on screen

---

<div class="post-metadata">

**Author:** ![Diep\_Tran](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diep_tran/32/23543_2.png) [@Diep\_Tran](https://discourse.threejs.org/u/Diep_Tran)\
**Post date:** [June 25, 2022, 7:50am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/18 "2022-06-25T07:50:24Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/ca0ce7824367c6500f6a6244923b2df7792101fa.png)  
What happens with the extension. It was still working until last week

---

<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:** [June 25, 2022, 7:58am UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/19 "2022-06-25T07:58:40Z")

</div>

It seems this happens since the extension is not available in the Chrome Web Store anymore.

@mrdoob Is it possible that the account which published the extension has been deleted?

---

<div class="post-metadata">

**Author:** ![da\_real\_papa\_roach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/da_real_papa_roach/32/27663_2.png) [@da\_real\_papa\_roach](https://discourse.threejs.org/u/da_real_papa_roach)\
**Post date:** [June 30, 2022, 9:13pm UTC](https://discourse.threejs.org/t/three-js-developer-tools/8477/20 "2022-06-30T21:13:53Z")

</div>

Is there any chance these will come back? I use them all the time for debugging.

[Next page](https://discourse.threejs.org/t/three-js-developer-tools/8477.md?page=2)