Использование Инспектор страниц с интегрированным браузером в ASP.NET MVC
Тим Амманн
Инспектор страниц в Visual Studio 2012 — это средство разработки веб-сайтов с интегрированным браузером. Выберите любой элемент в интегрированном браузере и Инспектор страниц мгновенно выделяет источник элемента и CSS. Вы можете просматривать любое представление MVC, быстро находить источники отрисовки разметки и использовать средства браузера прямо в среде Visual Studio.
В этом руководстве показано, как включить режим проверки, а затем быстро найти и изменить разметку и CSS в веб-проекте. В этом руководстве используется проект MVC, но вы также можете использовать Инспектор страниц для веб-формы и других приложений ASP.NET.
В этом руководстве приведены следующие разделы:
- Необходимые условия
- Создание веб-приложения
- Использование Инспектор страниц для перехода к представлению
- Включение режима проверки
- Использование Инспектор страниц для внесения изменений в разметку
- Режим проверки и окно HTML
- Предварительный просмотр изменений CSS в окне "Стили"
- Автоматическая синхронизация CSS
- Использование средства выбора цветов CSS
- Сопоставление динамических элементов страницы с JavaScript
Необходимые компоненты
Примечание.
Чтобы получить последнюю версию Инспектор страниц, используйте установщик веб-платформы для установки пакета SDK Для Windows Azure для .NET 2.0.
Инспектор страниц упаковается с инструменты разработчика Microsoft Web. Последняя версия — 1.3. Чтобы проверить, какая версия у вас есть, запустите Visual Studio и выберите "О Microsoft Visual Studio" в меню справки.
Создание веб-приложения
Сначала создайте веб-приложение, с которым вы будете использовать Инспектор страниц. В Visual Studio последовательно выберите Файл>Создать проект. Слева разверните visual C#, выберите веб-приложение и выберите ASP.NET веб-приложение MVC4.
Щелкните OK.
В диалоговом окне "Новый ASP.NET проект MVC 4" выберите "Интернет-приложение". Оставьте Razor в качестве обработчика представлений по умолчанию.
Приложение открывается в представлении источника .
Теперь, когда у вас есть приложение для работы, можно использовать Инспектор страниц для изучения и изменения приложения.
Использование Инспектор страниц для перехода к представлению
В Visual Studio 2012 вы можете щелкнуть правой кнопкой мыши любое представление в проекте, выбрать представление в Инспектор страниц и Инспектор страниц вычислит маршрут и отобразит страницу.
В Обозреватель решений разверните папку Views и папку "Главная". Щелкните правой кнопкой мыши файл Index.cshtml и выберите "Вид" в Инспектор страниц.
По умолчанию Инспектор страниц закреплены как окно слева от среды Visual Studio. Если вы предпочитаете, вы можете закрепить его в другом месте или открепить окно. См . инструкции. Упорядочивание и закрепление окон.
В верхней области окна Инспектор страниц отображается текущая страница в окне браузера. В нижней области показана страница в разметке HTML, а также некоторые вкладки, позволяющие проверять различные аспекты страницы. Нижняя панель похожа на средства разработчика F12 в Internet Explorer.
В этом руководстве вы будете использовать вкладки HTML и стили для быстрого перехода и внесения изменений в приложение.
Режим EnableInspection
Чтобы поместить Инспектор страниц в режим проверки, нажмите кнопку "Проверить". В режиме проверки при удержании указателя мыши на любую часть отрисованной страницы выделен соответствующий исходный разметка или код.
Теперь переместите указатель мыши на разные части страницы в Инспектор страниц. При этом указатель мыши изменяется на знак "большой плюс", а элемент под ним выделен:
При перемещении указателя мыши Visual Studio выделяет соответствующий синтаксис Razor в исходном файле. Если HTML-элемент поступает из другого исходного файла, Visual Studio автоматически открывает файл.
В Инспектор страниц на вкладке HTML отображается HTML-код, созданный из синтаксиса Razor. При перемещении указателя мыши выделены элементы HTML. На вкладке "Стили" отображаются правила CSS для элемента.
Использование Инспектор страниц для внесения изменений в разметку
Инспектор страниц позволяет найти разметку, расположение которой может быть не очевидно. Затем можно изменить разметку и просмотреть полученные изменения.
Чтобы увидеть это, нажмите кнопку "Проверить", а затем прокрутите страницу внизу страницы в окне Инспектор страниц.
При перемещении указателя мыши в область нижнего колонтитула Инспектор страниц открывается файл _Layout.cshtml и выделяется раздел выбранной страницы макета. Как видно, область нижнего колонтитула определена в файле макета, а не в самом представлении.
Теперь переместите указатель мыши на строку с уведомлением об авторских правах . На странице _Layout.cshtml выделена соответствующая строка.
Добавьте текст в конец строки в файле _Layout.cshtml.
<p>© @DateTime.Now.Year - Мои ASP.NET MVC Application Rocks!</p>
Теперь нажмите клавиши CTRL+ALT+ВВОД или щелкните панель обновления, чтобы просмотреть результаты в окне браузера Инспектор страниц.
Возможно, вы думали, что нижний колонтитул, определенный в Index.cshtml, но он оказался в _Layout.cshtml, и Инспектор страниц нашел его для вас.
Режим проверки и окно HTML
Затем вы увидите в окне HTML и о том, как он сопоставляет элементы.
Нажмите кнопку "Проверить", чтобы поместить Инспектор страниц в режим проверки.
Щелкните верхнюю часть страницы, которая говорит "Ваш логотип здесь". Вы изучаете конкретный элемент более подробно, поэтому отображение в окне браузера больше не изменяется при перемещении указателя мыши.
Теперь переместите указатель мыши на окно HTML . При перемещении указателя мыши Инспектор страниц описывает элемент в окне HTML и выделяет соответствующий элемент в окне браузера.
Как и раньше, Инспектор страниц открывает файл _Layout.cshtml для вас на временной вкладке. Щелкните временную вкладку _Layout.cshtml, а соответствующая разметка будет выделена в <разделе заголовка>:
Предварительный просмотр изменений CSS в окне стилей
Затем вы будете использовать окно стилей Инспектор страниц для предварительного просмотра изменений в CSS.
Нажмите кнопку "Проверить", чтобы поместить Инспектор страниц в режим проверки.
В окне браузера Инспектор страниц переместите указатель мыши на раздел "Домашняя страница", пока не появится метка оболочки div.content-wrapper.
Щелкните один раз в разделе оболочки div.content-wrapper, а затем переместите указатель мыши в окно "Стили ". В окне "Стили " отображаются все правила CSS для этого элемента. Прокрутите вниз, чтобы найти селектор класса .featured .content-wrapper. Теперь снимите флажок для свойства фона цвета.
Обратите внимание, что предварительные версии изменений мгновенно отображаются в окне браузера Инспектор страниц.
Снова установите флажок, а затем дважды щелкните значение свойства и измените его на красный. Изменение отображается немедленно:
Окно стилей упрощает тестирование и просмотр изменений CSS перед фиксацией изменений в самой таблице стилей.
Автоматическая синхронизация CSS
Примечание.
Для этой функции требуется версия 1.3 Инспектор страниц.
Функция автоматической синхронизации CSS позволяет напрямую редактировать CSS-файл и сразу видеть изменения в браузере Инспектор страниц.
Нажмите кнопку "Проверить", чтобы поместить Инспектор страниц в режим проверки.
В браузере Инспектор страниц переместите указатель мыши на раздел "Домашняя страница", пока не появится метка оболочки div.content-wrapper. Щелкните один раз, чтобы выбрать этот элемент.
В окне "Стили " отображаются все правила CSS для этого элемента. Прокрутите вниз, чтобы найти селектор класса .featured .content-wrapper. Щелкните .featured .content-wrapper. Инспектор страниц открывает CSS-файл, определяющий этот стиль (Site.css), и выделяет соответствующий стиль CSS.
Теперь измените значение background-color на "красный". Изменение отображается сразу же в браузере Инспектор страниц.
Использование средства выбора цветов CSS
В редакторе CSS в Visual Studio 2012 есть средство выбора цветов, которое упрощает выбор и вставку цветов. Средство выбора цветов включает стандартную палитру цветов, поддерживает стандартные цвета, хэш-коды, RGB, RGBA, HSL и HSLA цвета и поддерживает список цветов, которые вы использовали в документе.
В предыдущем разделе вы изменили значение background-color свойства. Чтобы вызвать средство выбора цвета, поместите точку вставки после имени свойства и типа # или rgb(.
Щелкните цвет, чтобы выбрать его, или нажмите клавишу СТРЕЛКА ВНИЗ, а затем используйте клавиши со стрелками влево и вправо для обхода цветов. При посещении цвета отображается соответствующее шестнадцатеричное значение:
Если цветовая панель не имеет точного цвета, вы можете использовать всплывающее окно выбора цветов. Чтобы открыть его, щелкните двойной шеврон в правой части цветовой панели или нажмите клавишу СТРЕЛКА ВНИЗ один или два раза на клавиатуре.
Щелкните цвет из вертикальной полосы справа. Здесь показан градиент для этого цвета в главном окне. Выберите цвет непосредственно на вертикальной панели, нажав клавишу ВВОД или щелкнув любую точку в главном окне, чтобы выбрать более высокую точность.
Если на экране компьютера есть цвет , который вы хотите использовать (он не должен находиться внутри пользовательского интерфейса Visual Studio), вы можете записать его значение с помощью средства глазной капоты в правом нижнем углу.
Вы также можете изменить прозрачность цвета, переместив ползунок в нижней части средства выбора цвета. Это изменяет значения цвета на значения RGBA, так как формат RGBA может представлять непрозрачность.
После выбора цвета нажмите клавишу ВВОД, а затем введите точку с запятой, чтобы завершить запись цвета фона в файле Site.css .
Панель обновления Инспектор страниц
Инспектор страниц немедленно обнаруживает изменение Site.css файл и отображает оповещение в строке обновления.
Чтобы сохранить все файлы и обновить браузер Инспектор страниц, нажмите клавиши CTRL+ALT+ВВОД или щелкните строку обновления. Изменение цвета выделения отображается в браузере.
Сопоставление динамических элементов страницы с JavaScript
В современных веб-приложениях элементы на странице часто создаются динамически с помощью JavaScript. Это означает, что статическая разметка (HTML или Razor) не соответствует этим элементам страницы.
В версии 1.3 Инспектор страниц теперь могут сопоставлять элементы, которые были динамически добавлены на страницу обратно в соответствующий код JavaScript. Чтобы продемонстрировать эту функцию, мы будем использовать шаблон одностраничного приложения (SPA).
Примечание.
Шаблон SPA требует обновления ASP.NET и веб-инструментов 2012.2 .
В Visual Studio последовательно выберите Файл>Создать проект. Слева разверните visual C#, выберите веб-приложение и выберите ASP.NET веб-приложение MVC4. Щелкните OK.
В диалоговом окне "Новый ASP.NET проект MVC 4" выберите одностраничные приложения.
В Обозреватель решений разверните папку Views и папку "Главная". Щелкните правой кнопкой мыши файл Index.cshtml и выберите "Вид" в Инспектор страниц.
Первое, что отображается в браузере Инспектор страниц, — это страница входа. Нажмите кнопку "Регистрация" и создайте имя пользователя и пароль. После регистрации приложение регистрируется и создает список дел с некоторыми примерами элементов.
Нажмите кнопку "Проверить", чтобы поместить Инспектор страниц в режим проверки. В браузере Инспектор страниц щелкните один из элементов. Обратите внимание, что вместо выделения в синем цвете элемент выделен оранжевым цветом, а "JS" рядом с именем элемента. Это означает, что элемент был создан динамически с помощью скрипта.
Кроме того, на вкладке "Стек вызовов" появится оранжевый подчеркивание. Это означает, что на панели "Стек вызовов" есть дополнительные сведения об элементе.
Щелкните вкладку "Стек вызовов ". На панели "Стек вызовов" показан стек вызовов JavaScript, созданный элементом. Вызовы внешних библиотек, таких как jQuery, свернуты, чтобы вы могли легко видеть вызовы скрипта приложения.
Чтобы просмотреть полный стек, включая вызовы внешних библиотек, можно развернуть узлы с меткой "Внешние библиотеки":
Если щелкнуть элемент в стеке вызовов, Visual Studio открывает файл кода и выделяет соответствующий скрипт.
См. также
Введение в ASP.NET MVC 4 с Visual Studio (веб-сайт ASP.net)
Знакомство с Инспектор страниц (видео канала 9)
сообщения об ошибках Инспектор страниц (MSDN)