Консоль разработчика
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
- В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
- Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.
Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .
Многострочный ввод
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.
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.
Как открыть консоль разработчика в safari?
Safari > Настройки > Дополнения > Показывать меню разработка.
Но тут вопрос в другом — откуда под виндой сафари?
Ответ написан более трёх лет назад
Нравится 11 3 комментария
cherurg @cherurg Автор вопроса
Спасибо, получилось
Скачал отсюда support.apple.com/kb/dl1531
@cherurg удалите это немедленно! у нас давно уже 7 версия 😀
Для тестирования на Safari под виндой лучше поставить виртуалку с Mac OS X.
cherurg @cherurg Автор вопроса
@smanioso окей, буду иметь ввиду. Спасибо.
Ответы на вопрос 4
code is poetry ❤ php
Mac: Option + Command + I
Ответ написан 08 февр. 2023
Нравится 1 1 комментарий
yurijgolikov @yurijgolikov
самый стоящий ответ
Ответ написан более трёх лет назад
cherurg @cherurg Автор вопроса
Работает везде, кроме safari
Не знаю как на виндовой версии, на маке где-то в настройках сафари есть галочка, которая включает режим отладки страницы, и дальше консоль становится доступной
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
1. под виндой Ctrl+Alt+I
2 Safari > Настройки > Дополнения > Показывать меню разработка
(если не видно меню тыркаем F10)
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
Почему при объединении двух объектов в один они автоматически сортируются?
- 1 подписчик
- 4 часа назад
- 60 просмотров
Как открыть консоль разработчика в вашем браузере
от Lina Thorne • Обновлено 22.12.2019 · Опубликовано в категории Что нового в Watermarkly
К некорректной работе Watermarkly может привести целый ряд различных причин, и выяснить, какая из них является источником неполадок конкретно в вашем случае – это непростая задача. Еще больше усложняют её разнообразие браузеров и множество доступных плагинов. Однако, консоль разработчика способна помочь нам выяснить в чем заключается проблема, чтобы, затем, мы смогли ее решить. Основная функция консоли заключается в том, что она записывает всю информацию о внутренних операциях нашего приложения. При поиске и устранении неисправностей, данная информация – это настоящая палочка-выручалочка.
Если у вас возникла проблема с Watermarkly и вы уже связались с нашей службой поддержки, вас могут попросить отправить скриншот вашей консоли в Инструментах разработчика. Сейчас вы узнаете как её можно открыть.
Google Chrome
Открыть Инструменты разработчика в Chrome можно любым из этих трех способов.
Откройте меню Chrome, щелкнув по трём вертикальным точкам в правом верхнем углу окна браузера. Выберите «Дополнительные инструменты», затем нажмите на«Инструменты разработчика».
Используйте сочетание клавиш: Cmd + Option + J (на Mac) или Ctrl + Shift + J (на Windows / Linux).
Щелкните правой кнопкой мыши по веб-странице и выберите «Просмотреть код».
После того как Инструменты разработчика откроются, щелкните на вкладку «Консоль» или «Console».
Apple Safari
Во-первых, вам нужно включить меню разработчика. В главном меню Mac перейдите в Safari, затем выберите «Настройки».
Откроется диалоговое окно «Настройки». Перейдите в раздел «Дополнительно» и установите галочку рядом с «Показать меню разработки в основном меню». Закройте окно настроек.
Теперь вы можете открыть консоль разработчика одним из этих способов:
Перейдите в «Разработку» и выберите «Показать консоль Javascript».
Нажмите горячие клавиши: Cmd + Option + C.
Щелкните правой кнопкой мыши по веб-странице и выберите «Просмотреть код».
Появятся Инструменты разработчика. В этом окне щелкните по вкладке «Консоль» или «Console».
Mozilla Firefox
Любой из этих способов откроет Инструменты разработчика в вашем браузере:
Кликните по кнопке меню Firefox в правом верхнем углу окна браузера. Перейдите в «Другие инструменты», затем выберите «Консоль браузера». Этот способ сразу же откроет Консоль.
Используйте эти комбинации клавиш: Cmd + Option + K (на Mac) или Ctrl + Shift + J (на Windows / Linux).
Щелкните правой кнопкой мыши на веб-страницу и выберите «Исследовать» в открывшемся меню.
Когда вы окажетесь в Инструментах разработчика, выберите вкладку «Консоль» или «Console».
Microsoft Edge
Как и в других браузерах, воспользуйтесь одним из следующих способов, чтобы открыть инструменты разработчика:
Откройте меню Edge в правом верхнем углу браузера, нажав на три горизонтальные точки. Перейдите в «Другие инструменты» и выберите «Средства разработчика».
Нажмите «Ctrl + Shift + I», если у вас Windows / Linux, или «Cmd + Option + I», если вы работаете на Mac.
Щелкните правой кнопкой мыши по веб-странице и выберите «Проверить».
Как только Инструменты разработчика откроются, выберите вкладку «Консоль» или «Console».
Opera
Откройте инструменты разработчика в Opera любым из этих способов:
Нажмите кнопку «O» в верхнем левом углу окна браузера, затем, в меню, перейдите к «Разработке» и выберите «Инструменты разработчика».
Используйте сочетание клавиш: Ctrl + Shift + I в Windows / Linux или Cmd + Option + I на Mac.
Щелкните правой кнопкой мыши по веб-странице и выберите «Просмотреть код элемента».
В открывшихся Инструментах разработчика перейдите во вкладку «Консоль» или «Console».
Yandex
Существует пара способов, с помощью которых вы откроете инструменты разработчика в Yandex:
Нажмите на три горизонтальные линии в правом верхнем углу, чтобы открыть меню браузера.
Затем перейдите к пункту «Дополнительно» и выберите «Консоль JavaScript». Так вы сразу же окажетесь в консоли.
Используйте сочетание клавиш: Ctrl + Shift + I в Windows / Linux или Cmd + Option + I на Mac.
Щелкните правой кнопкой мыши по веб-странице и выберите «Исследовать элемент».
В Инструментах разработчика выберите вкладку «Консоль» или «Console».
Открыть Инструменты разработчика совсем не сложно, а сам процесс практически идентичен для всех популярных браузеров.
Как включить меню разработки в Safari на Mac
Когда вы щелкаете правой кнопкой мыши любую веб-страницу в Safari на Mac, кнопки «Показать источник страницы» и «Проверить элемент» не отображаются. Чтобы увидеть это, вам нужно включить меню «Разработка» – мы покажем вам, как это сделать.
После того, как вы включили меню «Разработка», щелкните правой кнопкой мыши пустое место на любом веб-сайте, чтобы открыть кнопки «Проверить элемент» и «Показать источник страницы». Это позволяет вам взглянуть на исходный код любого веб-сайта, что полезно для таких вещей, как загрузка изображений с веб-сайтов и отладка кода или выяснение того, как он выглядит за любым сайтом (для дизайнеров веб-сайтов).
Как включить меню разработки в Safari на Mac
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Вы можете легко включить меню «Разработка» в Safari, выполнив пару шагов. Откройте Safari на своем Mac и нажмите кнопку «Safari» в строке меню.
Затем выберите «Настройки». Кроме того, вы можете использовать сочетание клавиш Command +, (запятая). Это также откроет настройки Safari.
Перейдите на вкладку «Дополнительно».
Установите флажок «Показывать меню разработки в строке меню».
Теперь между закладками и окном вверху появится меню «Разработка».
Помимо возможности просмотра исходного кода страницы, это позволит вам получить доступ к функциям, ориентированным на разработчиков, таким как отключение JavaScript на любом веб-сайте.
Как просмотреть исходный код страницы в Safari на Mac
После того, как вы включили меню «Разработка», есть несколько способов просмотреть исходный код страницы в Safari.
Откройте любой веб-сайт в Safari и щелкните правой кнопкой мыши пустое место на странице. Теперь выберите «Показать источник страницы». Вы также можете попасть в это меню с помощью сочетания клавиш Option + Command + u.
Если вы ищете изображения или другие элементы мультимедиа с любой веб-страницы, Safari позволяет легко их найти. На левой панели вы увидите различные папки, такие как изображения, шрифты и т. Д. Щелкните папку «Изображения», чтобы быстро найти нужные фотографии.
После выбора изображения вы можете легко просмотреть его детали, открыв боковую панель с деталями. Кнопка для открытия находится в правом верхнем углу консоли, чуть ниже значка шестеренки. Вы также можете открыть это с помощью сочетания клавиш Option + Command + 0.
Щелкните «Ресурс» в верхней части боковой панели с подробностями, чтобы просмотреть подробные сведения, такие как размер изображения и его полный URL-адрес.
Вы также можете легко изменить положение исходной консоли страницы. В левом верхнем углу этой консоли, рядом с кнопкой X, есть две кнопки. Щелкните значок прямоугольника, чтобы переместить консоль на другую сторону в окне браузера.
Если вы хотите открыть консоль исходного кода страницы в отдельном окне, вы можете щелкнуть значок с двумя прямоугольниками. Это отсоединит консоль и откроет ее в отдельном окне.
Чтобы проверить код любого конкретного элемента на странице, вы можете щелкнуть этот элемент правой кнопкой мыши и выбрать «Проверить элемент». Это приведет вас прямо к коду для выбранного вами элемента.
Закончив просмотр кода, нажмите кнопку X, чтобы закрыть консоль исходного кода страницы и вернуться к просмотру в Safari. Вы также можете узнать, как просмотреть исходный код страницы веб-сайта в Google Chrome здесь.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)