Меню Объяснение инструментов разработчиков IE8

Автор：Eve Cole Время обновления：2025-06-05 03:48:01

Эта статья кратко объяснила различные меню инструментов разработчика. Я считаю, что каждый может легко использовать этот мощный инструмент.

Подробное объяснение использования инструментов разработчиков IE8 (подробное объяснение меню на всех уровнях)

Официальная версия IE8 была выпущена. Эта статья не сделает никаких комментариев в очень чепухе, а затем приведет к выводу, что Chrome обладает способностью управлять JavaScript, который в 15 раз больше, чем IE8, который IE8 имеет в 2,456 раза больше, чем в Safari, а IE8 имеет в 1,235 раза выше Firefox. Кого меня волнует лучше, чем кто? Все, что я знаю, это: когда Windows 7 выпущен, доля рынка в браузере IE8 заставит разработчиков фронт-энда не может сказать: не беспокойтесь о IE8, немногие люди используют его. Итак, эта статья объяснит это очень прагматично. IE8 может быть единственным инструментом разработчика, который заставляет разработчиков чувствовать себя дружелюбными. В то же время мы продлим некоторую соответствующую информацию и знания. Итак, пожалуйста, оставьте свое предубеждение против IE8 и продолжайте терпеливо наблюдать.

Разве IE8 еще не установлен?

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

Список загрузки китайской версии IE8

Windows XP

Windows Vista

Windows Server 2003

Windows Server 2008

Windows XP 64-бит

Windows Vista 64-бит

Windows Server 2003 64-битный

Windows Server 2008 64-битный

Список загрузки английской версии IE8

Windows XP

Windows XP 64 -бит

Windows Vista

Windows Vista 64 бит

Windows Server 2003

Windows Server 2003 64 -битный

Windows Server 2008

Windows Server 2008 64 бит

О, может быть, вы будете беспокоиться, что IE6 или IE7 в вашей системе закончились. Да, действительно, это возможно. Тем не менее, вы можете попробовать следующий инструмент. Это позволяет вам сосуществовать с несколькими версиями IE - решения для сосуществования нескольких версий IE - Ietester

SuperPreview (с загрузкой)

Познакомьтесь с инструментами разработчиков

Хотя эта вещь изменила свое модное имя, это не новая вещь. Его предшественником был Iedevtoolbar. Тем не менее, это был просто плагин для IE. В IE8 браузер автоматически интегрировал эту штуку, которая не только изменила название немного деревенского, но также имеет много улучшения функций.

Инструменты разработчика также могут быть вызваны в меню «Инструменты» IE8 или напрямую щелкнуть клавишу ярлыка F12.

Прежде чем мы его представим, давайте поговорим о том, что эта вещь может сделать? Если вы просто используете браузер для просмотра веб -сайта, не беспокоясь о том, как сделана страница. Тогда я думаю, что вы можете покинуть эту страницу.

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

Хорошо, мы видели это и знаем, что он может сделать. Тогда давайте представим его один за другим в соответствии с порядком меню-

【Файл】 Меню

【Отмените все】

Все операции, выполненные в инструментах разработчика, были отменены, а структуры страницы и DOM обновляются.

【Пользовательский интернет -проводник попытки источника】

【Попробовать источник】 Какое гребаное существительное. Проще говоря, это: какой редактор использовать для просмотра файла веб -источника. Например: я использую EditPlus.

【покидать】

Чтобы не оскорблять ваш IQ, я мало что скажу об этом. Что ж, F12 - это ключ для паритета, давайте, кстати, упомянем об этом.

【Найти】 меню

Нажмите, чтобы выбрать элемент

Клавиша ярлыка Ctrl B имеет тот же эффект, что и нажатие кнопки ICO мыши на картинке. Наиболее часто используемая функция. Это также переключатель паритета. При открытии, нажав на элемент на странице с помощью мыши, будет выбран измененный элемент, а структура DOM, стиль CSS и другая информация модифицированного элемента будет перечислена.

Например, изображение выше. Область слева показывает информацию DOM для этого элемента гиперссылки. Его родительские, детские и братские элементы могут быть четко видны.

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

Друзья, которые использовали Firefox Firebug, должны быть знакомы с этим. Единственное отличие: Firebug организует стили с более низким приоритетом ниже, вот и все.

Функция просмотров [стиля прослеживания] и [стиля] одинакова, и они используются для просмотра информации о стиле выбранного элемента. Единственная разница в том, что она изменила свой метод просмотра. Конкретный взгляд на вашу привычку зависит от ваших собственных предпочтений.

[Mayout] Вид может отображать информацию о модели с выбранными элементами. Хотя он может отображать больше информации, чем Firebug, я все равно предпочитаю, чтобы путь в Firebug выражал его прямо на странице с цветными блоками.

[Свойства] представление может просмотреть информацию атрибута выбранного элемента. Это очень приятно: вы можете немедленно добавить или удалить некоторые свойства, чтобы быстро отлаживать страницу.

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

【Отключить меню

【Сценарий】

Сценарии JavaScript или VBScript на странице запрещены. Зачем это отключить? Чтобы проверить надежность страницы. Некоторые клиенты, которые имеют высокие требования к дизайну страницы, спросят: если клиент отключает сценарий, может ли эта страница по -прежнему использовать? Ну, да, эта функция используется для проверки извращенных потребностей этих чертовых клиентов.

【За блокировщик всплывающего окна】

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

【CSS】

CSS Nude Festival наступает! Используйте это, чтобы проверить позу вашей страницы при запуске в CSS. Это также важный тест для проверки надежности и доступности страницы. Хотя сейчас не так много слепых людей, которые могут получить доступ к веб -страницам в Китае.

【Посмотреть】 Меню

【Информация о классе и удостоверении личности】

Ключ ярлыка - это CTRL I, паритет. После его открытия вы увидите, что страница покрыта плотными красными цветными блоками. Имя класса или идентификатор будет отображаться. Да, это эффект просмотра класса и идентификационной информации. Но, честно говоря, кого заинтересованы в этом красном табурете? Мало того, что страница выглядит как одежда нищего, полную пятен, но также совершенно не знает об этом -_- b ...

【Путь ссылки】

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

【Отчет о ссылке】

Используя функцию отчета о ссылке, инструмент разработчика поможет вам создать отчет о ссылке для этой страницы. Включает в себя информацию, такую как количество ссылок, адрес ссылки, открыто новое окно и т. Д. Но каково использование этой вещи? Я тоже не знаю.

【Индекс вкладки】

Выделите все элементы, содержащие атрибуты TabIndex. Настройка свойства TabIndex может изменить порядок, в котором элементы веб -страницы получают фокус.

【Ключ доступа】

Выделите все элементы, содержащие атрибут AccessKey. Установите атрибут AccessKey, чтобы установить клавиши ярлыков для элементов, чтобы получить фокус.

【Источник исходного файла】 Источник элемента со стилем

Сгенерируйте исходный файл, содержащий стили выбранных элементов, HTML-код и информацию на уровне веб-сайта.

Элемент должен быть выбран до того, как эта команда будет действительной. Кроме того, сгенерированный исходный файл связан только с выбранными элементами.

【Исходный файл】 dom (элемент)

Ключ для ярлыка - Ctrl T. Сгенерировать исходный файл. Этот исходный файл содержит информацию о структуре DOM только для выбранного элемента. Друзья, которые использовали Firebug, могут подумать о элементе командной копии HTML -кода. На самом деле, этот похож на этот. Просто это генерируется в окно, а Firebug копируется непосредственно в буфер обмена.

【Исходный файл】 dom (page)

Ключ ярлыка Ctrl G. Сгенерировать исходный файл. Этот исходный файл содержит информационную структуру DOM всей страницы. Это очень чертовски особенность. Я не знаю, связано ли это из -за ошибки. Эта функция на самом деле для просмотра исходного кода веб -страницы. Потому что сгенерированный исходный код - это не только информация о DOM, но и информация о CSS и сценариях.

Исходный статус исходного файла 【】

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

【Счет】 Меню

Меню [Outline] - это, очевидно, является командой для наброска элементов, которые соответствуют условиям и отображают их.

【Таблица ячейка】

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

【поверхность】

Это для формирования формы в оранжевом каркасе . Позвольте вам знать-о. Оказывается, это форма формы.

【Div Elements】

Это использовать зеленые каркасы для всех элементов Div на странице. Позвольте вам знать-о. Оказывается, что это элементы Div.

【изображение】

Это для формирования всех элементов IMG на странице в фиолетовом каркасе . Позвольте вам знать-о. Оказывается, это все элементы IMG.

【Любой элемент】

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

【Элементы позиционирования】 Относительно

Он будет создан зеленым , все элементы с позицией: относительный стиль.

【Элемент позиционирования】 Абсолют

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

【Элемент позиционирования】 Исправлен

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

【Элемент позиционирования】 float

Он будет создан с желтыми каркасами , все элементы со стилем поплавки.

【Очистить контур】

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

【Изображение】 Меню

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

【Отключить изображения】

Чтобы не оскорбить ваш IQ, я не скажу этого. Единственное, что нужно объяснить, это то, что не только элемент IMG, но и фоновое изображение элемента будет отключено.

【Показать размер изображения】

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

【Показать размер файла изображения】

Очень хорошая особенность. Вы можете быстро узнать размер файла каждого изображения, не проверяя свойства изображения. Конечно, подразделение - байты.

【Показать путь изображения】

Очень хорошая особенность. Вы можете быстро узнать путь URL каждого изображения, не проверяя атрибуты изображения, и вы также можете скопировать его.

【Показать альтернативный текст】

Текст атрибута Alt элемента IMG может быть отображен. Кстати: не накапливайте ключевые слова для изображений, в противном случае это будет легко рассматриваться как оптимизация перехода SEO.

【Посмотреть отчет об изображении】

Создайте подробный отчет о изображении для изменения страницы. Содержит очень подробную информацию для каждого изображения.

【Кэш】 Меню

Управлять группами меню кэша и куки. Это будет очень приятная особенность для разработчиков.

【Всегда освежайте от сервера】

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

【Clear Browser Cache】

Ключ ярлыка Ctrl R. Нечего сказать, он просто упрощает предыдущие шаги операции.

Я не знаю, заметили ли вы, что в меню есть три точки [Clear Browser Cache]. Это означает, что диалоговое окно будет подтверждено после нажатия на это меню.

【Очистить кеш браузера для этого домена】

Ключ ярлыка Ctrl D. Нечего сказать, просто очистите кэш браузера в этом домене.

【Отключить файлы cookie】

Нет выгоды, чтобы сказать. Печенье не разрешено.

【Clear Session Cookies】

Очистите все печенье в вашем браузере. Ваш форум и сообщество ждут, чтобы войти снова.

【Очистите доменные файлы cookie】

Только четкие файлы cookie в этом домене.

【Посмотреть информацию о файлах cookie】

Посмотреть информацию об файле cookie, содержащуюся на этой странице. Даже не думайте об этом, вы не получите пароль.

【Инструменты】 Меню

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

【Изменение размера】

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

【Показать правитель】

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

【Показать цветовой сборщик】

Простой инструмент для выбора цвета. Нажмите на мышь, чтобы выбрать цвет. Тем не менее, я рекомендую вам еще один инструмент - мой рабочий инструмент - Colorpic, который слишком прост в инструментах разработчика.

【Проверка】 Меню

Это определенно вызовет кровавые штормы в мире (спасибо Сяоки за то, что напомнили мне об этой идиоме, которую я внезапно забыл, увы, потому что я читал меньше новейших романов боевых искусств. Но я, кажется, знаком с идиомами, такими как задыхаясь и недавно). В ближайшем будущем, безусловно, будет произведено бесчисленное количество Конг Иджи.

【Html】

Проверьте HTML -код страницы. Эта страница будет отправлена в инструмент проверки HTML W3C, и будет получен отчет о проверке.

【CSS】

Проверьте код CSS страницы. Эта страница будет отправлена в инструмент проверки CSS W3C, и будет получен отчет о проверке.

【источник】

Проверьте код исходного файла страницы. Эта страница будет отправлена в инструмент проверки FeedValidator.org, и будет получен отчет о проверке.

【Связь】

Проверьте ссылку на страницу. Эта страница будет отправлена в инструмент проверки W3C, и будет получен отчет о проверке.

【Локальный HTML】

Откройте инструмент проверки HTML W3C, чтобы проверить локальную страницу.

【Местные CSS】

Откройте инструмент проверки CSS W3C, чтобы проверить локальную страницу.

【Assive Functs】 Список WCAG

Проверьте WCAG страницы (доступность отчета о доступности веб-контента). Эта страница будет отправлена в инструмент проверки ContentAcality.com, и будет получен отчет о проверке.

Список [Assive Functions]

Проверьте страницы 508 стандартов. Эта страница будет отправлена в инструмент проверки ContentAcality.com, и будет получен отчет о проверке.

【Многочисленные проверки】

Проверьте страницу одновременно, чтобы проверить несколько спецификаций.

Что касается проверки страниц, я хотел бы сказать несколько слов: на самом деле необходимо ли на странице пройти проверку, прежде чем ее можно будет запустить? Я лично чувствую, что это совершенно ненужно. Если вы студент, лежите в башне из слоновой кости. Вы можете бросить свою страницу в любое время, потому что вы клиент, и у вас просто есть время. Тем не менее, нет необходимости тратить ценные ресурсы проекта на пропуск на коммерческие проекты. Поскольку ни один клиент не заботится о вас, страница, которую я сделал, была проверена W3C во многих аспектах. Если есть действительно клиенты, которые заботятся, то я могу только сказать, что восхищаюсь вашей способностью обмануть.

Оставайтесь с нами для следующего эпизода

Но мы вообще не упомянули более мощные функции. Все, пожалуйста, с нетерпением ждем нашей следующей статьи. В следующей статье мы подробно объясним использование отладки JavaScript, режима браузера, текстового режима и других функций.