Использование инспектора страниц для Visual Studio 2012 в веб-формах ASP.NET

по Тим Амманн

Инспектор страниц для Visual Studio 2012 — это средство веб-разработки с интегрированным браузером. Выберите любой элемент в интегрированном браузере, и Инспектор страниц мгновенно заподсвечивает источник элемента и CSS. Можно просматривать любую страницу в приложении, быстро находить источники отображаемой разметки и использовать средства браузера непосредственно в среде Visual Studio.

В этом учебнике показано, как включить режим проверки, а затем быстро находить и редактировать правила CSS и текст в веб-проекте. В этом учебнике используется проект приложения Web Forms, но можно также использовать Инспектор страниц для проектов веб-сайтов и приложений MVC .

Учебник содержит следующие разделы.

Предварительные требования

Создание веб-приложения

Использование Инспектор страниц для просмотра приложения

Включить режим проверки

Использование Инспектор страниц для внесения изменений в разметку

режим проверки и окно HTML

Предварительный просмотр изменений CSS в окне "стили"

Автоматическая синхронизация CSS

Использование выбора цвета CSS

предварительные требования

Note

Чтобы получить последнюю версию Инспектор страниц, используйте установщик веб-платформы для установки пакета Azure SDK для .NET 2,0.

Инспектор страниц входит в состав инструменты разработчика Microsoft Web. Последняя версия — 1,3. Чтобы проверить, какая версия установлена, запустите Visual Studio и выберите о Microsoft Visual Studio в меню " Справка ".

Создание веб-приложения

Сначала необходимо создать веб-приложение, которое будет использоваться Инспектор страниц с. В Visual Studio выберите файл > Новый проект. В левой части разверните узел визуальный C# элемент, выберите веб, а затем выберите приложение ASP.NET Web Forms.

Новое приложение веб-форм

Нажмите кнопку ОК.

Приложение откроется в представлении исходного кода .

Новое приложение Web Forms в представлении исходного кода

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

Использование Инспектор страниц для просмотра приложения

Теперь приложение будет просматриваться с Инспектор страниц. В Обозреватель решенийщелкните правой кнопкой мыши проект и выберите пункт Просмотреть в инспектор страниц.

Просмотреть в инспекторе страниц

По умолчанию при первом запуске Инспектор страниц он закрепляется в виде узких окон в левой части среды Visual Studio. Оставьте закрепленный с левой стороны и задайте для него ширину, удобную для вас, или закрепите ее в одной из областей, расположенных в верхней, нижней или правой части окна.

Инспектор страниц позиции закрепления

Если вы открепите Инспектор страниц окно, его можно поместить за пределы Visual Studio или даже на втором мониторе, если таковой имеется. Однако, чтобы ALT + TAB между Инспектор страниц и Visual Studio, когда Инспектор страниц окно не закреплено, последовательно выберите пункты сервис > параметры > Среда > вкладки и окна, а такжеснимите флажок плавающие окна инструментов всегда находятся поверх главного окна:

Снимите флажок плавающие окна инструментов, чтобы ALT + TAB между Visual Studio и незакрепленным Инспектор страниц окном.

В верхней области окна Инспектор страниц отображается текущая страница в окне браузера. В нижней области отображается страница в разметке HTML слева, а также некоторые вкладки справа, позволяющие проверять различные аспекты страницы. Нижняя панель аналогична средства для разработчикову F12 в Internet Explorer. (Однако, в отличие от средств разработчика, вы можете использовать Инспектор страниц прямо в Visual Studio.)

Инспектор страниц

В этом руководстве вы будете использовать панель браузера Инспектор страниц, а также вкладки HTML и стили , помогающие быстро перемещаться в приложение и вносить в него изменения.

Включить режим проверки

Далее вы узнаете, как работает режим проверки Инспектор страниц. В окне Инспектор страниц нажмите кнопку проверить .

Проверить элемент

Чтобы увидеть режим проверки в действии, наведите указатель мыши на различные части страницы в Инспектор страниц окне браузера. При этом указатель мыши превращается в большой знак «плюс», и элемент под ним выделяется.

Наведение указателя мыши на div. Content-упаковщик

При перемещении указателя мыши Обратите внимание на то, что

  • Содержимое в представлении исходного кода изменяется для отображения разметки, соответствующей выбранному элементу на странице. Соответствующая разметка выделена. Если источник находится в другом файле, этот файл открывается в представлении исходного кода с выделенной подходящим разметкой.

  • Разметка, отображаемая на вкладке HTML в инспектор страниц, также изменяется в соответствии с выбранным элементом на странице. На вкладке HTML соответствующая разметка обтроена.

  • На вкладке стили ОТОБРАЖАЮТСЯ правила CSS, относящиеся к текущему выделению.

Использование Инспектор страниц для внесения изменений в разметку

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

Поставьте Инспектор страниц в режим проверки и прокрутите домашнюю страницу вниз.

После ввода нижнего колонтитула Инспектор страниц открывает файл макета site. master в представлении исходного кода во временной вкладке справа от других вкладок и выделяет выбранный раздел главной страницы. В этом примере показано, как Инспектор страниц может находить и отображать содержимое на странице, которая может быть взята из файла, отличного от того, который был изначально открыт.

Выделение нижнего колонтитула в режим проверки

В окне браузера Инспектор страниц наведите указатель мыши на строку с уведомлением об авторских правах.

На странице site. master выделена соответствующая строка.

Выделенная строка авторских прав нижнего колонтитула

Добавьте текст в конец строки в файле site. master .

<p>&Copy; <%: DateTime. Now. Year%>-мой ASP.NET приложение Rocks!</p>

Теперь нажмите клавиши CTRL + ALT + ВВОД или щелкните панель обновления, чтобы просмотреть результаты в окне браузера Инспектор страниц.

Мой ASP.NET приложение Rocks!

Возможно, вы считали, что нижний колонтитул был на странице Default. aspx , но он был на странице макета образца и инспектор страниц его найти.

режим проверки и окно HTML

Теперь вы сможете быстро взглянуть на окно HTML и то, как оно сопоставляет элементы.

Поставьте Инспектор страниц в режим проверки.

Проверить элемент

Щелкните верхнюю часть страницы с текстом "Ваша Эмблема". Вы проведете анализ определенного элемента более подробно, поэтому отображение в окне браузера больше не изменяется при перемещении указателя мыши.

Теперь наведите указатель мыши на окно HTML . При перемещении указателя мыши Инспектор страниц отображает элемент в окне HTML и выделяет соответствующий элемент в окне браузера.

Окно HTML

Как и ранее, Инспектор страниц открывает файл site. master на временной вкладке. Перейдите на вкладку site. master, и соответствующая разметка выделяется в заголовке <> разделе:

Выделенная разметка

Предварительный просмотр изменений CSS в окне "стили"

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

Нажмите кнопку " проверить ", чтобы добавить Инспектор страниц в режим проверки.

В окне браузера Инспектор страниц наведите указатель мыши на раздел "Домашняя страница", пока не появится метка div. Content-упаковщик .

Наведение указателя мыши на элементы

Щелкните один раз в разделе div. Content-оберток, а затем переместите указатель мыши в окно стили . В селекторе класса. популярное. Content-оберток снимите флажок и установите флажок для свойства цвет фона.

Очистить цвет фона

Обратите внимание на то, как мгновенно просмотреть изменения в окне браузера Инспектор страниц.

Снова установите флажок, затем дважды щелкните значение свойства и измените его на red. Это изменение показано немедленно:

Красный цвет фона

Окно стили упрощает тестирование и предварительный просмотр изменений в CSS перед фиксацией изменений в самой таблице стилей.

Автоматическая синхронизация CSS

Note

Для этой функции требуется версия 1,3 Инспектор страниц.

Функция автоматической синхронизации CSS позволяет непосредственно редактировать CSS-файл и немедленно просматривать изменения в обозревателе Инспектор страниц.

Нажмите кнопку проверить , чтобы перевести Инспектор страниц в режим проверки.

В браузере Инспектор страниц наведите указатель мыши на раздел "Домашняя страница", пока не появится метка div. Content-упаковщик . Щелкните один раз, чтобы выбрать этот элемент.

В окне стили отображаются все правила CSS для этого элемента. Прокрутите вниз, чтобы найти селектор класса. Избранное. Content-оберток. Щелкните ". Избранное. Content-упаковщик". Инспектор страниц открывает CSS-файл, который определяет этот стиль (site. CSS) и выделяет соответствующий стиль CSS.

Файл CSS

Теперь измените значение background-color на "Red". Это изменение отображается сразу в Инспектор страниц браузере.

Браузер Инспектор страниц

Использование выбора цвета CSS

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

Нажмите кнопку проверить .

Проверить элемент

В окне браузера Инспектор страниц наведите указатель мыши на выделенный текст "видео, учебники и примеры", чтобы появилась метка CSS "марка".

Наведение указателя мыши на элемент Mark

Щелкните текст, чтобы выбрать его. В нижней части окна стили появится соответствующий селектор CSS.

Выбор метки в окне "стили"

Щелкните элемент выбора метки. Откроется файл site. CSS для веб-приложения. Перейдите на вкладку site. CSS, и соответствующие CSS для селектора выделяются:

пометить селектор в таблице стилей

Выберите и удалите линию со свойством цвет фона.

Теперь вы будете использовать новое средство выбора цвета CSS Visual Studio 2012, чтобы выбрать новый цвет для свойства метки фона.

Использование средства выбора цвета CSS в Visual Studio 2012

Редактор CSS в Visual Studio 2012 имеет палитру цветов, которая позволяет легко выбирать и вставлять цвета. Он имеет простую цветовую полоску и «всплывающий элемент выбора», предлагающий более точный контроль.

Палитра цветов включает стандартную палитру цветов, поддерживает стандартные имена цветов, хэш-коды, RGB, RGBA, HSL и ХСЛА, а также поддерживает список цветов, использовавшихся в документе последними.

В строке со свойством цвет фона введите BC и нажмите клавишу Стрелка вниз.

При вводе первого символа каждого слова в свойстве, разделенном дефисом, например "Background-Color", IntelliSense фильтрует список для отображения только тех свойств, которые соответствуют:

Отфильтрованные значения IntelliSense

Теперь введите двоеточие. При этом вставляется полное имя свойства цвета фона. Введите # или RGB ( , и появится панель выбора цвета:

Панель выбора цвета CSS

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

Предварительный просмотр значения свойства цвета фона

На этом этапе можно нажать клавишу ВВОД, чтобы выбрать значение, а затем точку с запятой (;) для завершения записи CSS. Сейчас перейдите к следующему разделу, чтобы увидеть, как работает всплывающее окно палитры цветов.

Использование всплывающего окна «Палитра цветов»

Если цветовая шкала не имеет точного цвета, которую вы ищете, можно использовать всплывающее окно палитры цветов.

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

Всплывающее окно выбора цвета CSS

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

Если на экране компьютера есть цвет, который вы хотите использовать (он не должен находиться в пользовательском интерфейсе Visual Studio), его значение можно записать с помощью инструмента "Пипетка" в правом нижнем углу.

Можно также изменить прозрачность цвета, переместив ползунок в нижней части палитры цветов. При этом значения цвета изменяются на значения RGBA, поскольку формат RGBA может представлять непрозрачность.

После выбора цвета нажмите клавишу ВВОД, а затем введите точку с запятой, чтобы завершить запись в фоновом режиме в файле site. CSS .

Панель обновления Инспектор страниц

Инспектор страниц немедленно обнаруживает изменение файла site. CSS (или любого файла в приложении) и отображает предупреждение на панели обновления.

Обновить панель

Чтобы сохранить все файлы и обновить обозреватель Инспектор страниц, нажмите клавиши CTRL + ALT + ВВОД или щелкните панель обновления. Изменение цвета выделения отображается в браузере:

Цвет выделения изменен

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

См. также:

Знакомство с инспектор страниц (видео на канале 9)

Инспектор страниц сообщения об ошибках (MSDN)