Здравствуйте, дорогие друзья!

Сегодня я хочу рассказать об уникальном инструменте для веб-разработчиков, встроенном в популярный браузер Google Chrome. Этот инструмент называется WebTools или веб-инспектор. Из-за простоты и удобства им могут пользоваться как люди, профессионально занимающиеся созданием сайтов, так и те, кто лишь немного знаком с языками HTML и CSS. Инструмент позволяет исправлять ошибки в коде сайта во время его создания, вносить изменения в готовые сайты: изменять расположение элементов, их дизайн и многое другое.

Рассмотрим инструмент WebTools подробнее.

Это можно сделать двумя способами:

Окно инструмента состоит из двух частей. По умолчанию, слева открывается вкладка Elements, в которой отображается HTML-код страницы, а справа – вкладка Styles. В ней расположен CSS-код выделенного элемента.

Сразу следует отметить, что окно WebTools можно располагать по-разному. Для этого щелкаем по значку рядом с кнопкой закрытия и выбираем нужный вариант:

• В нижней части окна браузера.
• С правой стороны. Это может быть удобно при использовании широкоформатного экрана.
• В отдельном окне. Этот вариант удобен, если вы используете , на одном мониторе можно экспериментировать с кодом, а на втором видеть результат.

Способы перемещения по коду

Возможны два таких способа.

• В первом мы просто перемещаем указатель мыши по коду в окне веб-инспектора и области, соответствующие этому коду, подсвечиваются на самой веб-странице. То есть мы по коду находим элемент.
• Второй способ обратный, когда по элементу находится код. В этом случае мы перемещаемся по странице, а выделяется область кода. Щелкнув на интересующем нас элементе, мы увидим его код в окне внизу.

Для переключения режимов перемещения используется самая левая кнопка.

Редактирование кода

Главное достоинство WebTools состоит в том, что все изменения в коде сразу видны на веб-странице в окне браузера, то есть этот инструмент превращает ваш браузер в визуальный редактор.

Чтобы редактировать код, нужно сделать двойной щелчок на соответствующем теге, атрибуте, CSS-селекторе или его значении. Элемент выделится и его можно редактировать.

Инструмент имеет много различных приятных мелочей, облегчающих работу. Например, выделив стиль элемента, можно определить, в какой строчке и какого CSS-файла он прописан. При работе с цветом появляется палитра, помогающая выбрать нужный цвет. При выделении URL-адреса изображения появляется его миниатюра и т. д.

Интересная особенность инструмента состоит в том, что он позволяет выделять код не только строчками, но и столбиком. Для этого переходим на вкладку Sources , выбираем файл для редактирования, находим нужные строчки, нажимаем клавишу Alt и выделяем столбик с одинаковыми кусочками кода. Этим способом можно редактировать сразу несколько одинаковых элементов в разных строчках.

Тестирование адаптивной верстки

Еще одна полезная и актуальная функция инструмента WebTools – проверка отображения страницы на различных устройствах. Для ее активизации щелкните на кнопке с изображением телефона. Теперь можно выбирать разрешения экрана, поворачивать его, изменять масштаб. Само окно инспектора при этом не изменяется.

Кодирование изображения в Base64

В статье я писал о том, что для ускорения загрузки сайта небольшие изображения можно закодировать в формате data URL и вставлять такой код непосредственно в HTML-страницу. Так вот, наш уникальный инструмент позволяет выполнить такую кодировку. Как это сделать?

Секретная фишка

Используя это средство, можно изучать код не только своего сайта, но и любого другого, открытого в браузере. И, если вам понравился какой-либо элемент чужого сайта, но вы не знаете, как он сделан, можно просто скопировать соответствующий ему HTML-код, CSS-стиль, вставить в свои файлы и потом отредактировать. Конечно, для этого необходимы хотя бы минимальные знания этих языков.

Недостатки

Работая с рассмотренным средством редактирования кода, вы сразу заметите его недостаток – все изменения, вносимые в код, не сохраняются. После обновления страницы в браузере она примет первоначальный вид. Чтобы эти изменения сохранить, необходимо открыть соответствующие файлы в текстовом редакторе, отредактировать код и сохранить их. Хотелось бы, чтобы все корректировки, производимые в WebTools, сразу же сохранялись. Эта проблема решаема, и как это сделать, мы рассмотрим в следующем посте. Поэтому подписывайтесь на обновления блога, чтобы не пропустить новые материалы (форма для подписки справа).

А пока для наглядности предлагаю посмотреть видео:

Сегодня я познакомил вас с одним из инструментов, полезных для веб-разработки, но таких инструментов много, поэтому команда WebForMyself разработала новый курс «Инструменты Front-End разработчика» . Если вы занимаетесь созданием сайтов, то вам этот курс будет наверняка интересен и полезен. Вот ссылка на курс

Инструменты Front-End разработчика

Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит Вас использовать базовые функции инструментов разработчика в Вашем браузере.

Заметка : Прежде чем начать заниматься с примерами, откройте пример сайта для начинающих , с которым мы работали на предыдущих занятиях . Вам следует держать его открытым, чтобы выполнить описанные ниже действия.

Как открыть инструменты веб-разработчика в Вашем браузере?

Панель разработчика находится в нижней части Вашего браузера:

Как её отобразить? Есть три варианта:

Inspector: DOM обозреватель и CSS редактор

По-умолчанию, в панели открывается вкладка Inspector, Вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет Вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет Вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.

Если Вы не видите Inspector,

• Нажмите на вкладку Inspector .
• В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
• В Safari, элементы управления представлены не так чётко, но Вы должны увидеть HTML код, если Вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

• Удалить узел (иногда Удалить элемент ). Удаляет текущий элемент.
• Править как HTML (иногда Добавить атрибут /Править текст ). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.
• :hover/:active/:focus . Заставляет элементы переключить своё состояние на то, к которому применён Ваш стиль.
• Копировать/Копировать как HTML . Копирует текущий выделенный HTML.

Попробуйте изменить что-нибудь через окно Inspector на Вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите Править как HTML из контекстного меню. Вы можете сделать любые изменения, какие захотите, но Вы не сможете их сохранить.

Обзор CSS редактора

По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

• Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
• Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
• Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
• Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.
• Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.
• Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где Вы сможете написать совершенно новую декларацию для Вашей страницы.

Вы должно быть уже заметили другие вкладки в CSS редакторе:

• Вычислено : Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
• Блоковая модель : Отображает блочную модель выделенного элемента, здесь Вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
• Анимации : В Firefox, на вкладке Анимации Вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Inspector в различных браузерах:

• Chrome DOM inspector (Inspector в Opera схож с Inspector в Chrome)

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2 .) Откроется окно, как показано ниже:

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

1. alert("hello!");
2. document.querySelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.

1. alert("hello!);
2. document.cheeseSelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

Вы увидите некоторые ошибки, которые сообщит Вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!

Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

• Chrome JavaScript Console (Inpector в Opera схож с Inspector в Chrome)

Стилизуем инструменты разработчика (dev tools) в Google Chrome

Совсем недавно я узнал, что Chrome поддерживает темы для dev tools. Мне сразу-же захотелось попробовать это. Сразу скажу результат меня не совсем порадовал:-)

Подготовка

Для того, чтобы установить тему для dev tools, нужно включить экспериментальные функции. Чтобы это сделать введите в адресной строке Google Chrome chrome://flags/#enable-devtools-experiments . Рядом с пунктом Enable Developer Tools experiments нажмите Enable . Теперь перезапустите браузер (внизу должна быть кнопка).

Откройте инструменты разработчика (cmd + shif + i / F12), зайдите в настройки (иконка шестеренки), перейдите во вкладку Experiments и поставьте галочку рядом с пунктом «Allow custom UI themes».
Теперь можно спокойно устанавливать темы из магазина.

Поиск и установка тем

Найти темы можно в магазине Google Chrome . Искать по запросу dev themes. Но это не очень удобно, почти все темы собраны на сайте devthemez.com . И там-же есть темы для dev tools.

Теперь переходим в магазин, выбираем нужную нам тему и устанавливаем её. Теперь при открытии инструментов разработчика вы увидите вашу тему.

Теперь немного о неприятном. Темы очень часто выглядят убого. Еще есть проблема с привыканием. К примеру, я привык, что если в консоли цифра синяя - это Number, а если красная - String. Но в каждой теме свои цвета, и становится сложнее в них ориентироваться.

Многие из нас тратят сотни и тысячи долларов на сервисы, которые помогают автоматизировать и упростить повседневную работу. Но в нашем распоряжении есть отличный бесплатный набор средств для SEO – инструменты разработчика (DevTools) в браузере Chrome. С его помощью можно проверить самые важные и фундаментальные для поисковой оптимизации аспекты любой страницы.

В Chrome DevTools есть несколько очень удобных приложений, которые пригодятся при проведении SEO-анализа. Ниже мы рассмотрим их подробнее.

Для начала откройте страницу, которую вы хотите проверить, в браузере, а затем – панель инструментов разработчика. Для этого перейдите в меню Chrome, расположенное в правом верхнем углу экрана, и выберите «Дополнительные инструменты » -> «Инструменты разработчика ».

Вы также можете использовать сочетания клавиш: Ctrl+Shift+I (для Windows) или Cmd+Opt+I (для Mac).

Ещё один вариант – кликнуть правой кнопкой мыши по странице, которую вы хотите проверить, и в появившемся меню выбрать пункт «Просмотреть код» .

Теперь можно приступить к аудиту.

1. Проверка основных элементов контента страницы

В настоящее время Google способен сканировать и индексировать JavaScript-контент, однако он не всегда делает это корректно. Поэтому необходимо проверять основные элементы содержимого страницы – тайтл, метаописание и текст. Это значит, что нужно не только анализировать HTML-код, но и проверять DOM. Таким образом вы сможете увидеть, как эта информация будет визуализирована и идентифицирована Google.

Просмотреть DOM любой страницы можно на вкладке «Elements» панели Инструментов разработчика.

Проверяйте эту вкладку, чтобы убедиться, что вся необходимая информация доступна для Google.

К примеру, в левом верхнему углу на скриншоте ниже мы видим, что отображаемый основной текст (в красной рамке) заключен в тег