Различия: просмотр исходной страницы и просмотр в Firebug

Question

Когда я просматриваю исходный код страницы (например, вот так: http://my.sa.ucsb.edu/public/curriculum/coursesearch.aspx), там не так уж много кода / информации. Например, на этой связанной странице не отображается информация о классе источник страницы.

НО: когда я смотрю его в firebug, я вижу намного больше html-информации. Например, я могу видеть всю информацию о классе в таблицах.

Почему это? Как я могу получить полный доступ (Firebug HTML)? Могу ли я сделать это в php / javascript?

Answer 1

В таком порядке происходит:

1. PHP генерирует HTML
2. Браузер загружает HTML
3. JavaScript манипулирует загруженным HTML

Почему это?

Функция просмотра исходного кода обычно отображает обычный HTML-код, полученный браузером. Другие продвинутые инструменты, такие как Firefug, могут отображать текущий HTML после изменения JavaScript. (Сам Firefox также имеет эту функцию: просто щелкните правой кнопкой мыши на сгенерированном HTML и выберите «Просмотр выбранного источника».)

Как я могу получить полный доступ (firebug html)?

Я не уверен насчет вкладки HTML, но на вкладке Сеть всегда отображаются документы, полученные с сервера.

Могу ли я сделать это в php / javascript?

PHP больше не работает, когда исходный HTML-код достигает браузера.

JavaScript может отображать HTML со свойством .innerHTML любого узла DOM.

Answer 2

Просмотр исходного кода просто показывает вам HTML, загруженный с сервера, что означает, что любые изменения, внесенные в DOM после загрузки страницы, не будут показаны. Источник страницы показывает вам только первый источник после завершения загрузки страницы.

С другой стороны, Firebug динамичен и показывает вам DOM и как с ним манипулируют. Когда DOM изменяется, источник Firebug также изменится. Это важно для отладки, так как вы можете видеть, что происходит на самом деле, в отличие от View Source.

Answer 3

Просмотр источника показывает, что браузер получил с сервера. Firebug показывает DOM браузера - то есть представление представления страницы, которое существует в памяти браузера. DOM может быть изменен с помощью Javascript. Javascript может получить доступ к DOM, используя значение document, а затем перейти к его дочерним элементам и т. Д.

Если вы хотите, чтобы весь контент DOM представлял собой HTML, вы можете сделать что-то вроде document.getElementsByTagName('html')[0].innerHTML

Answer 4

Просмотр исходного кода дает вам источник страницы при ее загрузке, чтобы получить текущий html, есть опция в инструменте веб-разработчика (дополнение Firefox) - «Просмотр сгенерированного источника»

в меню:

view source -> view generated source

Answer 5

Источник страницы показывает вам HTML, когда страница была загружена в первый раз.Он не показывает изменения, сделанные с использованием JavaScript и т. Д. После загрузки страницы или после нажатия любой кнопки на веб-странице.Для просмотра видимой в данный момент DOM вы можете использовать следующее:

Для IE / firefox работают следующие букмарклеты: https://www.squarefree.com/bookmarklets/webdevel.html#generated_source

Для Google Chrome щелкните правой кнопкой мыши по любому элементу и выберите «Проверить».Элемент 'вариант.Он покажет положение элемента в DOM.Теперь щелкните правой кнопкой мыши на «

». Для Opera щелкните правой кнопкой мыши на любом элементе и выберите «Проверить элемент».Это запустит оперу Стрекоза.В окне «Стрекоза» нажмите кнопку «Развернуть дерево DOM» (первая кнопка с точкой и двумя стрелками), а затем кнопку «Экспортировать текущую панель DOM» (вторая кнопка)

В IE откройте веб-страницу инажмите F12, чтобы открыть инструменты разработчика.Нажмите View-> Source-> DOM (page) или нажмите Ctrl + Shift + G в окне инструментов разработчика.Это покажет полный видимый в данный момент DOM.

Для Firefox, альтернативой является Расширение панели инструментов веб-разработчика и выберите View Source-> View Generated source in the.

Answer 6

При просмотре источника с помощью «Просмотр источника» просматриваемый HTML-код представляет собой HTML-адрес URL-адреса, в котором вы находитесь, и HTML-код без каких-либо изменений с помощью JavaScript и подобного рода.Кроме того, если на странице есть фреймы или фреймы в коде, их содержимое также не будет отображаться.

Вместо этого в firebug динамически изменяется на HTML и содержимое фреймов / фреймов будет видно.

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

Обход HTML-кода с помощью JavaScript всегда будетвернуть полностью обновленный HTML-код.(то есть то, что вы увидите в firebug)

Я не уверен, как вы хотите получить доступ к HTML с помощью PHP, но PHP не имеет доступа к коду после того, как он достигает браузера.Но если вы отправляете URL-адрес в PHP для загрузки HTML-кода, у вас будет исходный HTML-код перед любыми динамическими изменениями (т. Е. Тот, который вы увидите в «View Source»)

Answer 7

Также firebug покажет вам файл css, который будет просто нацелен на основной HTML через

<link rel="stylesheet" type="text/css" href="css">

Поэтому показываю дополнительную информацию.