Эффективная веб-разработка c Visual Studio 2012: Page Inspector

В любых веб-проектах часто возникает задача изменения старых страниц, элементов управления, компоновки страниц, разметки и так далее. Легко держать в памяти всю структуру веб-проекта когда у вас в проекте небольшое количество страниц. Другое дело, когда таких страниц сотни, а формируются они на базе шаблонов, мастер-страниц, элементов управления и вложенных в них других элементов управления.

Разобраться в такой, порой запутанной, системе рендеринга страниц бывает очень непросто. Особенно это актуально для специалистов, которые только приступили к работе над сложным проектом или которым старый проект достался для поддержки.

Чтобы адресовать эту проблему в Visual Studio 2012 добавлен новый инструмент Page Inspector, который позволяет исследовать веб-страницы вашего проекта не просто в виде результирующей разметки на стороне клиента, как это делают Internet Explorer Developer Tool или Firebug, но с привязкой к коду на стороне сервера, который эту разметку генерирует.

Page Inspector

Если вы запустите Visual Studio 2012 и загрузите любой проект с веб-приложением (можно создать новый на основе MVC4), то в панели инструментов вы найдете элемент позволяющий выбрать браузер для запуска вашего веб-приложения (рисунок 1).


Рис.1. Выбор браузера для запуска веб-приложения

Среди списка установленных у вас в системе браузеров будет новый элемент Page Inspector, который позволяет запускать приложения для более детального исследования, чем это возможно в любом из браузеров.

Выбрав в спиcке Page Inspector вы можете запустить свое приложение на выполнение. Вместо браузера оно будет запущено внутри UI среды разработки (рисунок 2).

Замечание. В предварительных версиях Visual Studio 11 для запуска Page Inspector требовалось изменение (автоматическое) файла web.config для добавления одного параметра. В Visual Studio 2012 RC и далее этого изменения не требуется.

Рис.2. Запущенный Page Inspector

Обратите внимание, наше приложение было запущено внутри Visual Studio 2012, которая предоставляет дополнительные инструменты для работы с веб-страницей.

Самая важная функция Page Inspector — это возможность инспектировать страницы, как это делает например Developer Tool в Internet Explorer, но в отличии от IE, наряду с полезной информацией о разметке и компоновке мы получаем информацию и о том, как именно была сгенерирована эта разметка, где в проекте, в каком файле и каким кусочком кода.

Например, нам нужно узнать, где генерируется строка "Log In" для того, чтобы заменить ее на строку "Вход". В зависимости от сложности проекта, на ваших страницах могут быть десятки компонент из разных файлов. Вот и на в нашем проекте существует файл компоновки, файл страницы и элемент управления. Что бы быстро найти нужное место может потребоваться достаточно много времени.

Page Inspector позволяет найти необходимый код в пару мгновений. Просто нажмите на "Inspect" и наведите указатель на строку "Log in". Все, необходимый код в необходимом компоненте, в необходимом файле сразу же появится перед вами (рисунок 3).


Рис.3. Поиск исходного кода

Нам осталось только внести изменения в код. Page Inspector автоматически отслуживает эти изменения и предлагает вам обновить страницу внутри браузера (рисунок 4).


Рис.4. Запрос на обновление страницы

Обновив страницу вы убедитесь в том, что сделали верное изменение (рисунок 5).


Рис.5. Измененная строчка на странице

Замечание. В Visual Studio 2012 RC вся работа Page Inspector сделана асинхронной, без блокировки основного UI среды разработки, что делает работу с ним гораздо более приятной.

Инспекция серверного кода очень полезная возможность. Вы можете очень легко исследовать разметку и построение ваших страниц. Например давайте определим, каким кодом строится подвал нашего сайта. Для этого нам просто нужно навести на него указатель мыши (рисунок 6).


Рис.6. Работа с подвалом сайта

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

Работа с текстом страницы

Одним из нововведений в Page Inspector по сравнению с промежуточными версиями Visual Studio 11 стала поддержка выделения текста на странице с синхронным выделением этого текста в коде серверного файла (рисунок 7).


Рис.7. Работа с текстом страницы, выделение

Это позволяет быстро выделить участок в коде относящийся к конкретному тексту и произвести с ним определенные действия.

Работа с CSS

Работа в Page Inspector с HTML и CSS напоминает такую же работу в инструментах типа Developer Tool или Firebug. Однако и тут у Page Inspector есть существенное преимущество: он позволяет автоматически находить все применяемые стили для исследуемого элемента страницы в коде CSS-файла на стороне сервера.

При работе со стилями CSS тоже существует проблема множества файлов и стилей, которые переопределяют друг друга. Как быстрее всего найти файл, CSS в котором нужно внести изменения?

Для примера, представим, что нам необходимо изменить цвет надписей "Register" и "Вход" (измененной нами ранее) на один из цветов используемых в разметке (красный?). С помощью инспектора выделяем необходимый элемент и снизу получаем стили CSS, которые к нему применяются. Перейдите на вкладку Trace Styles и вы обнаружите все конечные стили для нашего элемента (рисунок 8).


Рис.8. Стили элемента

Пока все выглядит так же как и в Firebug. Нас интересует цвет, поэтому раскройте элемент color и перейдите к последнему значению, которое переопределяет все предыдущие и применяется к элементу на странице (рисунок 9).


Рис.9. Список значений стиля

Следующий шаг делает Page Inspector особенным. Если вы теперь щелкните на одном из определений стиля, то вы мгновенно перейдете к тому файлу CSS на сервере, который это определение сгенерировал (рисунок 10).


Рис.10. Поиск серверного определения стилей

Нам осталось только указать нужный нам цвет для наших элементов на странице. Благодаря новинке Visual Studio 2012 — встроенному color picker сделать это еще проще (рисунок 11).


Рис.11. Выбор цвета из списка цветов определенных в файле CSS

По просьбе Page Inspector обновим страницу и убедимся, что изменения были проделаны успешно.

Работа с HTML

Для большей эффективности Page Inspector позволяет отслеживать по коду разметки результирующие блоки на самой странице (рисунок 12).


Рис.12. Отслеживание блоков на странице

Эта функция кроме понимания того, где рендерится тот или иной код разметки, позволяет получить еще и данные о его результирующих размерах.

Заключение

В этой статье рассмотрен одно из самых интересных нововведений в Visual Studio 2012 для эффективной работы с кодом разметки веб-приложений на клиентской стороне. В отличии от инструментов вроде Firebug и Developer Tool, Page Inspector знает все о вашем серверном коде и подскажет вам как и откуда появился тот или иной кусочек страницы, моментально перенеся вас в серверный код на нужное место.