Проверять элемент в Firefox, как в сафари?

0

Вот скриншот с учебной веб-страницы d3.js :

введите описание изображения здесь

Этот способ проверки в сафари довольно крутой, есть ли способ сделать это в Firefox?

Позвольте мне прояснить ситуацию, у меня есть страница со следующим источником:

<!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>

И, кажется, в сафари, для каждого

элемент, он отображает свойство с именем __data__, которое сценарий d3.js вводит в них.

введите описание изображения здесь

html javascript web QED
источник

Ответы:

1

Вы не проверяете HTML. Вы просматриваете результаты вызова функции JavaScript.

Консоль Firefox делает похожую вещь:

Скриншот

Обратите внимание, что ответом smc является правильный способ просмотра HTML / DOM.

Кроме того, я все еще работаю на одну версию старше; новая версия выглядит еще лучше (и достаточно умна, чтобы связываться с инспектором, местом, где вы должны проверять DOM).

боб
источник
Вы видите маленький треугольник на левой стороне? это не расширяется в Firefox, а в сафари.
Qed
Я добавил еще один скриншот в вопрос.
Qed
1
@qed Вы нажимаете на подчеркнутую часть, чтобы получить ее на правой стороне . Это не точный клон, и он не предназначен для этого. Он выполняет ту же функцию . Кроме того, FF Nightly (и, возможно, Beta / Aurora / 29) покажет некоторые подробности слева, но это не главное. Ваш второй скриншот не показывает ничего особенного: если __data__член существует, FF покажет это. Мой пример этого не делает, потому что я не могу потрудиться проверить ваш особый случай, когда генерал работает. Ваш d3скрипт не имеет ничего общего с работой консоли разработчика; это будет работать одинаково независимо от объекта, который вы проверяете.
Боб
1

Да, вы можете просто щелкнуть правой кнопкой мыши и выбрать «Осмотреть элемент (Q)»

введите описание изображения здесь

Тогда вы получите очень похожий интерфейс:

введите описание изображения здесь

Арт Гертнер
источник
Это другое, на скриншоте показана проверка в консоли, а также некоторые «скрытые» атрибуты, такие как proto и data
qed
1

При этом существует множество дополнений / расширений для Firefox, которые напоминают то, что вы просите. Популярным дополнением является: FireBug, который является частью веб-разработчика. Который будет разбит и покажет в режиме реального времени, какой фрагмент html / javascript / css отображается. Одно из многих предложений ...

Изменить: есть консоль на основе веб-разработчика. Я стою исправлено. Firebug расширяет функциональность консоли. Дополнительная информация о firebug должна графически показать, где элементы находятся внутри структуры страницы и как они взаимодействуют. Проверяйте HTML и изменяйте стиль и макет в режиме реального времени, точно анализируйте использование и производительность сети, проверяйте и редактируйте HTML-код, визуализируйте метрики CSS, отлаживайте JavaScript и профиль Javascript, ведите журналы для Javascript и продолжайте функционировать.

BlizzardsGambit
источник
1
У Firefox была встроенная консоль разработчика в течение многих месяцев. На самом деле, я уверен, что сейчас годы. Этот ответ неверен.
Боб
Несмотря на то, что часть Firefox не имеет встроенной консоли разработчика (что неправильно), было бы предпочтительно, если бы вы указали, что FireBug делает то, что хочет OP. Это, конечно, расширяет встроенные инструменты разработчика, но в какой степени?
Доктор Рейхард
Такое ощущение, что я на m in one those scientific journals... Very well, I donсамом деле отвечаю на вопросы на регулярной основе.
BlizzardsGambit
@ BlizzardsGambit Эх, мы ценим правильность. Не расстраивайся; просто исправьте это, изучите новые вещи и двигайтесь дальше. Я прошу прощения, если я был немного тупым в своем первоначальном комментарии. Между прочим, большинство / все функции Firebug теперь являются частью стандартной консоли разработчика, и стандартная консоль разработчика имеет тенденцию работать быстрее - в настоящее время трудно рекомендовать Firebug.
Боб