Periksa elemen dalam firefox seperti di safari?

0

Ini adalah screenshot dari d3.js halaman web tutorial:

enter image description here

Cara pemeriksaan di safari ini cukup keren, apakah ada cara untuk melakukan ini di firefox?

Biarkan saya memperjelas, saya punya halaman dengan sumber berikut: 

<!DOCTYPE html>
<html lang="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>

Dan tampaknya di safari, untuk masing-masing

elemen, ini menampilkan properti yang disebut __data__, yang merupakan apa yang skrip d3.js masukkan ke dalamnya.

enter image description here

html javascript web qed
sumber

Jawaban:

1

Anda tidak memeriksa HTML. Anda sedang melihat hasil panggilan fungsi JavaScript.

Konsol Firefox melakukan hal serupa:

Screenshot

Perhatikan bahwa smc menjawab adalah benar cara untuk melihat HTML / DOM.

Juga, saya masih menjalankan satu versi lebih lama; versi yang lebih baru terlihat lebih baik (dan cukup pintar untuk menghubungkan ke inspektur, tempat Anda harus akan memeriksa DOM).

Bob
sumber
Anda melihat segitiga kecil di sisi kiri? itu tidak dapat dikembangkan di firefox, sementara itu di safari.
qed
Saya telah menambahkan tangkapan layar lain ke dalam pertanyaan.
qed
1
@qed Anda klik pada bagian yang digarisbawahi untuk mendapatkannya di sisi kanan . Itu bukan tiruan yang tepat, dan itu tidak dirancang untuk menjadi. Ia melakukan fungsi yang sama . Juga, FF Nightly (dan mungkin Beta / Aurora / 29) akan menunjukkan beberapa detail di sebelah kiri, tapi bukan itu intinya. Tangkapan layar kedua tidak menunjukkan keistimewaan: jika a __data__ anggota ada, FF akan menunjukkannya. Contoh saya tidak, karena saya tidak bisa repot-repot menguji kasus khusus Anda ketika umum berfungsi. Anda d3 skrip memiliki tidak ada berkaitan dengan cara kerja konsol pengembang; itu akan bekerja sama terlepas dari objek yang Anda periksa.
Bob
1

Ya, Anda cukup mengklik kanan dan kemudian pilih "Elemen Inspeksi (Q)"

enter image description here

Maka Anda akan mendapatkan antarmuka yang sangat mirip:

enter image description here

Art Gertner
sumber
Ini berbeda, tangkapan layar menunjukkan inspeksi di konsol, dan juga menunjukkan beberapa atribut 'tersembunyi' seperti proto dan data
qed
1

Yang sedang berkata, ada banyak add-on / Extensions untuk Firefox yang menyerupai apa yang Anda minta. Add-on yang populer adalah: FireBug yang merupakan bagian dari Pengembang Web. Yang akan ditampilkan dan ditampilkan dalam "waktu nyata" bagian html / javascript / css yang sedang ditampilkan. Salah satu dari banyak saran ...

Sunting: Ada konsol berdasarkan pada Pengembang Web. Saya berdiri dikoreksi. Firebug memperluas fungsionalitas konsol. Informasi tambahan tentang pembakar adalah untuk menunjukkan secara grafis di mana elemen berada di dalam struktur halaman dan bagaimana mereka berinteraksi. Periksa HTML dan modifikasi gaya dan tata letak secara real-time, secara akurat menganalisis penggunaan dan kinerja jaringan, memeriksa dan mengedit kode HTML, memvisualisasikan metrik CSS, debug dan javascript profil, masuk untuk javascript, dan fitur berjalan.

BlizzardsGambit
sumber
1
Firefox telah memiliki konsol pengembang bawaan selama beberapa bulan. Sebenarnya, saya cukup yakin sudah bertahun-tahun sekarang. Jawaban ini salah.
Bob
Meskipun bagian dari Firefox tidak memiliki konsol pengembang built-in (yang salah), itu akan lebih baik jika Anda bisa menunjukkan jika FireBug melakukan apa yang diinginkan OP. Ini tentu memperluas alat pengembang built-in, tetapi sejauh mana?
Doktoro Reichard
Terasa seperti saya m in one those scientific journals... Very well, I don sebenarnya tidak menjawab pertanyaan secara teratur.
BlizzardsGambit
@ BlizzardsGambit Eh, kami menghargai kebenaran. Jangan merasa kecil hati; koreksi saja, pelajari hal-hal baru dan lanjutkan. Saya minta maaf jika saya sedikit tumpul dalam komentar asli saya. Kebetulan, sebagian besar / semua fitur Firebug sekarang menjadi bagian dari konsol dev standar, dan konsol dev standar cenderung berjalan lebih cepat - sulit untuk merekomendasikan Firebug saat ini.
Bob