Меню

Средства разработчика f12 как выключить

Средства разработчика f12 как включить?

Microsoft Edge — средства разработчика — Edge

  • 10/02/2018
  • Чтение занимает 2 мин

Microsoft Edge по умолчанию позволяет пользователям применять средства разработчика F12 и открывать страницу about:flags.Microsoft Edge, by default, allows users to use the F12 developer tools as well as access the about:flags page. Вы можете запретить пользователям применять средства разработчика F12 или открывать страницу about:flags.You can prevent users from using the F12 developer tools or from accessing the about:flags page.

Параметры групповой политики Microsoft Edge находятся в следующем расположении редактора групповой политики, если в политике не указано иное:You can find the Microsoft Edge Group Policy settings in the following location of the Group Policy Editor unless otherwise noted in the policy:

Конфигурация компьютера\Административные шаблоны\Компоненты Windows\Microsoft Edge Computer Configuration\Administrative Templates\Windows Components\Microsoft Edge\

Поддерживаемые версии: Microsoft Edge в Windows 10 версии 1511 или более поздней версииSupported versions: Microsoft Edge on Windows 10, version 1511 or later
Настройка по умолчанию: включено (разрешено)Default setting: Enabled (Allowed)

Microsoft EDGE позволяет пользователям использовать инструменты разработчика F12 для сборки и отладки веб-страниц по умолчанию.Microsoft Edge allows users to use the F12 developer tools to build and debug web pages by default. С помощью этой политики можно настроить Microsoft Edge таким образом, чтобы пользователи не могли использовать инструменты разработчика F12.With this policy, you can configure Microsoft Edge to prevent users from using the F12 developer tools.

Поддерживаемые значенияSupported values

Групповая политикаGroup PolicyMDMMDMРеестрRegistryОписаниеDescriptionМаксимальное ограничениеMost restricted
ОтключеноDisabled 00 00 ЗапрещеноPrevented
ВключеноEnabled 11 11 РазрешеноAllowed
  • Имя групповой политики на русском: Разрешить средства разработчикаGP English name: Allow Developer Tools
  • Имя групповой политики: AllowDeveloperToolsGP name: AllowDeveloperTools
  • Путь групповой политики: Компоненты Windows/Microsoft EdgeGP path: Windows Components/Microsoft Edge
  • Имя ADMX-файла групповой политики: MicrosoftEdge.admxGP ADMX file name: MicrosoftEdge.admx

Параметры MDMMDM settings

  • Имя MDM: Browser/AllowDeveloperToolsMDM name: Browser/AllowDeveloperTools
  • Поддерживаемые устройства: компьютерSupported devices: Desktop
  • Полный путь к URI: ./Vendor/MSFT/Policy/Config/Browser/AllowDeveloperToolsURI full Path: ./Vendor/MSFT/Policy/Config/Browser/AllowDeveloperTools
  • Тип данных: целое числоData type: Integer

Параметры реестраRegistry settings

  • Путь: HKLM\Software\Policies\Microsoft\MicrosoftEdge\F12Path: HKLM\Software\Policies\Microsoft\MicrosoftEdge\F12
  • Значение: AllowDeveloperToolsValue name: AllowDeveloperTools
  • Тип значения: REG_DWORDValue type: REG_DWORD

Запретить доступ к странице about:flagsPrevent access to the about:flags page

Поддерживаемые версии: Microsoft Edge в Windows 10 версии 1607 или более поздней версииSupported versions: Microsoft Edge on Windows 10, version 1607 or later
Настройка по умолчанию: отключено или не настроено (разрешено)Default setting: Disabled or not configured (Allowed)

По умолчанию пользователи могут получить доступ к странице About: flags в Microsoft EDGE, которая используется для изменения параметров разработчика и включения экспериментальных функций.By default, users can access the about:flags page in Microsoft Edge, which is used to change developer settings and enable experimental features. Если эта политика включена, пользователи не смогут получить доступ к странице About: flags.Enabling this policy prevents users from accessing the about:flags page.

Обзор инструментов разработки в браузерах

Панель разработчика находится в нижней части Вашего браузера :

Как её отобразить? Есть три варианта:

  • Клавиатура. Ctrl + Shift + I, кроме
    • Internet Explorer. (клавиша — F12)
    • Mac OS X. (сочетание клавиш — ⌘ + ⌥ + I )
  • Панель Меню.
    • Firefox. Открыть меню ➤ ➤ Инструменты разработки, или Инструменты ➤ Веб-разработка ➤ Инструменты разработки
    • Chrome. Дополнительные инструменты ➤ Инструменты разработчика
    • Safari. Разработка ➤ Показать Web Inspector . Если Вы не видите меню «Разработка», зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив «Показать меню разработки».
    • Opera. Меню ➤ Разработка ➤ Инструменты разработчика. Если Вы не видите меню «Разработка», включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
  • Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит Вам код того элемента, на котором вы щёлкнули правой кнопкой.)

Inspector: DOM обозреватель и CSS редактор

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

Если Вы не видите Inspector,

  • Нажмите на вкладку Inspector .
  • В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
  • В Safari, элементы управления представлены не так чётко, но Вы должны увидеть HTML код, если Вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

  • Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
  • Править как HTML (иногда Добавить атрибут/Править текст). Позволяет редактировать HTML и видеть результат «вживую». Очень полезно для отладки и тестирования.
  • :hover/:active/:focus. Заставляет элементы переключить своё состояние на то, к которому применён Ваш стиль.
  • Копировать/Копировать как HTML. Копирует текущий выделенный HTML.

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

Обзор CSS редактора

По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

  • Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
  • Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
  • Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
  • Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.
  • Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.
  • Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где Вы сможете написать совершенно новую декларацию для Вашей страницы.

Вы должно быть уже заметили другие вкладки в CSS редакторе:

  • Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
  • Блоковая модель: Отображает блочную модель выделенного элемента, здесь Вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
  • Анимации: В Firefox, на вкладке Анимации Вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Inspector в различных браузерах:

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:

Читайте также:  Геморрой от алкоголя как избавиться народные средства

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

  1. alert(‘hello!’);
  2. document.querySelector(‘html’).style.backgroundColor = ‘purple’;
  3. var myImage = document.createElement(‘img’);myImage.setAttribute(‘src’,’https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg’);document.querySelector(‘h1’).appendChild(myImage);

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

  1. alert(‘hello!);
  2. document.cheeseSelector(‘html’).style.backgroundColor = ‘purple’;
  3. var myImage = document.createElement(‘img’);myBanana.setAttribute(‘src’,’https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg’);document.querySelector(‘h1’).appendChild(myImage);

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

Консоль разработчика

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

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

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

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

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

Google Chrome

Откройте страницу bug.html.

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

Нажмите F12 или, если вы используете Mac, Cmd+Opt+J.

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

Она выглядит приблизительно следующим образом:

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

  • В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
  • Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

Под сообщением об ошибке находится синий символ >. Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter.

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift+Enter. Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.

Firefox, Edge и другие

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

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

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

  • Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
  • В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. В Chrome для Mac используйте комбинацию Cmd+Opt+J, Safari: Cmd+Opt+C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Как открыть консоль Javascript

Если на сайте не работает какой-нибудь партнерский инструмент Travelpayouts, вам может потребоваться сделать скриншот консоли Javascript. Эта консоль встроена в большинство веб-браузеров и регистрирует ошибки и предупреждения, возникающие при загрузке веб-страницы.

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

Как открыть консоль в Chrome

В Chrome консоль Javascript является частью DevTools, встроенного набора инструментов, которые используются как вспомогательный инструмент веб-разработчиков. Консоль открывается как новое окно браузера.

Чтобы открыть консоль Javascript:

  • используйте сочетание клавиш Ctrl+Shift+J (для Windows / Linux) или Cmd+Opt+J (для Mac).
  • если DevTools уже открыт, выберите вкладку Консоль.

Следующий шаг: Как сделать скриншот

Как открыть консоль в Firefox

В Firefox консоль называется веб-консолью и является частью инструментов разработчика.

Чтобы открыть веб-консоль:

  • используйте сочетание клавиш Ctrl+Shift+K (для Windows / Linux) или Cmd+Opt+K (для Mac)
  • или выберите пункт Веб-рабработка -> Веб-консоль меню браузера.

Следующий шаг: Как сделать скриншот

Как открыть консоль в Safari

В Safari консоль называется веб-инспектором.

Чтобы открыть веб-инспектор после его включения:

  • выберите меню ;
  • воспользуйтесь комбинацией клавиш Ctrl+Alt+I (для Win);
  • используйте сочетание клавиш Cmd+Opt+C (для Mac).

Если у вас нет этого пункта меню или веб-инспектор не запускается, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».

Следующий шаг: Как сделать скриншот

Как открыть консоль в Internet Explorer/Edge

В браузерах Internet Explorer и Edge консоль Javascript является частью инструментов разработчика.

В зависимости от вашего компьютера инструменты разработчика можно открыть нажатием клавиши F12. Чтобы открыть инструменты разработчика через меню:

  1. Откройте меню (иконка из трех точек);
  2. Выберите пункт Средства разработчика.

Следующий шаг: Как сделать скриншот

Введение в Chrome DevTools. Панель Elements

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

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Как открыть инструменты разработчика

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Читайте также:  Хорошие средства для кожи лица магнит косметик

Введём, например, класс header, и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

Если вы хотите отредактировать атрибут, класс или текст элемента, сделайте двойной щелчок в нужной точке и вносите изменения.

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

Переполнение потоковыми блоками. Находим родителя, в котором лежат нужные элементы и редактируем разметку, добавляем несколько блоков, применяем изменения и смотрим результат.

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style.

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

Нажатие на кнопку — согласие на обработку персональных данных

Источник



Быстрая отладка с помощью инструментов разработчика F12 в Internet Explorer 9

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

Но времена изменились. Тяжелые требования и ответственность, предъявляемые к веб-разработчикам сегодня, обусловили необходимость разработки инструментов для разработчиков во всех современных браузерах.

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

В этой статье я расскажу вам о некоторых наиболее важных функциях IE9 F12 Developer Tools с особым акцентом на том, что нового и что наиболее практично:

Вкладка «Сеть», новая для IE9, позволяет отслеживать и оптимизировать производительность сайта.

Чтобы просмотреть сетевые ресурсы (как показано выше в SitePoint ), нажмите F12, чтобы открыть Инструменты разработчика (в качестве альтернативы вы можете выбрать опцию «Инструменты разработчика F12» в меню «Инструменты» IE9); затем нажмите вкладку Сеть.

Для повышения производительности вкладка «Сеть» по умолчанию не сразу начинает захват ресурсов. Чтобы начать просмотр ресурсов, загружаемых на текущую страницу, нажмите кнопку « Начать захват» , а затем обновите страницу. Ресурсы будут продолжать отображаться только на текущей вкладке и остановятся, когда вы нажмете кнопку « Остановить захват» или закроете вкладку.

На приведенном выше снимке экрана показана сводка загружаемых ресурсов. Он включает информацию о запрошенных URL-адресах, файлах, загружаемых с помощью HTML или CSS, запросах на основе Ajax и ресурсах, загружаемых динамически с помощью JavaScript (например, если атрибут src элемента изображения изменяется).

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

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

Это может пригодиться для обмена информацией с другими разработчиками или для регистрации ошибки. Есть даже сторонний онлайн-инструмент, называемый HTTP Archive Rule Runner , который будет принимать данные на основе XML и запускать некоторые тесты YSlow для введенных данных для анализа.

Чтобы протестировать новую вкладку «Сеть» в бета-версии IE9, вы можете посетить демонстрацию «Мониторинг сети» на сайте тестового диска IE9 или узнать больше о функции вкладки «Сеть» в IEDNlog MSDN.

Проверка HTML и CSS

Элементы и стили DOM также легко найти, открыв Инструменты разработчика F12 и щелкнув по значку Выбрать элемент .

Эта опция (которая также доступна в меню « Найти» или нажатием Ctrl-B) дает вам возможность выбрать любой элемент и вызвать связанные с ним HTML и CSS. Вот пример, показывающий логотип SitePoint с эквивалентным HTML-кодом, отображаемым в структуре дерева-узла:

После выбора параметра « Выбрать элемент по клику» любой элемент на веб-странице, на который вы наведете курсор, получит синюю рамку (как показано на логотипе SitePoint выше). Это позволяет вам конкретно выбирать, какую область страницы вы хотите исследовать.

Панель DOM позволяет редактировать HTML на лету и сразу же видеть изменения в окне. Для этого просто нажмите значок « Редактировать» и отредактируйте HTML-код, как в обычном текстовом редакторе. Когда вы закончите редактирование, нажмите кнопку Edit , и изменения будут видны в окне просмотра.

Рядом с деревом DOM вы увидите все стили CSS, связанные с выбранным элементом, как показано ниже:

Инструменты разработчика IE9 F12 позволяют на лету изменять стили для тестирования и отладки выбранного CSS.

Стили, перечисленные для выбранного элемента, отображаются на панели свойств (справа от Инструментов разработчика) в каскадном порядке и в соответствии со спецификой; следовательно, стили, которые появляются внизу, — это те, которые появляются позже в каскаде, или имеют большую специфичность. Переопределенные стили отображаются через линию через них, так что это можно учитывать при попытке отладки проблемы CSS.

В качестве альтернативы вы можете выбрать параметр « Стили трассировки» , который будет отображать примененные свойства в алфавитном порядке без наличия селекторов.

Читайте также:  Юстировка средства измерения что это

Дополнительную информацию о выбранном элементе можно получить с помощью параметров « Макет и атрибуты» . Более подробное обсуждение этих функций см. В разделе « Отладка HTML и CSS с помощью инструментов разработчика на MSDN».

Вернувшись в основную панель (слева от инструментов), вы можете переключиться с вкладки HTML на вкладку CSS . На вкладке CSS перечислены все свойства и значения, найденные в выбранной таблице стилей, и они полностью доступны для редактирования, и изменения вступают в силу немедленно. Вкладка CSS также имеет селектор таблиц стилей, который позволяет переключаться между таблицами стилей. Это может пригодиться на больших сайтах, которые используют несколько файлов CSS.

Отладка скриптов и использование консоли

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

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

Нажмите кнопку « Начать отладку» для отладки выбранного сценария. Это откроет F12 Developer Tools из окна браузера, и содержимое скрипта появится вместе с консолью справа, как показано ниже:

Любые ошибки скрипта, присутствующие на странице (как в примере выше), будут автоматически отображаться в консоли.

В процессе отладки вы можете установить точки останова (с дополнительными условиями), контролировать выполнение скрипта или проверять переменные и стек вызовов.

Когда выбран параметр « Консоль» , вы можете выполнять операторы на лету, вводя их в командную строку консоли. Функция консоли является новой в IE9 F12 Developer Tools и предоставляет ряд бесценных функций для разработчиков.

Любая допустимая строка кода может быть запущена внутри приостановленного сценария (нажав Enter или нажав кнопку Run script рядом с командной строкой консоли), как показано ниже:

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

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

Улучшение производительности скрипта

Отладка ваших сценариев — это только один аспект цикла разработки. В дополнение к уже отлаженным функциям отладки, F12 Developer Tools позволяют тестировать скрипты на производительность с помощью вкладки Profiler .

Функция профилирования сценариев предоставляет данные о времени, которое ваши сценарии тратят на пользовательские методы и встроенные функции сценариев. Кнопка на вкладке « Профилировщик » позволяет запускать и останавливать процесс профилирования, чтобы вы могли контролировать собранные данные.

На приведенном ниже снимке экрана показаны частичные результаты выполнения профиля на домашней странице SitePoint:

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

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

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

Наконец, любые полученные данные профиля можно легко экспортировать в формате CSV, щелкнув значок « Экспорт данных» . Это вызовет диалог сохранения, с помощью которого вы можете хранить свои данные локально.

Это всего лишь пример возможностей улучшения и отладки скриптов, доступных разработчикам, использующим IE9 и его интегрированные инструменты разработчика F12. Благодаря буму в веб-приложениях производительность веб-сайта стала еще более важной; Инструменты IE сделали большие шаги, чтобы помочь разработчикам в этой важной области развития.

Функция, недавно добавленная в IE9 F12 Developer Tools, — это возможность изменять строку User Agent (UA), которая читается веб-сервером через заголовки запросов. Хотя это не заставит IE9 имитировать рендеринг другого браузера, он может позволить вам запускать функции и контент, предназначенные для других веб-браузеров (например, предупреждение или другое уведомление для пользователя с более старым браузером или версией браузера). ).

Однако различные режимы рендеринга для предыдущих версий Internet Explorer доступны с использованием улучшенных параметров « Режим браузера» и «Режим документа» . Эти параметры доступны в любое время, когда открыты Инструменты разработчика F12, как показано ниже:

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

  • Режим браузера — IE7, IE8, IE9 и IE9 в представлении совместимости IE7
  • Режим документа — режим причуда, стандарты IE7, стандарты IE8 и стандарты IE9

Быстрое тестирование для различных версий и режимов Internet Explorer никогда не было проще, так как разработчики могут получить прямую выгоду. Для получения дополнительной информации о браузере IE и режимах документа, проверьте эти блоги:

В наши дни сайты и веб-приложения создаются с помощью сложных сценариев. Они требуют большего внимания к производительности и требуют более быстрых средств отладки. В этом свете инструменты разработчика IE9 F12 значительно улучшены. По мере того, как мы приближаемся к запуску IE9 в 2011 году ( Platform Preview сейчас в версии 7), и по мере увеличения доли IE9 на рынке эти и другие инструменты, объединяющие поддержку веб-стандартов и оптимизированного кода, станут бесценными для веб-разработчиков.

Испытайте новые инструменты разработчика IE9 F12 для тестирования, чтобы выяснить, могут ли новые и улучшенные функции помочь вашей разработке для современного браузера. Полное руководство можно найти в MSDN Developer Tools .

Почему бы не принять участие в нашей короткой викторине и посмотреть, сколько вы выбрали из этой статьи.

Это руководство стало возможным благодаря поддержке Microsoft. В сотрудничестве с Microsoft и независимо написанные SitePoint, мы стремимся работать вместе, чтобы разработать контент, который будет наиболее полезным и актуальным для вас — наших читателей.

Источник

Как отключить средства разработчика в Microsoft Edge Chromium

Вы можете открыть средства разработчика в браузере Microsoft Edge Chromium нажав F12 или Ctrl+Shift+I. Сегодня мы рассмотрим как отключить средства разработчика в Microsoft Edge Chromium всем пользователям.

1. В строке поиска или в меню “Выполнить” (Win+R) введите regedit и нажмите Enter.

2. Перейдите по пути HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge. Если в разделе Microsoft нет Edge – нажмите на раздел Microsoft правой кнопкой мыши, выберите “Создать” => “Раздел” => назовите новый раздел “Edge”.

3. Нажмите на раздел Edge правой кнопкой мыши, выберите “Создать” => “Параметр DWORD (32 бита)” => назовите новый параметр DeveloperToolsAvailability

4. Откройте параметр DeveloperToolsAvailability, в поле “Значение” введите 2 и нажмите на “ОК”. Закройте редактор реестра и перезапустите браузер.

На сегодня все, если вы знаете другие способы – пишите в комментариях! Удачи Вам 🙂

Источник