company_banner

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


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

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

    Чтобы адресовать эту проблему в 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 и далее этого изменения не требуется.
    clip_image002[4]
    Рис.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 знает все о вашем серверном коде и подскажет вам как и откуда появился тот или иной кусочек страницы, моментально перенеся вас в серверный код на нужное место.
    • +32
    • 15,2k
    • 8
    Microsoft
    486,00
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Поделиться публикацией

    Комментарии 8

      +14
      Да, выделение серверного кода — это супер, не поспоришь.
        +9
        Да, новый VS 2012 получается очень вкусным. Что ни пост про VS, то очень ценная плюшка.
          0
          В Page Inspector насколько я понимаю используется IE. А какой версии, можно ли использовать другой браузер?
            +1
            Да, используется текущий установленный в системе Internet Explorer

            Другой использовать нельзя, в том числе потому, что встроить в среду студии его не получится.
            0
            Выделение серверного кода возможно только для .Net 4 и выше. Жаль…
              +10
              Я уже перевёл все свои проекты на .NET 4. Это оказалось легче легкого, с хостингом тоже проблем нет.
                0
                В большинстве случаев так оно и есть. Просто когда проект привязан к некой системе, которую сверхтяжело перевести на .Net 4, то получается нехорошо
              +1
              Шикаааарно.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое