Aqui está uma captura de tela da página do tutorial:
Estaformadeinspeçãoemsafáriébemlegal,existeumamaneiradefazerissonofirefox?
Deixe-meesclarecerascoisas,tenhoumapáginacomaseguintefonte:
<!DOCTYPEhtml><htmllang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
});
</script>
</body>
</html>
E parece no safári, para cada
elemento, ele exibe uma propriedade chamada __data__ , que é o que o script d3.js alimenta neles.
Você não está inspecionando HTML. Você está vendo os resultados de uma chamada de função JavaScript.
O console do Firefox faz uma coisa semelhante:
Observequea
Além disso, ainda estou executando uma versão mais antiga; a versão mais recente parece ainda melhor (e é inteligente o suficiente para vincular ao inspetor, o lugar que você deve estar inspecionando o DOM).
Sim, você pode simplesmente clicar com o botão direito e selecionar "Inspecionar elemento (Q)"
Entãovocêteráumainterfacemuitoparecida:
Dito isto, existem vários add-on / extensões para o Firefox que se assemelham ao que você está pedindo. Um add-on popular é: FireBug, que faz parte do Web Developer. Que irá detalhar e mostrar em "tempo real" qual pedaço de html / javascript / css está sendo exibido. Uma das muitas sugestões ...
Edit: Existe o console baseado no Web Developer. Eu estou corrigido. O Firebug estende a funcionalidade do console. Informações adicionais sobre o firebug são mostrar graficamente onde os elementos residem dentro da estrutura da página e como eles interagem. Inspecione o HTML e modifique o estilo e o layout em tempo real, analise com precisão o uso e o desempenho da rede, inspecione e edite o código HTML, visualize métricas CSS, depure e crie perfis em javascript, registre-se em javascript e os recursos continuam.
Tags javascript html web