Просмотр динамически формируемого содержимого HTML страницы в браузере
При разработке и отладке клиентских сценариев может возникать необходимость просмотра содержимого HTML документа, элементы которого формируются
JavaScript кодом.
Рассмотрим код следующей HTML страницы (заголовки h2 и h3 выводятся сценарием):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<hr>
<h1>Заголовок 1</h1>
<script language="javascript">
document.write("<p><h2>Заголовок 2</h2>");
document.write("<p><h3>Заголовок 3</h3>");
</script>
<hr>
</body>
</html>
Данная страница в браузере будет иметь следующий вид:

При просмотре содержимого загруженной страницы в браузере мы увидим именно указанный выше код.
А как же посмотреть динамически сформированное содержимое?
Для решения этой задачи в браузере Mozilla Firefox можно поступить следующим образом:
1. Выделим содержимое документа, нажатием комбинации клавиш Ctrl+A
2. Далее на выделенной области нажимаем правую кнопку мыши и в контекстном меню выбираем пункт "Просмотр исходного кода выделенного фрагмента"
3. В новом окне видим код динамически сформированного содержимого страницы:

Ниже будет показан универсальный способ решения задачи просмотра динамически формируемого содержимого, который работает и в
Microsoft Internet Explorer, и в Mozilla Firefox.
Достаточно в адресной строке браузера набрать следующую команду:
javascript: void window.open("","_blank").document.write("<xmp>" + document.body.parentNode.innerHTML + "</xmp>")
В результате выполнения данной команды будет открыто новое окно браузера с кодом содержимого страницы.
Для Internet Explorer оно будет иметь следующий вид:

Т.о. с помощью указанной команды можно просмотреть динамически сформированное содержимое HTML страницы.
|