Как увеличить консоль в браузере
Консоль разработчика в браузере («Хром», «Файерфокс», «Сафари» или т. п.)представляет собой инструмент, который позволяет:
Именно о нём и пойдёт речь сегодня. В этом посте вы узнаете, как включить консоль разработчика в браузере и как не испугаться её сложного интерфейса. Вдобавок вы научитесь вносить нужные правки и даже тестировать их «не отходя от кассы», а также получите целый ряд полезнейших лайфхаков.
Ознакомление с консолью и основные инструменты
Консоль разработчика даёт возможность для взаимодействия с содержимым сайта непосредственно в браузере, что, в свою очередь, обеспечивает целый ряд преимуществ. В частности:
- Возможность видеть web-страницу в том виде, в котором она представлена именно сейчас;
- Возможность вносить исправления напрямую, без вспомогательных инструментов;
- Возможность вносить изменения и сразу же отслеживать то, как они работают в браузере.
Вышеперечисленное говорит о том, что при правильном подходе данный инструмент может быть полезным не только профессиональным программистам, но и дизайнерам, верстальщикам и даже маркетологам… И именно с точки зрения последних мы его и рассмотрим. В данном контексте сразу же выстраивается достаточно чёткая схема, в которой сайт является каналом для совершения продаж.
Из этого следуют другие понимания: чтобы их было больше, он должен быть удобным, быстрым и красивым… И это – лишь ключевые характеристики, без которых привлекать потенциальных посетителей было бы очень непросто, если не невозможно. Чтобы улучшить то, что уже есть, нужно провести соответствующий анализ, дать ему оценку, чётко определить задачу для разработчика… И если в браузере у вас открыта консоль разработчика и вы знаете, как ею пользоваться, – лучше инструмента вам не найти!
Он поможет получить сведения о тех или иных элементах сайта. Как открыть консоль разработчика в браузере «Хром», которую мы и рассмотрим? Просто наведите на любую область сайта курсор и кликните правой кнопкой мыши. Перед вами раскроется вот такое меню:
Ещё одна возможность сделать это – использовать сочетание клавиш “Ctrl + Shift + C” или нажать “F12” (и консоль откроется с правой стороны).
Если это первый ваш заход в неё, то скорее всего вы испытаете некоторое напряжение, увидев большое количество панелей и инструментов, да ещё и на английском языке. На первый взгляд разобраться с этим не так-то и просто, однако дорогу осилит идущий. Присмотритесь – и вы поймёте, что все сведения представлены в определённом порядке, а это уже что-то!
Как известно, любой сайт имеет чёткую структуру, в которой каждый элемент и подэлемент занимает определённое место. Помимо контейнеров здесь представлены изображения и ссылки, кнопки, текстовое содержимое, разделённое на абзацы, и целый ряд других элементов.
Правильно откорректировав любой из них, можно улучшить продающие свойства сайта со всеми вытекающими в виде повышения продаж. В разделе “Стили” можно обнаружить свойства каждого выбранного элемента, которые позволяют ему отображаться именно в таком виде. При необходимости их можно корректировать в режиме «онлайн», отслеживая изменения в браузере.
Важно понимать, что во время сеанса работы с консолью все изменения, проводимые через неё, оказывают влияние только в его рамках. Это значит, что вы можете смело жать на разные элементы, чтобы изучить их работу, а потом просто перезагрузить сайт – и все внесённые изменения исчезнут.
Ознакомление с основными элементами консоли
Их знание облегчит понимание особенностей организации всей консоли и позволит быстро и легко задействовать самые разные инструменты. Разработчики предусмотрели целый ряд возможностей, связанных с этим:
- Перемещение блоков на панели;
- Изменение их размеров;
- Перемещение самой консоли.
Для последнего достаточно раскрыть специальное меню, нажав на значок из трех вертикальных точек в правой верхней части.
Чтобы изменить размер блока, просто наведите курсор на границу между блоками и потяните в нужную сторону. Для смены представления нажмите на значок из трех вертикальных точек и выберите любой из вариантов размещения с надписью “Закрепить сбоку”. Все варианты представлены в одну линию и отображены графически, поэтому выбор не станет проблемой. В соответствии с ними консоль может быть расположена в отдельном окне, слева, справа или внизу окна.
Интерфейс представлен следующим:
- Панелью “Элементы”;
- Панелью свойств “Стили”;
- Панелью вывода “Консоль”.
Они расположены одна под другой, и рассматривать их мы будем по порядку от верхней к нижней.
Вкладка “Элементы”
В ней представлено древо элементов сайта, которое доступно как в свёрнутом, так и в развёрнутом виде. Первое имеет место быть если не был выбран отдельный элемент, и позволяет увидеть, что помимо скриптов сайт включает в себя и . Чтобы проще ориентироваться, достаточно понять, что:
- объявленные элементы подсвечиваются фиолетовым;
- Их свойства и характеристики подсвечиваются коричневым;
- Расшифровка их характеристик подсвечивается синим;
- Комментарии разработчика подсвечиваются зелёным;
- Ссылки выделены подчёркиванием.
Все элементы доступны к открытию нажатием на треугольник серого цвета с левой стороны.
Вкладка “Консоль”
Она дублирует панель, представленную в нижней части консоли. Выбирая её, вы сможете проводить анализ функционирования сайта в режиме реального времени. В процессе его загрузки вы увидите в ней отображение различных событий, включая и ошибки. Их регистрация в автоматическом или ручном режиме позволит повысить работоспособность web-ресурса и его отдельных элементов. Здесь же предусмотрена возможность для введения команд и тестирования реакции на них и первого, и вторых.
Вкладка “Источники”
Она позволяет увидеть связь сайта с другими (как внешними, так и внутренними). Именно здесь можно отследить её со счётчиками web-аналитики, API и социальными сетями. В этом же разделе представлен и код источника данных, который позволяет корректировать взаимодействия.
Вкладка “Сеть”
Здесь представлена информация о влиянии на загрузку сетевого соединения тех или иных элементов и модулей сайта. Таким образом вы сможете оптимизировать те или иные его составляющие.
Вкладка “Производительность”
Она предназначена для записи сеанса взаимодействия с сайтом и позволяет увидеть то, как функционируют те или иные его элементы:
- Время, необходимое на загрузку;
- Объём затрачиваемых ресурсов.
Эти данные можно сравнить с теми, которые считаются оптимальными, и провести соответствующую оптимизацию. Для того чтобы получить отчёт, нужно нажать на кнопку записи и начать выполнять на сайте те или иные действия.
Вкладка “Память”
Здесь можно увидеть распределение времени исполнения и памяти web-страницы по внутренним ресурсам. Таким образом можно понять, какие именно элементы дают максимальную нагрузку на систему.
Вкладка “Приложение”
Несмотря на своё название, работает она не только с ними. Благодаря ей можно изучать загруженные элементы вроде куки, кэша или базы данных.
Вкладка “Безопасность”
Здесь пользователь может работать с сертификатами безопасности и получать данные о безопасности соединений.
Вкладка “Lighthouse”
Она предназначена для проверки того, насколько хорошо сайт организован. Процесс протекает в автоматическом режиме, а по его завершении пользователь получает практические рекомендации, которые позволяют оптимизировать работу тех или иных элементов.
Элементы панели свойств и характеристик
Опускаемся на уровень ниже и разбираем следующие семь вкладок.
Вкладка “Стили”
Она отображает структуру использования стилей CSS и наглядно демонстрирует их самих. Они необходимы для того, чтобы придать различным элементам сайта тот или иной внешний вид. В процессе используют специальные файлы, которые связаны со стилями посредством классов и идентификаторов. К слову, эти связи тоже можно увидеть здесь.
Вкладка “Computed”
Перейдя на неё, можно увидеть модель того или иного элемента, который нужно предварительно выделить. Сами стили перечислены в перечне, что позволяет удобнее работать с ними.
Вкладка “Макет”
В ней можно увидеть элементы, отображаемые на сайте, типа “Grid”, которые применяются достаточно редко.
Вкладка “Прослушиватели событий”
В ней можно увидеть все элементы обработки событий для выделенной web-страницы или её части. Это могут быть изменения оформления, загрузка, нажатие на кнопку, прочее. Всё это можно делать посредством целого ряда счётчиков аналитики или системы работы с тэгами (вроде “GoogleTagManager”).
Вкладка “Точки остановки DOM”
Маркетологам она без необходимости, впрочем её функция заключается в том, чтобы определить контрольную точку, останавливающую запуск кода сайта. Такой подход позволяет получить представление о том, как он будет выглядеть после изменения определённого элемента. Это актуально если существует риск того, что оно бы привело к сбоям в функционировании.
Вкладки “Свойства” и “Специальные возможности”
В первой отображаются все свойства выбранного элемента, а во второй можно увидеть древо уровней доступа для него. Поскольку эти данные также интересны только разработчикам, подробно их описывать не будем.
Особенности работы маркетолога с консолью разработчика
Данный раздел посвящён лайфхакам, которые позволят использовать консоль для решения маркетинговых задач максимально эффективно.
Лайфхак №1: Отслеживайте вносимые изменения в режиме «онлайн»
Самая полезная функция, которую стоит использовать маркетологам, – это внесение изменений/исправлений вручную с их автоматическим отображением. По сути, можно откорректировать web-страницу прямо в браузере, но лишь для себя, а на сервер затем перенести только желаемые коррективы.
Это касается не только текстов, но и всех остальных элементов, а сам подход позволяет оптимизировать и улучшить сайт. Помимо этого, благодаря ему можно поставить соответствующие задачи дизайнеру или верстальщику.
Лайфхак №2: Поиск шрифтов или элементов
Он существенно упрощён в консоли, а необходимость в нём, как правило, возникает при внесении изменений в сайт через систему управления содержимым (CMS). Для этого нужно использовать сочетание клавиш “Ctrl+F”, которая и откроет строку поиска.
Лайфхак №3: Просмотр сайта со смартфона или планшета
Для этого достаточно выбрать определённую иконку, которая находится перед вкладкой “Элементы”.
Благодаря ей вы сможете оценить, насколько привлекательно сайт смотрится с экранов самых разных современных мобильных устройств и нужно ли вносить какие-то изменения в его оформление. Обратите внимание на самую верхнюю панель с левой стороны: в ней предусмотрена возможность выбрать модель устройства для просмотра, а также разрешение и масштаб.
Лайфхак №4: Работаем с куками
В них содержатся сведения о пользователе, которые могут оказывать влияние на отображение сайта. Они доступны для удаления в настройках любого браузера, где, впрочем, для этого пришлось бы искать сайт в довольно длинном перечне… А вот в консоли это можно сделать в разы быстрее: достаточно перейти на вкладку “Приложение”, найти там раздел “Файлы cookie”, открыть его – и выбрать нужный сайт. Удалить куки можно нажав правую клавишу и “Удалить данные”, а потом перезагрузив сайт.
Лайфхак №5: Поиск нужных элементов
Вкладка “Элементы” позволяет настраивать аналитику для сайтов со сложной структурой, если установить на него “GoogleTagManager”. В процессе консоль станет эффективным инструментом для поиска подэлементов, который позволяет отслеживать клики пользователей. Особенно это актуально в плане того, что многие кнопки включают в себя целый ряд вложенных элементов. Консоль позволит выбирать нужные элементы сайта, «разбивать» их на дочерние и ставить каждый из них на отслеживание в “GoogleTagManager”.
Что касается поиска элементов на древе сайта, то его можно осуществить нажав на иконку в левой верхней углу консоли. Будет запущен режим автоматического поиска, при котором элементы, «задеваемые» при движениях курсора по странице, будут выделяться в древе в разделе “Элементы”. В ряде из них будут появляться всплывающие окна, в каждом из которых обозначен класс объекта и его основные свойства.
Ещё один лайфхак заключается в том, чтобы использовать консоль для поиска счётчиков аналитики на сайте. Это актуально в ситуациях, когда с ними возникают проблемы (к примеру: остаются элементы старого счётчика или новый загрузился не до конца). Алгоритм действий – следующий:
- Перейти в панель “Элементы”;
- Выбрать “Ctrl+F” и запустить поиск;
- Ввести в него текст из счётчика;
- Изучить первый обнаруженный элемент;
- Если это не то, что нужно, – использовать кнопки «вверх»/«вниз» для дальнейшего поиска.
Лайфхак №6: Отслеживание событий
Данное решение может быть интересным не только разработчикам, но и маркетологам. В консоли под него предусмотрена вкладка “Консоль”. В неё в автоматическом режиме выводятся ошибки, такие как:
- Сбои доступа аналитических модулей из-за “Adblock”;
- Сложности с загрузкой ряда элементов.
Итоги
Консоли разработчиков, представленные в браузерах, являются по-настоящему эффективными инструментами, которые дают возможность не просто проникать и изучать любые элементы сайта, но и корректировать их, оптимизировать их работу и применять для решения целого ряда маркетинговых задач. Само собой, всё это становится возможным лишь в умелых руках.
Waiting TTFB: как ускорить?
В условиях жёсткой конкуренции владельцам web-сайтов приходится использовать все возможности для того, чтобы не только привлечь новых, но и сохранить старых пользователей. Немаловажную роль в этом играет такой параметр как время ответа сервера.
Лучшие программы для создания прототипа сайта
В зависимости от предпочтений дизайнера прототипирование сайта может быть представлено в виде скетча на бумаге или в виде полноценного цифрового динамического изображения. Существует ряд инструментов, способных существенно облегчить данную задачу…
Как получить и установить SSL-сертификат?
SSL-сертификат можно назвать инструментом подтверждения надёжности домена и удостоверения безопасности шифрования информационного потока между сервером и пользователем.
Если вам просто нужен быстрый, временный размер удар вы можете нажать Ctrl + / - для увеличения и Ctrl 0 сброс.
вот довольно недавний блоге на эту тему.
в основном, переопределить Default/User StyleSheets/Custom.css в своем каталог пользователей примерно так:
- Открыть Браузер
- Открыть Консоль.
- пресс Ctrl + .
я надеюсь, что это поможет вам
Если вы находитесь на Mac, используете японскую клавиатуру и хотите временно увеличить консоль, короткие сокращения:
Сбросить Зум: ⌘ 0
другие приложения, используя + для увеличения, но поскольку на японских клавиатурах знак плюс находится на втором уровне, он доступен только с сдвиг. Итак: ⌘ ⇧ +
то, где это становится странным, потому что Chrome ⌘ ⇧ + по-видимому, означает "масштаба". Если вы находитесь в консоли Javascript и делаете ⌘ ⇧ + , область содержимого окна увеличена. Но делать Zoom-out ⌘ - перемещает фокус обратно на консоль и масштабирует его. Результат: содержание получает больше, консоль меньше. Aaarggghhh.
Windows 7, Google Chrome 19.0.1084.46 m
метод изменения "пользовательских стилей/таможня.css "не работал на меня, но Ctrl+" + " работал : -)
это устарело-см. ответ @TinyJaguar. Теперь вы можете просто использовать Command -+, если вы выбрали что-то в консоли разработчика.
Если вы хотите увеличить размер шрифта в консоли Javascript, вам нужны определенные размеры шрифта. Это немного сложнее, чем просто задать размер шрифта для источник:
Я создал небольшой плагин, который предоставляет настройки редактора коллекции для инструментов разработчика Chrome,включая возможность постепенного управления размером шрифта.
Это добавит панель "Настройки автора" в Инструменты разработчика Chrome, где вы можете постепенно контролировать размер шрифта, от 10px - 22px
если вы похожи на меня, CMD + + не работает для вас, потому что он переключает вас на первую вкладку (хотя у вас есть Enable ⌘ + 1-9 shortcut to switch panels отключить).
Ну, в таком случае откройте Dev Tools, Undock into separate window а затем View --> Zoom in в строке меню Chrome. Вуаля!
как только вы закрепите инструменты Dev обратно в окне браузера, View --> Zoom in фактически увеличит размер шрифта в окне браузера, но пока инструменты Dev разблокируются, он нацелен на разблокируемый Dev Инструменты.
Примечание: из DevTools, вы должны иметь вкладку элементы открыты для того, чтобы настроить размер шрифта с помощью " Ctrl +/ -."По какой-то причине это невозможно сделать на других вкладках.
в новой версии Chrome вы можете легко изменить размер шрифта шрифта в инструментах разработчика.
Я знаю, что это старый путь, но простое решение, которое я нашел, - увеличить min. font size в настройках, и это позаботится о размере шрифта в отладчике chrome.
еще один быстрый способ изменить размер шрифта в Chrome Dev tools навсегда: Settings --> Show Advanced Settings --> Web Content : изменение процента масштабирования страницы.
Если вы используете новый MacBook pro 2017, вы можете просто использовать команду => shift => + или-все сразу.
на MacOs, Если ваш ключ 0 или + или - находятся на втором уровне, набрав ⌘ ⇧ + не будет работать. В таком случае вам нужно использовать capslock ⇪ , а затем введите ⌘ + и ⌘ 0
Если вы используете ноутбук, вы можете сделать это только с трекпадом ноутбука.
нажмите на трекпад одним пальцем (пока не выпускайте), затем прокрутите вверх или вниз другим пальцем, чтобы увеличить или уменьшить размер шрифта.
просто убедитесь, что панель инструментов dev находится в фокусе. Протестировано и работает на моем HP Pavilion, Windows 8.
Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.
Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.
Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools
Посмотреть, как выглядит страница с телефона и планшета
При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:
Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.
Так выглядит страница в мобильной версии
На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.
Быстро изменить стили прямо на странице
В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.
Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.
Меняем элемент прямо на странице
После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.
В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover , :active , :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.
Изменяем стилевые правила для псевдоэлементов
Протестировать блоки на переполнение
Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.
Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.
Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.
Как проверить элемент на переполнение текстом
Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:
Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.
Переполнение родительских блоков
Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.
Пример переполнения: элементы выпадают из родительского блока.
Узнать, какие файлы подключены, и посмотреть их расположение
Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:
Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.
Меняем цвет фона во вкладке Sources
Понять, почему не работают скрипты
Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js
Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.
Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.
Как использовать точки останова
Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.
Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.
JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.
Для чего они нужны, пойдем по порядку:
Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.
Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.
Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.
Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.
Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.
Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.
Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.
Проверить качество сайта
При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.
Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.
Как использовать Lighthouse
Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.
В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.
Результаты проверки.
Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.
Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.
При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».
Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».
Название этой статьи может сбивать с толку. Во-первых, мы разъясняем, что постоянное изменение содержимого веб-страницы из браузера невозможно. Только владелец веб-сайта может редактировать контент из панели администратора веб-сайта и публиковать его в Интернете. Однако во многих ситуациях вы можете захотеть вставить заметку на действующую веб-страницу. Вы можете сделать снимок экрана с обновленным содержимым, чтобы его можно было использовать для обмена или в последующих справочных целях. Итак, здесь мы объясним, как редактировать содержимое веб-страницы онлайн в браузерах во временных целях.
Связанный: Как делать заметки в браузере онлайн?
2 способа редактирования содержимого веб-страницы в Интернете
Вы можете редактировать контент в Интернете двумя способами, используя инструменты разработчика. Эти методы будут работать во всех браузерах, и мы объясним здесь с помощью Google Chrome.
- Редактировать элементы как HTML
- Изменить от руки с помощью консольной команды
1. Редактировать элементы как HTML
Следуйте приведенным ниже инструкциям, чтобы отредактировать содержимое как элементы HTML.
- Откройте веб-страницу, содержание которой вы хотите изменить, в Google Chrome.
- Щелкните правой кнопкой мыши и выберите параметр «Проверить». Либо нажмите F12 на ПК с Windows, чтобы открыть консоль разработчика.
- Используйте инструмент выбора элемента, чтобы выбрать элемент на странице, чтобы получить соответствующий HTML-код в консоли на вкладке «Элементы».
- Щелкните правой кнопкой мыши выбранный элемент в консоли разработчика и выберите вариант «Редактировать как HTML».
- Теперь добавьте любой контент, который хотите, используя тег абзаца HTML. Например, вставьте приведенный ниже код внутрь элемента :.
- Вы можете использовать любой класс CSS, который уже используется для других элементов на странице с тегом абзаца. В нашем примере мы будем использовать класс цвета фона, используемый в существующем элементе абзаца.
- После добавления элемента щелкните внешнюю область. Новый абзац мгновенно появится на веб-странице.
Как и при добавлении элементов, вы также можете удалить любые элементы, щелкнув их правой кнопкой мыши и выбрав опцию «Удалить элемент». Закройте инструмент разработчика и сделайте снимок экрана с обновленным содержимым.
2. Использование консоли консоли
Единственная проблема в вышеупомянутом методе заключается в том, что вы должны использовать HTML-теги для добавления содержимого. Если вы хотите напрямую удалить или добавить контент на веб-страницу, следуйте этому методу.
- Откройте консоль разработчика в Chrome или другом браузере.
- Перейдите на вкладку «Консоль», вставьте приведенный ниже код и нажмите Enter.
- Вы увидите, что в качестве возврата указано «истина».
- Теперь вы можете удалять и добавлять любой контент прямо на веб-страницу.
Закройте окно консоли разработчика и измените содержимое веб-страницы в Интернете, чтобы добавить собственное содержимое.
Заключительные слова
Некоторые браузеры, такие как Edge, предлагают функцию аннотации для быстрого выделения важного содержимого при чтении. Однако редактирование содержимого веб-страницы в Интернете поможет вам добавить на страницу собственный текст или изображения. Вы можете сделать снимок экрана целиком и сохранить для справки в автономном режиме или вставить в любые документы. Обновленный контент будет доступен, пока вы не закроете браузер или не обновите веб-страницу.
Google Chrome - самый популярный и современный браузер, который используют пользователи и разработчики. Google Chrome предоставляет инструменты, значительно облегчающие жизнь разработчикам сайтов и тестировщикам. Google Chrome DevTools дает возможность прямо в браузере отладить работу веб сайта или приложения.
Google Chrome DevTools – как это работает и кому это необходимо?
Мы знаем их, как инструменты для разработчиков сайтов.
- Предназначены для отладки и разработки и веб инструментами, встроенными в браузер.
- Дают доступ к структуре сайта и браузеру для его тестирования.
- Их функционал начинается от эмуляции просмотра на различных устройствах до редактирования сайта.
- Дает возможность проверять производительность сайта в целом, и отдельных частей.
Так же есть экспериментальная версия браузера Chrome Canary которая обновляется ежедневно.
Пользовательская версия браузера и Canary могут работать вместе, так как Canary не всегда стабилен.
В данной статье мы приведем некоторые сочетания клавиш, а с полным их списком вы можете ознакомиться на веб-сайте Google Developer перейдя по ссылке:
Chrome DevTools - как открыть?
Есть три основных способа открыть DevTools в браузере. Используйте тот метод, который вам нравится, ниже подробнее о них:
1. Из меню браузера.
Нажать на кнопку с тремя точками, перейти в Дополнительные инструменты -> Инструменты разработчика
2. Открыть с помощью мышки
Быстрый и простой способ перейти в DevTools вызвав контекстное меню в браузере.
Правой кнопкой мыши щёлкните на элементе сайта и затем выберете «Просмотреть код».
3. Открыть сочетанием клавиш
Вы можете открыть консоль разработчика следующими сочетаниями:
- Mac: Cmd + Opt + I
- Windows: F12 или Ctrl + Shift + I
Рассмотрим 9 основных вкладок в консоли разработчика
Elements - элементы страницы
В данной вкладке вы можете увидеть структуру страницы, на которой вы находитесь в данный момент (справа).
- При нажатии на элемент, в нижней части можно увидеть полный путь к нему.
- С правой стороны панель стилей. В ней можно редактировать активный стиль элемента, из правой части.
- В данной вкладке можно редактировать содержимое страницы, перемещать HTML блоки, создавать новые элементы. Используется для отладки и редактирования страницы непосредственно в браузере.
Console - консоль
- Данный инструмент используется для отладки кода Javascript, проверки скриптов, просмотр логов, которые можно выводить с помощью команды console.log, а также вывод различных ошибок кода и загрузки элементов.
- Некоторые расширения браузера Chrome также могут выводить некоторую информацию и ошибки, например посмотреть как Adblock блокирует рекламу на странице.
Sources - ресурсы, файлы
- В данной вкладке можно просматривать и редактировать, загруженные браузером файлы, при переходе на страницу.
- Вы можете сделать поиск в определенном скрипте, посмотреть какие файлы загружаются при их вызове, а также с помощью правой панели можно останавливать и запускать пошагово работу функций на сайте для отладки.
- Так же добавлять специальные брейкпоинты, где скрипт будет останавливаться, и ожидать запуска вами вручную.
Network - сеть
В данном инструменте можно посмотреть, как загружаются файлы браузером, статус загрузки файлов, тип, размер, время загрузки и время выполнения страницы.
При использовании данной страницы по умолчанию выключается кеширование браузером.
Perfomance - скорость работы
- Используется для оценки нагрузки и скорости загрузки по каждому элементу.
- Демонстрирует, как они в целом влияют на скорость работы сайта.
Memory - количество используемой памяти
Покажет сколько сайт, на текущий момент, потребляет оперативной памяти, не учитывая потребление самой вкладкой браузера.
Application - приложение
Используется для просмотра и отладки веб приложений.
Security - безопасность
Lighthouse - оценка скорости работы сайта
Это по сути «Google Page Speed» внутри браузера, избавляет вас от перехода на страницу данного инструмента для теста там.
- С правой стороны есть настройки, что именно вам хочется проверить, а так же на каком типе устройства требуется сделать проверку.
- Результат можно будет сгенерировать кнопкой «Generate report» и через некоторое время будет результат.
- Для того чтобы очистить и проверить снова - есть кнопка новой проверки.
Советы и приемы
В данной статье мы рассмотрим лишь некоторые из десятка возможностей которые вы можете использовать в консоли разработчика.
Если вы не использовали их раньше, то это отличная возможность пройти быстрый курс по инструментам.
Быстрое переключение файлов
Быстро получить доступ к файлам сайта - можно используя комбинацию Ctrl + P (Mac: Cmd + P), и выполнить поиск по названию.
Улучшение читаемости кода
Немногие знают, что в DevTools есть возможность автоматически разворачивать код, так он проще читается.
- Проверить данный функционал можно, нажав на <> во вкладке Sources.
- Очень полезная функция, когда код минифинцирован.
Изменение HTML элементов
Во вкладке «Elements» удобно редактировать элементы в браузере, сразу видны изменения на сайте.
- Выбрав любой элемент в панели, щёлкните по тегу дважды, он перейдет в режим редактирования. Так можно изменить класс, тег, добавить свойства.
- При этом автоматически обновятся закрывающиеся теги. Изменения в браузере будут видны, будто вы действительно внесли правки в код.
Изменение свойств CSS
Свойства стилей можно изменять в той же вкладке. Удобный и легкий способ изменения внешнего вида сайта мгновенно.
Поиск кода
Быстро найти код поможет команда Ctrl + Shift + F (Mac: Cmd + Opt + F).
Точки остановки работы кода Javascript (брейкпоинты)
При отладке кода Javascript полезно указывать брейкпоинты.
- Во вкладке Sources нажмите на строчку кода, где нужна остановка скрипта, и выполните комбинацию Ctrl + R (Mac: Cmd + R) для перезагрузки страницы.
- Работа скрипов сайта остановится на выбранном вам месте. Кнопка F8 отвечает за паузу и продолжение выполнения скриптов.
Переход к нужной вам строке
Переход выполняется с помощью команды Ctrl + O (Mac: Cmd + O).
Мы вывели для примера строку 256 и столбец 15.
Несколько курсоров
К примеру - у вас несколько строк или частей кода, и вам нужно что-то добавить.
Вы можете ввести команду Ctrl + Click (Mac: Cmd + Click), и у вас будет возможность вводить информацию в несколько строк одновременно.
Положение консоли
- Вы можете изменить положение Chrome DevTools в браузере и даже отстыковать его от окна, чтобы использовать например на втором мониторе. Или просто закрепить в определенном положении в окне.
- Изменить можно сочетанием клавиш Ctrl + Shift + D (Mac: Cmd + Shift + D) или через меню внутри консоли разработчика.
Очистить кеш и куки
Очень легко можно очищать кеш и куки внутри консоли, не используя настройки браузера, это важно при тестировании сайта.
- Очистить куки можно во вкладке Application - слева меню Storage - Cookies.
- Нажимая на эти файлы правой кнопкой, можно очистить их.
- Чтобы отключить кеширование, нажмите на Настройки (шестерня) и найдите в таблице Network пункт- «Disable cache». Теперь когда вы находитесь в консоли разработчика, кеш сайта не будет сохраняться.
Режим медиа устройства
Проверить свой вебсайт на адаптивность можно в специальном режиме устройства.
- В данном режиме можно проверить совместимость вашего сайта с популярными форматами гаджетов и место разрыва страницы, чтобы применить там media query.
- В режиме просмотра на устройстве, можно нажать на значок планшета в DevTools или зажать Ctrl + Shift + M (Mac: Cmd + Shift + M).
- Вы можете выбрать мобильное устройство из списка доступных, или задать разрешение самостоятельно. Во втором случае нужно кликнуть - Responsive.
- Также можно изменить положение устройства.
Цветовая палитра и её подбор
Можно извлечь любой цвет, который используется на сайте.
- Чтобы посмотреть цвет, нажмите на цветовой блок в панели стилей, и наведите на странице на нужный элемент.
- Так же есть палитра цветов, которая подтягивает с вашего сайта используемые цвета.
Изменение цветового формата
Для переключения между цветовыми моделями RGBA, HSL, HEX можно используя комбинацию клавиш Shift + Click на цветовом блоке.
Переключить состояние элемента
История сетевой загрузки
Данная функция покажет, загрузку страницы с первой секунды до окончания.
Производительность
Позволяет увидеть файл, загружающийся дольше всего, и количество потребляемых ресурсов. Показывает: активность, источник, время, рендеринг.
Для запуска нажмите Ctrl + E (Mac: Cmd + E) и обновите страницу Ctrl + R (Mac: Cmd + R).
Остановить можно нажав на Finish.
Регулирование сети
Данный инструмент дает возможность тестировать скорость загрузки сайта при различных условиях сети.
- Если у посетителя вашего сайта - медленный интернет, ему поможет данный инструмент.
- В панели «Network» нажмите «Online» (установка по умолчанию) и выбирайте значение или уже из готовых, или создайте свой профиль кнопкой «Add».
- Можно установить скорость загрузки, отдачи и задержку (например, чтобы проверить скорость в других странах).
Безопасность
Заключение
Надеюсь, вы заметили, как много полезных функций имеет DevTools в браузере Chrome.
- Данные инструменты помогут вам проверять производительность и работу сертификатов, делать отладку вашего сайта
- Все, что было сказано выше, лишь часть множества доступных функций.
Если мы не рассказали, о какой – то из функций, напишите нам об этом в комментариях.
Читайте также: