Je n'arrive pas à distinguer cette petite fonctionnalité qui existait autrefois dans Firefox.

Le bouton 3D présent dans une version antérieure des outils de développement a disparu et je n'arrive pas à trouver de trace de cette fonctionnalité. Si c'est toujours là, comment puis-je l'activer?

À partir de Firefox 47, la vue 3D intégrée n'est plus disponible.

Il existe un module complémentaire offrant les mêmes fonctionnalités: Tilt 3D .

Remarque: tout comme la version intégrée, l'add-on ne fonctionne pas dans Firefox multiprocessus.

Tilt 3D IS n'est pas compatible avec Firefox Quantum.

Jusqu’à la version 47 de Firefox: Si vous cliquez avec le bouton droit de la souris et sélectionnez "Inspecter l’élément", puis cliquez sur l’icône représentant un engrenage dans la partie gauche du menu de la boîte à outils, vous devriez voir "Boutons disponibles" dans lesquels apparaît la "Vue 3D".

En cliquant dessus, une nouvelle icône s'affichera dans le menu de la boîte à outils. Cette vue affichera la vue 3D Dom.

Aller à: Préférences-> Général Décocher "Activer multi-processus Firefox Developer Edition"

Redémarrer Firefox

Goto: La barre d’outils du développeur [Options de la boîte à outils], la case "Vue 3D" devrait maintenant apparaître sous "Boutons de la boîte à outils disponibles", assurez-vous que cette case est cochée et que tout va bien.

Mise à jour : il a été supprimé à partir de 47 FF, mais est disponible dans un add-on .

Il semble que les mises à jour FF pourraient le désactiver. FF 38 a modifié l'emplacement de l'icône des paramètres.

Firefox 38 - cube et cog à droite:

Je sais que cette question concerne FireFox, mais vous pouvez également obtenir cette fonctionnalité dans Chrome (Firefox ne vous laissera pas insérer JS en tant que signet):

Ajoutez ce code javascript en tant qu'URL de signet:

javascript:void function(b,p)%7Bfunction l(k,c,b,e,g,d,f)%7Breturn"<div style%3D%27position:absolute%3B-webkit-transform-origin: 0 0 0%3B"%2B("background:"%2Bf%2B"%3B")%2B("width:"%2Be%2B"px%3B height:"%2Bg%2B"px%3B")%2B("-webkit-transform:"%2B("translate3d("%2Bk%2B"px,"%2Bc%2B"px,"%2Bb%2B"px)")%2B("rotateX(270deg) rotateY("%2Bd%2B"deg)")%2B"%3B")%2B"%27></div>"%7Dfunction o(k,c,d,f)%7Bfor(var j%3Dk.childNodes,n%3Dj.length,m%3D0%3Bm<n%3Bm%2B%2B)%7Bvar a%3Dj%5Bm%5D%3Bif(1%3D%3D%3Da.nodeType)%7Ba.style.overflow%3D"visible"%3Ba.style.WebkitTransformStyle%3D"preserve-3d"%3Ba.style.WebkitTransform%3D"translateZ("%2B(b%2B(n-m)*q).toFixed(3)%2B"px)"%3Bvar h%3Dd,i%3Df%3Ba.offsetParent%3D%3D%3Dk%26%26(h%2B%3Dk.offsetLeft,i%2B%3Dk.offsetTop)%3Bo(a,c%2B1,h,i)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft%2Ba.offsetWidth,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop%2Ba.offsetHeight,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%7D%7D%7Dvar g%3D"%23C33,%23ea4c88,%23663399,%230066cc,%23669900,%23ffcc33,%23ff9900,%23996633".split(","),q%3D0.001,e%3D"",d%3Ddocument.body%3Bd.style.overflow%3D"visible"%3Bd.style.WebkitTransformStyle%3D"preserve-3d"%3Bd.style.WebkitPerspective%3Dp%3Bvar r%3D(window.innerWidth/2).toFixed(2),s%3D(window.innerHeight/2).toFixed(2)%3Bd.style.WebkitPerspectiveOrigin%3Dd.style.WebkitTransformOrigin%3Dr%2B"px "%2Bs%2B"px"%3Bo(d,0,0,0)%3Bvar f%3Ddocument.createElement("DIV")%3Bf.style.display%3D"none"%3Bf.style.position%3D"absolute"%3Bf.style.top%3D0%3Bf.innerHTML%3De%3Bd.appendChild(f)%3Bvar j%3D"NO_FACES"%3Bdocument.addEventListener("mousemove",function(b)%7Bif("DISABLED"!%3D%3Dj)%7Bvar c%3Db.screenX/screen.width,b%3D(360*(1-b.screenY/screen.height)-180).toFixed(2),c%3D(360*c-180).toFixed(2)%3Bd.style.WebkitTransform%3D"rotateX("%2Bb%2B"deg) rotateY("%2Bc%2B"deg)"%7D%7D,!0)%3Bdocument.addEventListener("mouseup",function()%7Bswitch(j)%7Bcase "NO_FACES":j%3D"FACES"%3Bf.style.display%3D""%3Bbreak%3Bcase "FACES":j%3D"NO_FACES",f.style.display%3D"none"%7D%7D,!0)%7D(25,5E3)%3B

Une fois ajouté, cliquez sur le signet sur n’importe quel site Web. Vous pouvez cliquer pour afficher les contours et faire glisser pour afficher comme dans Firefox.

Firefox 46.0 peut toujours être téléchargé ici: https://ftp.mozilla.org/pub/firefox/releases/46.0/

Et le module Tilt 3D ici (à partir de Firefox 46.0): https://addons.mozilla.org/en-US/firefox/addon/tilt/

La vue de rendu semble meilleure avec Tilt 3D qu'avec la vue 3D native de Web Developer Tools:

Comparaison des captures d'écran entre Tilt 3D et 3D View

Jetez un coup d'œil au navigateur Microsoft Microsofts Edge.

J'ai la version Version 79.0.283.0 (version officielle) Canary (64 bits) . Placez edge://flags/la barre d'adresse et activez les expériences des outils de développement . Ouvrez les outils de développement et appuyez sur Ctrl + Maj + P , recherchez Expériences et recherchez Activer la vue DOM 3D .

Vous pouvez maintenant utiliser Ctrl + Maj + P > Vue DOM 3D .

Ce n'est pas une solution Firefox mais cela a fonctionné pour moi.

Je l'ai découvert ici .

Il est parti après la version 46. Une solution à cela est de Google "Firefox 46 download" Installez cette version et renommez-la (sur Mac) en quelque chose comme firefox-45 pour conserver également la version mise à jour. Lancez la version 45 et désactivez les mises à jour automatiques. Vous pouvez maintenant activer la vue 3D et voir la page en 3D et l'incliner.

J'espère que cela fonctionne pour vous.