Знаете, зачем в инсталяторе Windows есть Internet Explorer? Он нужен для того, чтобы скачать браузер.
Шутка конечно же, хотя некое время назад IE называли никак иначе, как "программа для установки браузеров"...
У всех есть предпочитаемые браузеры - программы для просмотра сайтов. У кого-то предпочтение обусловлено фразой "мне тут удобней". У кого-то привычка: "Internet Explorer стоял тут всегда и я привык".
На середину 2022 года, мировой рейтинг браузеров по использованию выглядел примерно так:
- Google Chrome – самый популярный интернет-браузер в мире, им пользуется более 3,3 миллиарда человек.
- Вторым по популярности в рейтинге стал браузер Safari от Apple, им пользуются свыше 1 миллиарда человек.
- Третье место со значительно более скромными результатами занимает Microsoft Edge — свыше 212 миллионов пользователей.
- Далее в порядке убывания следуют Firefox (179 миллионов человек), браузер Samsung (более 149 миллионов человек) и Opera (более 108 миллионов человек).
Статистика конечно не очень корректна, так как к примеру Safari и Microsoft Edge устанавливаются по умолчанию на устройства от Apple и Microsoft соответственно, что объясняет их популярность.
Но в принципе, статистика показательна.
За долгую карьеру разработчика, не помню, чтобы видел, чтобы web разрабатывался на чем-то кроме Chrome или FireFox. Но, конечно, это дело вкуса. Дело в том, что именно эти браузеры имеют очень хорошие консоли разработчика.
Консоль разработчика: F12 в браузере.
В арсенале разработчика тут есть ряд очень любопытных механизмов - чтобы не перегружать и так большой текст, рассмотрим на данный момент только три из них.
Я открыл в браузере эту страницу и нажал F12. Вы можете воспроизвести эти действия и увидите тоже самое у себя. По умолчанию, консоль разработчика показывается справа, что на мой взгляд не очень удобно. На скриншоте я развернул пункт, с помощью которого можно переместить меню в любое удобное для вас место:
Итак, давайте поближе взглянем на то, что же это такое. Буду показывать на примере страницы скачивания браузера Chrome.
Первый пункт - элементы.
Это как раз и есть полученный нами HTML-документ. На первый взгляд хаос какой-то? Согласен. Но на самом деле при минимальном опыте, все покажется структурировано и достаточно легко понимается. Данные во вкладке "интерактивны" - то есть их можно открывать или сворачивать как меню. Можно редактировать и видеть изменения на экране сразу же - никакой перезагрузки - поменял что-то, увидел на экране. Попробуй и почуствуй себя крутым хакером! 😈
При этом, сразу же CSS - это раскраска нашего HTML - показывается справа. CSS и HTML идут в связке практически всегда. И эта часть также интерактивна. Можно изменить цвет, размер и прочие характеристики.
Давайте попробуем сейчас "хакнуть" текст на экране? В левом верхнем углу консоли есть иконка квадрат со стрелочкой. Нажимаем мышкой один раз и наводим мышку на текст "Везде как дома с Chrome".
При выделении как на скриншоте выше, кликаем мышкой еще раз. HTML-документ в консоли развернется и подсветит строку, содержащую выбранный элемент. На скриншоте видно - подсвечена строка с текстом, который мы видим на экране. Давайте отредактируем её?
Двойной клик на тексте "Везде как дома с Chrome" - в консоли! - строка стала редактируемая. Напишем "Дома и без Chrome хорошо" и нажмем Enter. А справа в окошке CSS чуть-чуть ниже найдем строку "color: #202125;". Клик на не понятном пока тексте "#202125" - станет возможным редактирование - пишем туда красный по английски "red" и жмем Enter. (Для тех, кто хочет понять раньше других что это за цифры.) Смотрим?
Конечно, консоль нужна не для баловства. Реальных изменений тут не сделаем - первое же обновление страницы уничтожит все труды кропотливой работы по глумлению над сайтом. Однако, есть в умении оперировать в консоли и свои плюсы. Все встречались с назойливой рекламой на сайтах? Ну так вот простой лайф-хак:
- F12 - открываем консоль
- выбираем с помощью стрелочки, как делали выше, рекламу - тут интуитивно понятно будет после пары-тройки раз
- кликаем мышкой, в консоли открывается HTML-документ с выбранным уже блоком
- нажимаем на клавиатуре Del - удаляем рекламу со страницы
- повторное нажатие F12 - закрываем консоль
Прощай реклама! До обновления страницы, вероятней всего вы её больше не увидите.
Второй пункт - Консоль.
К этому пункту мы вернемся немного позже, когда будем рассматривать JavaScript. Тем не менее, он может быть достаточно полезен не только разработчикам. Наверняка, многие заходили на ресурс https://onlinelpu.ru/ - это онлайн бронирование талонов к врачу, или https://www.gosuslugi.ru/ - тут пояснения не требуются. И часто с ними (как с большинством ресурсов, что сделаны для госорганизаций) бывает непонятная ерунда - то ли работает, то ли нет. Жмем кнопку и чего-то долго ждём. Так вот, чтобы не ждать - просто откройте в консоли вторую вкладку. Если видите там красный текст, значит что-то точно идет не так и вероятно имеет смысл обновить страницу или попробовать произвести необходимые действия на сайте позже.
Четвертый пункт - Сеть.
Тоже любопытный с точки зрения разработчиков пункт. Не будем задерживаться надолго на нем: он имеет для нас скорее прикладное значение. В этой вкладке отображаются все файлы с текущего сайта, полученные с сервера на ваш браузер. Тут и HTML, и CSS, и Javascript, и картинки...
В дополнение.
Всегда нужно помнить, что есть такая штука, как кэш. Что это такое - сейчас поясню. Когда вы заходите на сайт, для уменьшения используемого трафика, браузеры проверяют у себя - получал ли он уже с сервера такие файлы. И, если находит у себя в "истории", то вполне может использовать ранее загруженный. Как правило, это касается CSS и JavaScript. Вот это становится проблемой при разработке, так как не факт, что только что внесенные изменения вы увидете у себя на экране.
Рекомендации:
1. В консоли есть галочка "Отключить кэш" - у меня на скриншоте это "Disable cache" - её лучше "включить".
2. Все знают про кнопку F5 - обновить страницу - но она просто обновляет страницу. Есть комбинация клавиш "Ctrl Shift R" (как вариант "Ctr Shift F5") - загрузка без кэша. Лучше отработать до автоматизма обновлять именно так, а не простым F5 - это поможет избежать проблем и не понимания ситуации.
Post Scriptum
"Плюшка" в догонку. Комбинация клавиш "Ctrl Shift T" откроет вам последнюю закрытую вкладку, повторно - еще ранее по истории закрытия, и так далее, и так далее...
Все статьи попадают в "Оглавление канала". Не пропускаем новости!
