Как открыть f12 в браузере на телефоне
Вам нужно найти конкретное слово при просмотре длинной страницы или документа? Задачу легко выполнить на вашем компьютере, нажав ctrl + f или же команда + f. Используя эти сочетания клавиш, вы можете найти слова, которые ищете.
Вас не раздражает отсутствие возможности использовать ctrl + f на устройстве Andriod? Есть способы, которыми вы можете использовать ctrl + f на своих устройствах Andriod! Да, я знаю, что на вашей QWERTY-клавиатуре нет клавиши управления. Нет, это не кликбейт.
Есть способы, с помощью которых вы можете находить слова в браузере Android и приложениях. Вот все способы, которыми вы можете использовать действие поиска на вашем устройстве Andriod.
Связанный: Как освободить внутреннее хранилище на Android, включая «другое» хранилище
Найти в браузере
При чтении чего-либо в браузере вы можете найти термин или ключевое слово без прокрутки. Наиболее часто используемые браузеры позволяют находить ключевые слова.
В Chrome
Если вы используете браузер Chrome на своем телефоне, вы можете легко находить текст на странице.
Все, что вам нужно сделать, это нажать на многоточие в правом верхнем углу.
В раскрывающемся меню нажмите «Найти на странице».
Введите ключевое слово, которое вы ищете на странице.
Ключевые слова будут выделены желтым, что упростит их поиск. Вам также будет показано, сколько раз ключевое слово присутствует на странице.
Используя стрелки навигации, вы можете перейти к следующему или предыдущему месту, где было использовано ключевое слово. При переходе к любому ключевому слову цвет выделения изменится с желтого на оранжевый.
Связанный: Как скопировать изображение в буфер обмена на Android
В Mozilla Firefox
Если вы используете Mozilla Firefox в качестве браузера на своем устройстве Andriod, вы можете выполнять поиск по странице аналогичным образом.
Панель инструментов приложения по умолчанию находится внизу экрана. Вы можете изменить это в настройках, чтобы вывести панель инструментов в верхнюю часть экрана.
В правом углу панели инструментов вы увидите вертикальное многоточие, на которое нужно нажать.
Появится меню, в котором вы увидите опцию «Найти на странице».
Нажмите «Найти на странице».
Введите ключевое слово, которое вы ищете.
В отличие от Chrome, все ключевые слова на странице не будут выделены. Используя стрелки навигации, вы можете просматривать предыдущие и следующие ключевые слова. Когда вы переходите к каждому ключевому слову, они выделяются черным цветом, а цвет текста меняется на зеленый.
В опере
Если вы используете Opera в качестве браузера на устройстве Android, поиск ключевого слова на странице очень похож на поиск в Chrome и Mozilla.
Снова в правом верхнем углу вы найдете вертикальное многоточие.
Щелкните по ним, чтобы открыть раскрывающееся меню.
Щелкните «Найти на странице».
Введите ключевое слово.
Как и в Chrome, все ключевые слова на странице выделены желтым. Когда вы переходите к каждому слову с помощью стрелок навигации, цвет выделения меняется на оранжевый.
В любом другом браузере
Все браузеры позволят вам найти ключевое слово на любой странице. Если вы используете такие браузеры, как Microsoft Edge или Safari, вы все равно можете использовать эту функцию.
В зависимости от приложения, которое вы используете, кнопки меню будут разными. Вы можете найти горизонтальное многоточие или кнопку меню гамбургера вместо вертикального многоточия.
После нажатия на меню вы должны увидеть «Найти на странице» или «Найти на странице».
Поиск по ключевому слову с помощью окна поиска выделит слова в тексте. Формат выделения может отличаться, и в некоторых браузерах стрелки навигации могут отсутствовать.
Таким образом, даже без ctrl + f на устройстве Android вы можете находить слова, которые ищете, в своем браузере.
Найти в приложении для Android
Помимо возможности находить слова в тексте в браузерах, вы также можете находить ключевые слова в файлах и чатах на Andriod. Вот как вы можете искать по ключевым словам в различных приложениях.
При чтении или написании документа на устройстве Andriod вы можете найти ключевое слово, которое ищете.
Гугл документы
Если вы используете Google docs для просмотра или редактирования любого документа, процесс поиска ключевого слова прост.
При просмотре документа вам нужно коснуться вертикального многоточия в правом верхнем углу экрана.
В меню нажмите «Найти и заменить».
Введите ключевое слово, которое вы хотите найти, и все ключевые слова будут выделены. Используя стрелки навигации, вы можете перейти к предыдущей или следующей.
При написании документа процесс поиска ключевого слова такой же. Единственное отличие состоит в том, что во время письма вы увидите больше опций в меню, чем при просмотре документа.
Связанный: Как найти пароль от Wi-Fi на Android
Microsoft Word
Как и в случае с документами Google, Microsoft Word также позволяет находить ключевые слова в тексте.
Когда вы просматриваете документ с помощью приложения, вы можете увидеть значок поиска на панели инструментов в верхней части экрана.
Коснитесь значка поиска и введите ключевое слово. Это выделит все ключевые слова в документе.
Если вы пишете, то процесс использования функции поиска немного отличается.
Вы должны щелкнуть меню на панели инструментов внизу. В меню вы увидите опцию «Найти». После нажатия на нее вы можете выполнить поиск по ключевому слову.
Стрелки навигации переместят вас к предыдущему или следующему выделенному слову.
Как и в случае с документами, на устройстве Android вы можете использовать функцию поиска по файлам PDF.
Adobe acrobat reader (PDF)
В Adobe Acrobat Reader кнопку поиска легко найти на панели инструментов.
Значок поиска с горизонтальным многоточием — это кнопка поиска.
Коснитесь значка поиска, введите ключевое слово и коснитесь кнопки ввода / поиска на клавиатуре.
При поиске в PDF-файле с помощью Adobe вам необходимо использовать стрелки навигации для поиска ключевых слов по отдельности. Все ключевые слова не выделяются вместе. Вам также не будет показано, сколько раз слово присутствует в файле.
Программа просмотра PDF-файлов Google
Как и в случае с Adobe, значок «Найти» присутствует на панели инструментов в средстве просмотра PDF-файлов Google.
В отличие от Adobe, при поиске ключевого слова здесь все вхождения выделяются желтым цветом. Используя навигацию, вы можете переходить от одного ключевого слова к другому. Цвет выделения выбранного ключевого слова изменится на оранжевый.
При работе с файлом Excel или просмотре его на устройстве Andriod вы можете использовать функцию «Найти».
Таблицы Google
При поиске любого слова или значения на листе Google вы можете использовать функцию поиска.
Нажмите на вертикальное многоточие в правом верхнем углу экрана, чтобы открыть меню.
Нажмите «Найти и заменить».
Введите слово или значение, которое хотите найти.
Вам будет показано, сколько раз искомое слово было повторено на листе. Используя кнопки навигации, вы можете перейти непосредственно к ячейке, в которой находится ключевое слово или значение.
Майкрософт Эксель
Параметр «Найти» в Microsoft Excel размещен прямо на панели инструментов.
Коснитесь значка поиска на панели инструментов, а затем введите значение или слово, которое хотите найти.
Вы попадете в ячейку, в которой находится слово. Стрелки навигации могут помочь вам перейти к следующей или предыдущей ячейке.
Для поиска в чате WhatsApp вам нужно щелкнуть вертикальное многоточие в правом верхнем углу экрана.
Нажмите на Поиск.
И чат, и ключевое слово будут выделены. Используя стрелки навигации, вы можете перемещаться вверх и вниз по цепочке.
Хотите найти слово, но не знаете, какой чат проверить?
Вы можете проверить несколько чатов, чтобы узнать, где вы использовали ключевое слово в Whatsapp.
На главном экране приложения вы увидите значок поиска вверху. Нажмите на него и введите слово, которое хотите найти.
Вы получите список всех контактов и групповых чатов, в которых использовалось это слово.
Телеграмма
Как и WhatsApp, Telegram также позволяет пользователям находить ключевые слова из чатов.
В индивидуальных чатах вам нужно сначала нажать на вертикальное многоточие.
Затем нажмите на Поиск.
Для поиска в нескольких чатах коснитесь значка поиска на главном экране и введите ключевое слово, которое хотите найти.
Skype
При использовании приложения Skype на телефоне вы найдете значок поиска в верхней части экрана.
При поиске любого слова на главном экране Skype вам будут показаны контакты, пользователи Skype и чаты, в которых присутствует ключевое слово.
Если вы хотите найти слово в какой-либо конкретной ветке чата, вам нужно открыть ветку.
Нажмите на имя контакта.
Нажмите «Искать в разговоре».
Вы попадете к выделенному ключевому слову. Кроме того, рядом с навигацией вам будет показано, сколько раз слово присутствует в цепочке.
Мессенджер Facebook
Приложение Facebook Messenger имеет панель поиска на главном экране приложения.
Его можно использовать для поиска в ваших контактах или поиска по любым ключевым словам в чатах. Когда вы вводите ключевое слово в строке поиска, вам будут показаны чаты, в которых это слово было использовано, а также другие страницы и люди, связанные с этим ключевым словом.
Чтобы выполнить поиск по ключевому слову в чате, вам нужно сначала открыть ветку.
Нажмите на имя контакта, чтобы открыть страницу меню.
Нажмите в меню на «Искать в разговоре».
Ищете ключевое слово в длинной новостной статье?
Если вы используете приложение Google News на своем устройстве Android, возможно, у вас не получится выполнить прямой поиск по ключевому слову в приложении, но есть способ сделать это.
Вам нужно просто открыть страницу новостей в веб-браузере своего телефона.
Для этого сначала откройте новостную статью, которую хотите прочитать.
Нажмите на вертикальное многоточие внизу экрана.
Выберите «Просмотреть исходную веб-страницу».
Это откроет веб-сайт в вашем браузере. Теперь, в зависимости от того, какой браузер вы используете, вы можете искать по ключевому слову.
Найдите в реальном мире с помощью устройства Android
Вооружившись своим устройством Android, вы можете нажимать ctrl + F для текста в реальном мире.
Хотите найти ингредиент на обратной стороне упаковки по крошечным принтам? Хотите узнать, сколько раз слово повторяется на странице?
Это приложение поможет вам.
Итак, на вашем устройстве Android вы можете находить ключевые слова на веб-страницах и в приложениях. Вы даже можете использовать приложение для поиска ключевых слов из реального мира.
У вас проблемы с поиском ключевых слов в любом приложении для Android? Пропустили ли мы какие-либо приложения, в которых вы можете использовать функцию ctrl + f? Дайте нам знать об этом в комментариях.
Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:
Elements
Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!
Найти нужный тег в древе не сложно, есть 2 способа. Способ первый - перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая - выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый - сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать "Просмотреть код".
Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!
Console
Без неё и жизнь не мила у любого программиста :) Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку "all", то есть выводить все ошибки. По умолчанию установлен всегда "all", но зная Вас, мои ученики. :)
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!
Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click - ошибка - переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы. Забудете об этой фишке, то будете ошибку пол года искать :)
О том, что наши заметки попадают в консоль из console.log я писать не буду, Вы итак это знаете из общего курса :)
Sources и Network
Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт "Open link in new tab", и уже с новой страницы сохранить файл нажав комбинацию ctrl+s . Согласитесь, удобно же :)
Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.
На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с scripts.js?v=1 на scripts.js?v=2. Как видите, мы лишь поменяли переданные GET данные, а скрипт уже практически у всех будет подгружаться новый (не 100%, но вполне приемлемо для большинство сайтов). Но после правки запятой в скрипте во время разработки не так уж и удобно бегать и менять html с подключением этого самого js файла, тут для разработчика приходит на помощь ещё одна важнейшая галочка "Disable cache", если она включена, то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Разрабатываем сайт с этой галочкой, а при загрузке новой версии скриптов всем пользователям меняем лишь версию ?v=3.
Preview и Response
После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response - неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть! При работе с Ajax в Preview мы получим удобный вид JSON ответа похожего на HTML-древо в разделе Elements, что так же упростит нам разработку сайта.
Ajax и панель разработчика
П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как "блондинки". :)
Данная статья в будущем ещё будет дорабатываться, возможно!
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.
Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.
Как открыть консоль на разных браузерах
Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».
Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.
Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».
В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.
Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.
Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».
Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.
Какие вкладки есть в консоли и за что они отвечают
Консоль каждого браузера содержит практически идентичные вкладки с одним и тем же функционалом, поэтому рассмотрим каждый из блоков на примере веб-обозревателя Google Chrome.
Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.
В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.
Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.
И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.
На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.
Elements
Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.
Console
Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.
Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.
Также в данной консоли мы можем посмотреть информацию об ошибках плагина, воспользоваться поиском по слову или фразе, а также установить различные фильтры на отображаемую информацию.
Sources
Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.
Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.
Network
Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.
Performance
Панель отображает таймлайн использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков будут доступны подробные данные о выполнении кода и всем жизненном цикле страницы.
Memory
В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.
Application
Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.
Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.
Security
Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
- проверке сертификата – подтвердил ли сайт свою подлинность TLS;
- tls-соединении – использует ли сайт современные безопасные протоколы;
- безопасности второстепенных источников.
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке 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. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!
С F12 есть Инструмент интерфейса разработчика, поэтому я буду продолжать исследовать, после проверки нескольких блогов и информации я подытожил свое собственное понимание и память, я надеюсь помочь друзьям, которые нужно, хеэ!
Сначала введите три верхние функции в инструменте разработчика Chrome, а также три функциональных страница, которые используют элементы, консоль, исходные коды и сеть (сеть).
- Элементы: Используется для просмотра или модификации свойств HTML-элементов, свойств CSS, событий прослушивания, точек останова и т. Д.
- Консоль: Консоль обычно используется для выполнения одноразового кода, просмотреть объект JavaScript, просмотрите информацию о регистрации журнала или информацию об исключении.
- Исходный код: Эта страница используется для просмотра исходного кода HTML-файла HTML страницы, исходный код JavaScript, исходный код CSS, и самое главное, чтобы отладить исходный код JavaScript, вы можете добавить точки останова в код JS.
- Сеть: Сетевая страница в основном используется для просмотра информации, связанной с подключением сети.
1、 Элементы
Просмотр кода элемента : Нажмите, как показаноСтрелка (или используя ярлыки клавиш) Ctrl+Shift+C ) Введите режим элемента выбора, затем выберите элемент, который вы хотите просмотреть со страницы, а затем найдите конкретное местоположение исходного кода элемента в столбце элемента элемента разработчика (элементы).
Просмотр свойств элемента : Вы можете просмотреть деталь от позиционного исходного кода, такого как класс, SRC, вы также можете просматривать все свойства в сторону правой, как показано на следующем представлении изображения
Изменить код и свойства элемента : Вы можете прямо дважды щелкнуть деталь, которую вы хотите изменить, то введите изменения или проверьте щелчок правой кнопкой мыши после того, как вы хотите изменить раздел, как показано ниже
Примечание: Эта модификация также вступает в силу только на текущей рендеринге страницы и не изменяет исходный код сервера, поэтому эта функция также используется в качестве эффекта отладки страницы.
Введение в боковую панель правой стороны: Как показано ниже
2、 Приставка
- Просмотреть объекты JS и их свойства
- Выполнить оператор JS
- Просмотр журнала консоли: при использовании функции Console.Log () в коде JS веб-страницы JS вывод информации журнала отображается в консоли. Информация журнала обычно включена во время разработки и отладки, и когда она официально запущена, функция, как правило, будет удалена.
3、 Исходный код Его основная функция описана ниже
4、 Общая функция сети заключается в следующем (роль журнала сохранения - это предотвратить перезагрузку страницы, когда журнал будет пустым. Это довольно важно.):
Запросить файл Описание файла Описание
Всего четыре модуля:
Приведенное выше мое резюме, контент немного больше, я надеюсь, что каждый может увидеть пациента. , Chrome devtools также имеет много очень полезных функций, вы можете продолжать исследовать Я надеюсь, что мое резюме полезно для всех.
Всего есть три причины для создания консоли в браузере:
- Для отладки самого браузера еще на стадии проектирования.
- Для обучения молодых специалистов функциям того или иного браузера.
- Для отладки профессионалами своих интернет-страниц в реальном времени.
Немногие знают, но свой сайт можно написать, используя всего 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. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Читайте также: