Как включить отладку сценариев в microsoft edge
Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .
Откройте шаблон формы, содержащей сценарий в Microsoft Office InfoPath.
В меню Сервис выберите программирования и нажмите кнопку Microsoft Script Editor или нажмите клавиши ALT + SHIFT + F11, чтобы открыть Microsoft Script Editor (MSE).
В сценарии поместите курсор, которую вы хотите добавить инструкцию отладки и выполните одно из указанных ниже действий.
Чтобы добавить инструкцию отладки языка сценариев Microsoft JScript, введите в инструкцию debugger; .
Чтобы добавить инструкцию отладки языка сценариев Microsoft Visual Basic Scripting Edition (VBScript), введите в инструкцию Stop .
В следующем примере используется оператор отладки обработчика событий OnLoad с использованием синтаксиса JScript:
Перейдите в InfoPath.
На панели инструментов Стандартная нажмите кнопку Просмотр, или нажмите клавиши CTRL + SHIFT + B.
В диалоговом окне JIT-отладка щелкните Новый экземпляр из Microsoft Script Editor и нажмите кнопку Да.
В диалоговом окне Шаг в удаленный вызов процедур нажмите кнопку индекс и нажмите кнопку ОК. MSE открывается в режиме отладки и желтая стрелка показывает, где выполнение было приостановлено.
Совет: MSE в режиме отладки можно использовать все возможности отладки, которые она предоставляет. Включает в себя параметр останова, пошаговая инструкциям программы и просматривайте окна отладки, например окна контрольного значения, Интерпретация и Стека вызовов.
Если вы хотите прекратить отладка сценария, нажмите кнопку Остановить отладки в меню Отладка или клавиши SHIFT + F5 в MSE.
В этой статье описывается использование отладки в Microsoft Edge DevTools, в том числе настройка точки разрыва кода. Чтобы установить другие типы точек разрывов, см. в этой ссылке Приостановка кода с точками breakpoints.
Чтобы узнать основы отладки, см. статью Начало отладки JavaScript, который является учебником, использующим существующую веб-страницу на основе форм. В учебнике есть снимки экрана, поэтому его можно обезжирить. Вы можете легко попробовать функции отладки с помощью веб-страницы демонстрации.
Просмотр и редактирование кода JavaScript
При исправлении ошибки часто необходимо попробовать некоторые изменения в коде JavaScript. Вам не нужно вносить изменения во внешнем редакторе или IDE, повторно загружать файл на сервер, а затем обновлять страницу; Вместо этого, чтобы проверить изменения, вы можете изменить код JavaScript непосредственно в DevTools и сразу же увидеть результат.
Просмотр и редактирование файла JavaScript:
Выберите средство Sources .
В области Навигатор выберите файл, чтобы открыть его в области Редактор .
В области Редактор отредактировать файл.
Нажмите Ctrl + S кнопку (Windows, Linux) или Command + S (macOS), чтобы сохранить. Затем DevTools загружает файл JavaScript в движок JavaScript Microsoft Edge.
Переформатировать минифицированный файл JavaScript с помощью довольно принта
Чтобы сделать минированную папку читаемой для человека, щелкните кнопку Format ( ) в нижней части области редактора .
Установите точку разрыва, чтобы приостановить код
Чтобы приостановить работу кода в середине времени работы, установите точку останова. Самым базовым и известным типом точки разрыва является точка разрыва кода.
Используйте точку разрыва кода, когда вы знаете точный регион кода, который необходимо исследовать. DevTools всегда останавливается на указанной строке кода перед ее запуском.
Чтобы установить точку разрыва кода:
Выберите средство Sources .
Откройте файл, содержащий строку кода.
Щелкните область слева от номера строки для строки кода. Или нажмите правой кнопкой мыши номер строки, а затем выберите добавить точку разрыва. Затем рядом с номером строки появляется красный круг, указывающий точку разрыва.
Точки разлома строки кода могут быть неэффективными, особенно если вы не знаете точно, где искать, или если база кода большая. Чтобы сэкономить время при отладки, узнайте, как и когда использовать другие типы точек разрыва. См . приостановка кода с точками остановок.
Шаг через код
После приостановки кода в точке останова прошачь код по одной строке, исследуя поток управления и значения свойств по пути.
Шаг за строку кода
При остановке на строке кода, содержащей функцию, которая не относится к проблеме отладки, щелкните кнопку Шаг за ( ) для запуска функции, не вступая в нее.
Например, предположим, что вы отладка следующего фрагмента кода.
Вы приостановили. A После нажатия кнопку Шаг вперед, DevTools запускает весь код в функции, которую вы переступили, которая B и C . Затем DevTools приостанавливается D .
Шаг в строку кода
При остановке на строке кода, содержащей вызов функции, связанный с проблемой отладки, нажмите кнопку Шаг в ( ) для дальнейшего изучения этой функции.
Например, предположим, что вы отладка следующего кода:
Вы приостановили. A После нажатия кнопку Шаг в, DevTools запускает эту строку кода, а затем останавливается на B .
Выход из строки кода
При остановке внутри функции, не связанной с проблемой отладки, нажмите кнопку Step out ( ) для запуска остальной части кода функции.
Например, предположим, что вы отладка следующего кода:
Вы приостановили. A После нажатия кнопку Шаг, DevTools getName() запускает остальную часть кода в , B который находится только в этом примере, а затем приостанавливается C .
Запустите весь код до определенной строки
При отладки длинной функции может быть много кода, который не связан с проблемой отладки.
Вы можете пройти все строки, но это утомительно.
Немного лучше, вы можете установить точку разрыва кода на строке, в которой вы заинтересованы, а затем нажмите кнопку Выполнение скрипта Резюме ( ) .
Но есть более быстрый способ: щелкните правой кнопкой мыши строку кода, а затем выберите Продолжить здесь. DevTools выполняет весь код до этой точки, а затем останавливается на этой строке.
Перезапуск верхней функции стека вызовов
Чтобы приостановить работу первой строки верхней функции в стеке вызовов, приостановив работу на строке кода, щелкните правой кнопкой мыши области стек вызовов и выберите кадр перезапуска. Верхней функцией является последняя функция, которая была запустить.
Следующий код является примером для вас, чтобы ступить через:
Вы приостановили. A После выбора кадра перезапуска B следует приостановить работу, не задав точку разлома или не выбрав выполнение скрипта Resume.
Время возобновления запуска сценария
Чтобы продолжить время выполнения после паузы скрипта, нажмите кнопку Выполнение скрипта Резюме ( . DevTools запускает сценарий до следующей точки перерыва, если таковые есть.
Время запуска сценария force
Чтобы игнорировать все точки разрыва и заставить скрипт продолжать работать, щелкните и удерживайте кнопку Выполнение скрипта Резюме ( ) и нажмите кнопку Выполнение сценария Force (
Изменение контекста потока
При работе с веб-работниками или сотрудниками служб нажмите на контекст, указанный в области Threads , чтобы перейти к этому контексту. Значок синей стрелки представляет, какой контекст выбран в данный момент.
Например, предположим, что в основном скрипте и скрипте сотрудника службы вы приостановили паузу на точке разрыва. Необходимо просмотреть локальные и глобальные свойства контекста сотрудника службы, но средство Sources показывает основной контекст сценария. Чтобы перейти на контекст сотрудника службы, в области Threads щелкните запись сотрудника службы.
Просмотр и изменение свойств и переменных
Останавливаясь на строке кода, используйте область Область для просмотра и редактирования значений свойств и переменных в локальных, закрытии и глобальных сферах.
- Дважды щелкните значение свойства, чтобы изменить его.
- Свойства, которые не могут быть засеяны, серые.
Просмотр значений выражений JavaScript
Используйте области Watch для просмотра значений пользовательских выражений. Вы можете просмотреть любое допустимые выражения JavaScript.
Чтобы создать новое выражение часов, нажмите кнопку Добавить выражение часов ( .
Чтобы обновить значения всех существующих выражений, нажмите кнопку Обновить ( . Значения автоматически обновляются при прошагове кода.
Чтобы удалить выражение часов, щелкните правой кнопкой мыши выражение, а затем выберите выражение Delete watch ( ).
Просмотр стека вызовов
Остановив на строке кода, используйте области стек вызовов, чтобы просмотреть стек вызовов, который получил вас к этой точке.
Щелкните запись, чтобы перейти к строке кода, в которой была вызвана эта функция. Значок синей стрелки представляет функцию, которую в настоящее время выделяет DevTools.
Если на строке кода не приостанавливали паузу, области стек вызовов пусты.
Трассировка копирования стека
Чтобы скопировать текущий стек вызовов в буфер обмена, щелкните правой кнопкой мыши области стек вызовов, а затем выберите трассировку стека скопировки.
В качестве примера вывода приводится следующий код:
Игнорировать сценарий или шаблон сценариев
Пометить сценарий как код библиотеки, если вы хотите игнорировать этот сценарий при отладки. При обозначении кода Библиотеки сценарий заслоняется в области стеков вызовов, и вы никогда не вступите в функции скрипта при проступке кода.
Например, в следующем фрагменте кода используется строка A lib , которая является стороной библиотекой. Если вы уверены, что проблема отладки не связана с этой сторонней библиотекой, имеет смысл отметить сценарий как код библиотеки.
Пометить сценарий как код библиотеки из области редактора
Чтобы пометить сценарий как код библиотеки из области редактора :
Щелкните правой кнопкой мыши в любом месте файла и выберите сценарий Добавить , чтобы игнорировать список (ранее показанный как Mark as Library code).
Пометить сценарий как код библиотеки из области стек вызовов
Чтобы пометить сценарий как код библиотеки из области стек вызовов:
Щелкните правой кнопкой мыши функцию в скрипте, а затем выберите добавить скрипт, чтобы игнорировать список (ранее показанный как Mark as Library code).
Пометить сценарий как код библиотеки из Параметры
Чтобы отметить один сценарий или шаблон сценариев из Параметры:
Перейдите к параметру кода Библиотеки .
Введите имя сценария или шаблон regex имен скриптов, чтобы пометить код Библиотеки.
Щелкните Добавить.
Запуск фрагментов кода отлаговки с любой страницы
Если вы снова и снова работает один и тот же код отлаговки в консоли, рассмотрите фрагменты. Фрагменты — это сценарии времени запуска, которые вы пишете, сохраняете и запускаете в DevTools.
См. также
-
— простой краткий учебник с использованием существующего кода с захватами экрана. . Средство Источники включает отладка JavaScript и редактор. .
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и автором является Kayce Basques (технический писатель, Chrome DevTools & Маяк).
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.
В этой статье рассказывается об основных процессах отладки любых проблем JavaScript в DevTools.
Шаг 1. Воспроизведение ошибки
Первый шаг в отладки — найти серию действий, которые последовательно воспроизводят ошибку.
Откройте веб-страницу демонстрации Начало работы отладку JavaScript в новом окне или вкладке. Для этого щелкните правой кнопкой мыши ссылку. Или нажмите и Ctrl удерживайте (Windows, Linux) Command или (macOS), а затем щелкните ссылку.
Введите 5 текстовое поле Номер 1 .
Введите 1 текстовое поле Номер 2 .
Шаг 2. Знакомство с пользовательским интерфейсом инструмента Sources
DevTools предоставляет множество различных инструментов для различных задач. Различные задачи включают изменение CSS, профилирование производительности загрузки страниц и запросы на мониторинг сети. Средство Sources — это место, где отламываю JavaScript.
Чтобы открыть консольный инструмент в DevTools, Ctrl ++ Shift``J нажмите (Windows, Linux) J Command + Option +или (macOS).
Выберите средство Sources .
Пользовательский интерфейс средства Sources имеет три части.
Области Navigator (в верхнем левом углу). Каждый файл, который запрашивает веб-страницу, указан здесь.
Области редактора (в верхнем правом углу). После выбора файла в области Navigator эта области отображает содержимое файла.
Области Debugger (в нижней части). Эта области предоставляет средства для проверки JavaScript для веб-страницы. Если окно DevTools широкое, эта области отображается справа от области редактора .
Шаг 3. Приостановка кода с помощью точки разрыва
Распространенный метод отладки console.log() этого типа проблемы — вставить несколько заявлений в код, а затем проверить значения по мере работы сценария. Например:
Метод console.log() может сделать работу, но точки breakpoints делают это быстрее. Точка разрыва позволяет приостановить работу кода в середине времени работы и вовремя изучить все значения. Точки breakpoints имеют следующие преимущества по сравнению с методом console.log() .
В своих console.log() заявлениях необходимо четко указать каждое значение, которое необходимо проверить. С помощью точек breakpoints DevTools показывает значения всех переменных в данный момент времени. Иногда переменные, влияющие на код, скрыты и запутываются.
Breakpoints слушателя событий
Если вы отойдетесь назад и подумайте о том, как работает приложение, можно угадать, что неправильная сумма ( 5 + 1 = 51 ) click вычисляется в прослушиватель событий, связанный с кнопкой Добавить номер 1 и Номер 2. Таким образом, вероятно, необходимо приостановить код во click время прослушивания. Breakpoints listener event let you do that:
В области Debugger щелкните Breakpoints слушателя событий, чтобы расширить раздел. DevTools открывает список расширяемых категорий событий, таких как Animation и Clipboard.
Рядом с категорией событий Мыши нажмите кнопку Развяжье (Развяжь ). DevTools показывает список событий мыши, таких как щелчки мыши и мыши. Рядом с каждым событием имеется почтовый ящик.
Выберите контрольный ящик рядом, чтобы щелкнуть. DevTools теперь настроен на автоматическое приостановление при запуске click любого прослушиватель события.
Возвращаясь к демонстрации, нажмите кнопку Добавить номер 1 и Номер 2 снова. DevTools останавливает демонстрацию и выделяет строку кода в средстве Sources . DevTools следует приостановить на строке 16 в get-started.js .
Если вы приостанавливлите другую строку кода, нажмите кнопку Возобновление выполнения скрипта ( ) до остановки на правильной строке.
Если вы остановились на другой строке, у вас есть расширение браузера, click которое регистрирует слушателя событий на каждой веб-странице, которую вы посещаете. Вы приостанавливована в click прослушиватель расширения. Если вы используете режим InPrivate для просмотра в закрытом режиме , который отключает все расширения, вы можете каждый раз приостанавлить нужную строку кода.
Breakpoints слушателя событий — это только один из многих типов точек разрыва, доступных в DevTools. Запомните все различные типы, чтобы помочь вам отлачивать различные сценарии как можно быстрее. Чтобы узнать, когда и как использовать каждый тип, см. в тексте Pause your code with breakpoints.
Шаг 4. Прошаговка кода
Одной из распространенных причин ошибок является то, что сценарий выполняется в неправильном порядке. Пройдя через код, вы сможете выполнить время работы кода. Вы проходите по одной строке, чтобы выяснить, где именно работает код в другом порядке, чем вы ожидаете. Попробуйте его сейчас:
DevTools пропускает несколько строк кода. Это потому, inputsAreEmpty() что оценивается как ложное, поэтому блок кода if для заявления не работает.
В средстве Источники DevTools нажмите кнопку Шаг в следующий вызов функции ( ), updateLabel() чтобы ступить через время запуска функции, по одной строке за один раз.
Это основная идея, которая заключается в том, чтобы пройти через код. Если вы посмотрите на код, get-started.js вы увидите, что ошибка, вероятно, где-то в функции updateLabel() . Вместо того, чтобы перешагировать каждую строку кода, можно использовать другой тип breakpoint (точка разрыва строки кода), чтобы приостановить код ближе к вероятному расположению ошибки.
Шаг 5. Установите точку разрыва кода
Разрывные точки line-of-code являются наиболее распространенным типом точки разрыва. При подъехав к определенной строке кода, необходимо приостановить, используйте точку разрыва кода.
Посмотрите на последнюю строку кода в updateLabel() :
Слева отображается число этой определенной строки кода в качестве 34. Щелкните строку 34. В DevTools отображается красный значок слева от 34. Красный значок указывает, что в этой строке находится точка разрыва строки кода. DevTools всегда останавливается перед запуском этой строки кода.
Шаг 6. Проверка переменных значений
Значения , и addend1``addend2 выглядеть подозрительно sum . Значения завернуты в кавычках. Эти цитаты означают, что это значение — строка, которая является хорошей гипотезой для объяснения причины ошибки. Дополнительные сведения о ситуации. DevTools предоставляет множество инструментов для изучения переменных значений.
Метод 1. Область области
Если остановиться на строке кода, область Область отображает локальные и глобальные переменные, которые в настоящее время определены, а также значение каждой переменной. В нем также отображаются переменные закрытия, как это применимо. Дважды щелкните переменное значение, чтобы изменить его. Если не остановиться на строке кода, область Области пуста.
Метод 2. Просмотр выражений
В области Watch можно отслеживать значения переменных ( sum например) или выражений (например typeof sum ). Вы можете хранить любое допустимые выражения JavaScript в watch Expression.
Выберите вкладку Watch .
Введите typeof sum .
На следующем рисунке выражение typeof sum watch отображается в области Watch . Если окно DevTools широкое, в области Debugger отображается экран Watch, который затем отображается справа.
Как подозревается, sum оценивается как строка, когда она должна быть номером. Теперь подтвержден тип значения является причиной ошибки.
Метод 3. Консоль
Консоль позволяет просматривать выходные console.log() данные. Вы также можете использовать консоль для оценки произвольных заявлений JavaScript, пока отладка приостанавливается в заявлении кода. Для отладки можно использовать консоль для тестирования возможных **** исправлений ошибок.
Если средство консоли закрыто, нажмите кнопку Esc открыть его. Консольный инструмент открывается в нижней области окна DevTools.
В консоли введите parseInt(addend1) + parseInt(addend2) . Заявление, в котором инструмент приостанавлитована, находится на строке кода, addend1 где и addend2 находятся в области.
Шаг 7. Применение исправления
Мы определили возможное исправление ошибки. Затем отредактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools, а затем перезапись демонстрации, чтобы проверить исправление следующим образом.
В области Редактор замените строку var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2) .
Нажмите Ctrl + S кнопку (Windows, Linux) или Command + S (macOS), чтобы сохранить изменения.
Щелкните деактивировать точки разлома ( ). Он изменяется синим цветом, чтобы указать, что параметр активен. В то время как задаваются точки деактивации, DevTools игнорирует все задаваемые точки.
Попробуйте демонстрацию с разными значениями. Демо теперь вычисляется правильно.
Этот рабочий процесс применяет исправление только к локальной копии кода, отправленного с сервера. После отладки проекта после определения исправления необходимо применить это исправление к коду на сервере, например, отредактировать локальный исходный код, а затем повторно развернуть фиксированный код на сервер.
Дальнейшие действия
Поздравляем! Теперь вы знаете, как сделать большую часть Microsoft Edge DevTools при отладке JavaScript. Инструменты и методы, которые вы узнали в этой статье, могут сэкономить бесчисленные часы.
В этой статье подемонстрировалися два способа установить точки разрыва. DevTools также предоставляет способы задать точки перерывов, чтобы приостановить код при определенных условиях, таких как:
- Условные точки разрыва, которые срабатывает только при условии, которое вы предоставляете, является верным.
- Breakpoints on caught or uncaught exceptions.
- Точки взлома XHR, срабатывающие при совпадении запрашиваемого URL-адреса с подразрядом, который вы предоставляете.
Дополнительные сведения о том, когда и как использовать каждый тип, см. в ссылке Pause your code with breakpoints.
Несколько элементов управления шагами кода не объясняются в этой статье. Дополнительные сведения см. в тексте Step over line of code in "JavaScript debugging features".
См. также
-
— использование пользовательского интерфейса отладки в средстве Sources. — представляет отладка JavaScript и редактор кода.
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и автором является Kayce Basques (технический писатель, Chrome DevTools & Маяк).
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.
Режим Internet Explorer (режим IE) интегрируется с Microsoft Edge DevTools. Режим IE позволяет предприятиям указывать список веб-сайтов, которые работают только в Internet Explorer 11. При переходе на эти веб Microsoft Edge веб-сайты в Microsoft Edge, экземпляр Internet Explorer 11 запускает и отрисовывает сайт на вкладке.
Режим IE позволяет предприятиям управлять совместимостью с технологиями, которые в настоящее время не совместимы с любыми современными веб-браузерами.
Поддержка следующих технологий включена в режим IE:
- Режимы документов IE.
- ActiveX элементов управления.
- Другие устаревшие компоненты.
В режиме IE процесс визуализации основан на Internet Explorer 11. Диспетчер Microsoft Edge обрабатывает весь срок службы процесса отрисовки. Процесс визуализации ограничен сроком службы вкладки для определенного сайта (или приложения). При отрисовке вкладки в режиме IE значок индикатора режима IE отображается в панели адресов для определенной вкладки.
Режим IE доступен на Windows 10 версии 1903 (обновление мая 2019 г.) и подходит для всех поддерживаемых Windows платформ.
Откройте DevTools на вкладке в режиме IE
Значок индикатора режима IE отображается в панели адресов, если администратор Enterprise настроить веб-сайт для появления в режиме IE. Чтобы просмотреть режим документа веб-сайта в режиме IE, выберите значок индикатора режима IE в панели адресов.
Если вкладка использует режим IE, вкладка имеет следующие ограничения:
Некоторые панели DevTools не работают, например Network и Performance, так как двигатель отрисовки переключается с Chromium на Internet Explorer 11.
Элемент Inspect не отображается в меню правой кнопкой мыши.
Щелкнув правой кнопкой мыши, а затем выбрав источник представления, запускает Блокнот.
Если internet Explorer не доступен на компьютере, чтобы отладить содержимое вкладки режима IE, используйте IEChooser для открытия DevTools Internet Explorer следующим образом:
В Windows откройте диалоговое окно Run. Например, нажмите кнопку Windows logo key + R .
Введите %systemroot%\system32\f12\IEChooser.exe и нажмите кнопку ОК.
В IEChooser выберите запись для вкладки режима IE.
Удаленное отладка в режиме IE
Запуск Microsoft Edge с включенной удаленной отладки из интерфейса командной строки. Microsoft Visual Studio, Microsoft Visual Studio код и другие средства разработки обычно запускают команду для запуска Microsoft Edge. Следующая команда запускает Microsoft Edge с удаленным портом отладки. 9222
После запуска Microsoft Edge с помощью аргумента командной строки режим IE недоступен. Вы по-прежнему можете перейти к веб-сайтам (или приложениям), которые в противном случае отображаются в режиме IE. Содержимое веб-сайта (или приложения) отрисовка Chromium, а не Internet Explorer 11. Части веб-страниц, которые полагаются на Internet Explorer 11, такие как ActiveX элементов управления, могут не отрисовки правильно. Значок индикатора режима IE не появляется в панели адресов.
Режим IE остается недоступным до закрытия и перезапуска Microsoft Edge.
Замена автоматизации Internet Explorer
Если у вас есть существующее приложение, использующее объект InternetExplorer для автоматизации Internet Explorer 11, но настольное приложение Internet Explorer 11 не доступно, ваше приложение не будет работать. Internet Explorer 11 будет отправлен в отставку 15 июня 2022 г. См. в Windows 10 Обозреватель Microsoft Edge.
Microsoft Edge не поддерживает автоматизацию режима IE InternetExplorer через объект, поэтому приложения, которые полагаются на этот объект, необходимо обновить, используя один из рекомендуемых ниже вариантов. Приложения, которые используют управление WebBrowser , будут продолжать работать и не будут затронуты удалением Internet Explorer 11.
Если приложение автоматизации не требует правильного функционирования режима IE для содержимого веб-сайта (или приложения), рекомендуется обновить приложение для использования Microsoft Edge вместо Internet Explorer 11. Многие доступные средства автоматизации Microsoft Edge, в том числе WebDriver и Playwright.
- Дополнительные информацию об автоматизации Microsoft Edge webDriver см. в странице Использование WebDriver для автоматизации Microsoft Edge.
- Дополнительные дополнительные информацию об использовании драматурга см. в см. в этой Microsoft Edge.
Приложения, которые требуют правильного функционирования режима IE для содержимого веб-сайта (или приложения), должны использовать WebBrowser управление. Управление WebBrowser использует платформу Internet Explorer (MSHTML/Trident) для отрисовки веб-контента и будет работать, даже если настольное приложение Internet Explorer 11 не доступно.
Всего есть три причины для создания консоли в браузере:
- Для отладки самого браузера еще на стадии проектирования.
- Для обучения молодых специалистов функциям того или иного браузера.
- Для отладки профессионалами своих интернет-страниц в реальном времени.
Немногие знают, но свой сайт можно написать, используя всего 2 вещи: знания и блокнот. Однако, такой способ чреват чрезвычайно тратой собственного времени, потому что вам придется пересохранять документ после каждого изменения каких-либо параметров. На помощь приходит специальная консоль отладки – это некое поле браузера, в котором содержится абсолютно вся информация о страничке и ее исходный код. Исследуя его, можно найти много чего интересного, в том числе и ошибки разработчиков. Чтобы не совершать ошибки, используют консоль браузера.
Допустим, что вы создали интернет-страничку, но вам необходимо подогнать картинку под необходимые размеры, на выход приходит в консоль, в которой есть возможность отладки странички в реальном времени, что очень сильно экономит время и силы. В следующей части статьи мы расскажем, как в браузере «Яндекс» открыть консоль. Данные знания обязательно помогут вам, если вы начинающий веб-мастер.
Что можно делать через консоль разработчика
Если говорить в общем и целом, то консоль нужна для написания специальных кодов для различных программ.
- Консоль разработчика в браузере Google Chrome помогает отследить ошибки, которые были допущены при написании какого-либо кода.
- Помимо этого, с помощью консоли разработчика для Гугл Хром возможно выполнять некоторые команды, проверять значения переменных и так далее.
По сути, данная консоль нужна лишь программистам, поэтому, не будем углубляться в тему программирования.
Как вызвать консоль
Переходим к основной части сегодняшней инструкции. Вы уже знаете, что можно делать через консоль разработчика. Теперь, осталось лишь разобраться, как вызвать консоль разработчика в браузере Google Chrome на определенном устройстве. Немного ниже будут рассмотрены несколько способов на основных видах устройств.
Google Chrome
Откройте страницу bug.html.
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd+Opt+J.
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift+Enter. Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.
На телефоне
К сожалению, на смартфоне нельзя вызвать консоль разработчика в браузере Google Chrome. Причем, не получится это сделать и на iPhone, и на устройстве с операционной системой Android.
После прочтения сегодняшней инструкции, вы теперь знаете, что можно делать через консоль разработчика для браузера Google Chrome. Помимо этого, вы узнали несколько способов, которые помогут вам вызвать консоль разработчика в Гугл Хром. Если вы будете делать все действия согласно инструкциям выше, то никаких проблем у вас возникнуть не должно.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.
Как открыть консоль разработчика в «Яндексе»
Для открытий консоли потребуется специальное сочетание клавиш. Если почитать документацию к абсолютно любому браузеру, то можно обнаружить, что пользоваться мышкой даже не обязательно. Существует невероятное количество сочетаний клавиш, способных исполнить любое ваше желание.
Инструкция о том, как в браузере «Яндекс» открыть консоль:
- Запустите браузер от «Яндекса», после чего дождитесь его полной загрузки в оперативную память, это займет всего лишь несколько секунд.
- Теперь откройте любую интернет-страничку, например, Google, но это совсем неважно, подойдет любая.
- Для открытия инструментов «Яндекс» нажмите следующие клавиши: «Ctrl + Shift + I»
- Если вы хотите работать именно с JavaScript – это такой язык программирования, то необходимо будет зажать следующие клавиши: «Ctrl + Shift + J»
Однако, в разных браузерах отличаются способы открытия консоли, поэтому в следующем пункте мы пройдем по самым популярным браузерам.
Как открыть Консоль в Google Microsoft Edge
Как и в любом другом браузере, Microsoft Edge также имеет инструмент Console, предназначенный для разработчиков, выполняющих интерактивную отладку или специальное тестирование.
Этот инструмент регистрирует информация, связанная с посещаемой веб-страницей. Вы найдете информацию, связанную с Javascript, сетевыми запросами и ошибками безопасности.
Самый простой способ открыть Console Tool в Microsoft Edge — использовать предопределенный ярлык ( F12 Key ).
Но вы также можете сделать это через меню графического интерфейса, нажав кнопку действия (верхний левый угол)> Дополнительные инструменты> Инструменты разработчика .
Как и в других браузерах, Microsoft Edge также позволяет вам проверять определенные элементы с помощью встроенной консоли. Для этого просто выберите и щелкните элемент правой кнопкой мыши и выберите Проверить элемент.
Вот список с некоторыми полезными ярлыками, которые вы можно использовать внутри встроенной консоли Microsoft Edge:
Как открыть консоль в Mozilla Firefox
Встроенная консоль в Mozilla Firefox работает немного иначе, чем другие аналоги, которые мы проанализировали до сих пор. Я имею в виду, что он автоматически откроется в отдельном окне, а не разделит экран вашего браузера пополам.
Это обеспечивает более продуктивный подход для людей, у которых есть второй экран, но они могут попасть внутрь способ пользователей, которым нужно работать с одним маленьким экраном. (Если вы находитесь в этом сценарии, вы можете использовать сочетание клавиш Alt + Tab для переключения между Firefox и связанной консолью браузера.
Чтобы открыть встроенную консоль браузера в Mozilla Firefox , у вас есть три варианта:
- Вы можете использовать универсальный ярлык — Ctrl + Shift + J (или Cmd + Shift + J на Mac)
- Вы можете открыть его из меню действий — щелкнув меню действий> Web Developer> Browser Console .
- Или вы можете принудительно открыть консоль браузера напрямую, запустив Firefox из командной строки и передав аргумент ‘-jsconsole’: /Applications/FirefoxAurora. app/Contents/MacOS/firefox-bin -jsconsole
Примечание. Firefox также включает веб-консоль, которая очень похожа на в консоль браузера, но он применяется к отдельной вкладке контента, а не ко всему браузеру.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
- Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
- TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
- TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
- (unknown): Scripterror. Обозначает ошибку скрипта.
- TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
- TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
- Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
- TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
- Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
- ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Читайте также: