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

Источник: habrahabr

XaocCPS

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

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

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

Page Inspector

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

clip_image001[4]

Рис.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).

clip_image003[4]

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

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

clip_image004[4]

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

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

clip_image005[4]

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

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

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

clip_image006[4]

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

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

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

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

clip_image007[4]

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

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

Работа с CSS

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

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

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

clip_image008[4]

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

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

clip_image009[4]

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

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

clip_image010[4]

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

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

clip_image011[4]

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

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

Работа с HTML

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

clip_image012[7]

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

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

Заключение

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

Ссылки по теме