1. Перейти на Web-сайт

2. Открыть меню мобильного браузера

3. Выбрать опцию «Версия для ПК» ("Desktop site")

1. Открыть DevTools инструменты разработчика (F12 по умолчанию)

2. Включить панель инструментов устройства ("Toggle Device Toolbar")

3. В выпадающем списке "Dimensions" выбрать эмулируемое мобильное устройство

Чтобы узнать, поддерживает ли Web-сайт PWA версию, необходимо:

1. Открыть меню мобильного браузера

2. Проверить наличие опции "Установка приложения" ("Install app")

3. Установить PWA приложение

4. Запустить PWA приложение

5. PWA версия Google Maps выглядит так:

• Также можно установить PWA версию и на ПК:

или

Вот так выглядит desktop версия PWA:

В браузере есть различные события, на которых завязана работа части функционала. Одно из таких событий — "onClick": браузер «слушает», когда произойдёт клик мышкой. На это событие было завязано воспроизведение звуков, и, когда клик происходил, браузер запоминал, что нужно проиграть звук в определённый момент. Однако в браузере Safari этот механизм работал иначе чем в Google Chrome — если обновить страницу, то браузер «забывал» о том, что событие "onClick" уже было и звук в нужный момент не проигрывался.

Здесь представлены ссылки на списки разных версий наиболее популярных браузеров, в которых можно просмотреть все изменения от версии к версии:

Chrome: https://chromium.googlesource.com/chromium/src

Firefox: https://www.mozilla.org/en-US/firefox/releases

Opera: https://blogs.opera.com/desktop/changelog-for-86

Safari: https://developer.apple.com/documentation/safari-release-notes

• допустимое разрешение экрана и соотношение сторон

• возможность адаптации страницы

• границы, на которых происходит переключение на адаптивный дизайн (точки перехода)

• наличие мобильной версии страницы

• особенности разных браузеров

• поддерживаемый масштаб страницы

1. Открыть DevTools инструменты разработчика (F12 по умолчанию).

2. Включить панель инструментов устройства ("Toggle Device Toolbar").

3. В выпадающем списке "Dimensions" выбрать пресет с необходимым для теста разрешением.

4. Разрешение можно выставлять и в ручную, какое угодно (для этого необходимо "Dimensions" переключить в режим "Responsive").

5. Чтобы проверить Web на адаптив, в режиме "Responsive" можно сдвигать стороны эмулируемого экрана. Но обычно этого не требуется, когда точно известны поддерживаемые разрешения для Web'а.

6. Ориентация из "книжной" в "альбомную" переключается с помощью кнопки "Rotate".

7. Из дополнительных инструментов в этом окне возможно ещё пригодиться:

• Show rulers (Показывает линейку для разрешения окна)

• Show media queries (Показывает CSS медиа-запросы, которые передают параметры стилей для отображения элементов на странице с установленным разрешением окна)

• Capture screenshot (Capture full size screenshot) (Сделать скриншот Web-страницы в установленном разрешении окна)

1. Открыть DevTools инструменты разработчика (F12 по умолчанию).

2. Включить режим инспектирования ("Select an element in the page to inspect it").

3. Навести курсор на требуемый элемент на странице (элемент и его границы должны подсвечиваться, а также должен открыться тултип с атрибутами элемента).

4. Кликнуть по выделенному элементу, для открытия его атрибутов в DevTools.

5. На соседней вкладке будет находиться информация о CSS-стилях элемента.

6. Если открыть вкладку с элементами без инспектирования, то страница будет представлена в виде HTML-разметки, и может иметь вложенную структуру.
   При инспектировании элемента структура будет разворачиваться:

7. Во вкладке "Elements" можно наблюдать, как меняются атрибуты элемента при взаимодействии с ним.

8. При необходимости во вкладке "Elements" можно редактировать атрибуты любого элемента для специфических проверок.

• Страница (Page) — общий элемент-объект, на котором базируются все остальные.

• Контент (Content) — наполнение страницы текстом, изображениями, прочими мультимедиа ресурсами.

• Шапка (Header) — самая верхняя часть страницы.

• Подвал (Footer) — самая нижняя часть страницы.

• Поле ввода/Пользовательский ввод (Input Field/User Input) — текстовое или числовое поле, в которое можно ввести данные непосредственно с клавиатуры.

• Кнопка (Button) — классическая кнопка для функционального взаимодействия посредством UI.

• Радио-кнопка (Radio button) — кнопка-переключатель, которая позволяет выбрать только один пункт из списка.

• Флажки (Flag) — UI элементы которые имеют два состояния: включён/выключен:

– Чек-бокс (Checkbox) — поле с отметкой.
– Ползунок (Slider) — скользящая кнопка, может использоваться для подчёркивания выбора.
– Переключатель (Toggle) — «рубильник».

• Выпадающий список (Dropdown) — поле с выпадающим списком для выбора.

• Пикер (Picker/Datepicker/Timepicker) — интерактивный выбор даты/времени в календарях и прочих подобных конструкциях.

• Подсказка (Tooltip) — появляется при наведении курсора (hover) на UI элемент.

• Пагинация (Pagination) — нумерация страниц/элементов, объединённых одним свойством (например, страницы отчёта).

• Иконка (Icon) — пиктограмма, небольшое изображение необходимое для визуальной навигации. Пример иконок меню для сортировки контента/элементов на странице или для открытия контекстных меню:

• Модальное окно (Modal) — окно, которое открывается «поверх» всей станицы и блокирует взаимодействие с ней.

• Поп-ап (Popup) — всплывающее окно, схоже с тултипом, но с возможностью взаимодействия с ним (по аналогии с модальным окном).

• Форма (Form) — по свойствам схожа с модальным окном, но имеет иное предназначение (например: анкета, обратная связь, оплата).

• «Хлебные крошки» (Breadcrumb) — элемент навигации в виде последовательности, который показывает, на каком разделе сайта находится пользователь.

• Боковая панель (Sidebar).

• Лента (Feed) — упорядоченный набор контента, основанный на модульности.

• Карусель (Carousel) — «прокрутка» для просмотра набора контента.

• Карточка (Card) — небольшой прямоугольный модуль, может содержать текст, кнопки, мультимедиа.

• Лоадер (Loader) — как правило выглядит в виде wait-индикатора, визуально отражающий загрузку контента или иных данных на странице.

• Строка загрузки (Progress bar) — визуализация процесса, прохождения прогресса, загрузки.

Разумеется, здесь не отражены все существующие элементы UI.
Более того, появление новых элементов так или иначе происходит в стремительно развивающемся Web-дизайне, новые решения по UX порождают новый UI.
Но основной поинт мысли в том, что у всего есть своё название.

<input type="">

• "text" — однострочное текстовое поле

• "number" — однострочное числовое поле

• "password" — однострочное текстовое поле поле, скрывает вводимые значения

• "tel" — однострочное поле для ввода телефонного номера по заданной маске (например "+7(_ _ ) _ - - _")

• "search" — однострочное текстовое поле для поиска

• "checkbox" — флажок для выбора/отмены выбора отдельных вариантов

• "radio" — переключатель для выбора только одного значения из нескольких вариантов

• "range" — диапазон в виде слайдера для визуального управления вводом не отображая точных значений

• "button" — обычная кнопка

• "submit" — кнопка для отправки формы

• "reset" — кнопка для сброса содержимого формы к значениям по-умолчанию

• "date" — пикер для выбора даты (год, месяц, день, без времени)

• "datetime-local" ("datetime") — пикер для выбора даты и времени (без часового пояса)

• "time" — пикер для ввода времени (без часового пояса)

• "week" — пикер для выбора даты в формате: номер недели, год

• "month" — пикер для выбора в формате: месяц, год

• "color" — пикер для выбора цвета или открытия палитры цветов

• "file" — кнопка для выбора файла

• "image" — графическая кнопка "submit"

• "email" — поле для ввода почты, отличается от "text" наличием атрибутов проверки вводимых данных

• "url" — поле для ввода адреса, отличается от "text" наличием атрибутов проверки вводимых данных

Пример HTML кода с input-элементом типа "search":

• "minlength" — определяет минимальный набор символов для текстовых полей

• "maxlength" — определяет максимальный набор символов для текстовых полей

• "min" — определяет минимальное значение для числовых полей

• "max" — определяет максимальное значение для числовых полей

• "step" — задаёт шаг прибавляемых значений для числовых полей

• "size" — определяет размер элемента

• "value" — устанавливает начальное значение для элемента

• "pattern" — шаблон, по которому проводится проверка на валидность заполненного поля (использует регулярные выражения - "RegExp")

• "placeholder" — текст/подсказка внутри поля

• "autocomplete" — возможность для автозаполнения поля (если в браузере сохранены данные пользователя, например email)

• "checked" — состояние вкл/выкл для чек-боксов и радио-кнопок

• "required" — устанавливает обязательность заполнения поля

• "src" — источник, где хранится изображение

• "height" — задаёт высоту для изображения

• "width" — задаёт ширину для изображения

Во время тестирования GA-сервиса на продакшене было замечено, что не собирается статистика по определённым событиям (должен был быть детект на включение тоггла и далее передача этой статистики в аналитику).
Как выяснилось, всему виной включённый AdBlock, который заблокировал работу GA-сервиса, и тем самым «саботировал» отправку данных. Добавить страницу в список разрешённых оказалось мало, и пришлось полностью отключить это расширение.

1. В адресной строке сайта есть соответствующая иконка в виде замка (или треугольника с предупреждением или знака информации).

2. По нажатию на эту иконку откроется поп-ап со сведениями о странице.

3. Выбрать пункт «Настройки сайтов».

4. Произойдёт переход в раздел chrome://settings/content к настройкам конкретного сайта, где можно будет увидеть все существующие разрешения и задать правила для их выдачи.

Если в правилах для разрешения выставлено «Спрашивать», то в момент такого обращения браузер вызовет поп-ап с запросом, что делать с этим разрешением. Например при сработке push-уведомлений:

1. Открыть DevTools инструменты разработчика (F12 по умолчанию).

2. Перейти во вкладку "Application".

В разделе Cache Storage кэшируются отдельные файлы, для которых используются методы Cache API:

• В остальном же кэш записывается локально на устройство, и его расположение зависит от операционной системы (например, в Windows: %LOCALAPPDATA%LocalGoogleChromeUser DataDefault).

• Кэш хранится в специальном для браузера формате, поэтому просто так открыть эти файлы не получится (есть специальные программы для просмотра содержимого, но обычно это не требуется).

• Расположение кэша Google Chrome в разных операционных системах: User Data Directory.

• Каких-то специфичных действий над кэшем производить не приходится, наиболее ходовое действие — это очистка кэша, чтобы подгрузить более свежие ресурсы с Web-сервера.

• В разделе Cookie можно видеть, какие куки передаются от клиента с запросом.

• Куки можно модифицировать (подменять) и переотправлять с запросом. Например, в DevTools, это можно сделать через двойной клик, на интересующем поле ("Value", "HttpOnly" и т.д.) или через контекстное меню:

• Также можем очистить cookie для отдельно взятого ресурса (при необходимости):

• В разделе Session Storage хранятся временные параметры пока активна сессия (открыто окно/вкладка):

• Здесь уже можно модифицировать значения ключей, добавлять новые ключи, удалять старые, если это необходимо.

• Ну и разумеется можно их полностью очистить (по аналогии с cookie).

• В разделе Local Storage хранятся постоянные параметры, пока их не удалит сам пользователь:

• И аналогично Session Storage здесь можно модифицировать значения ключей, добавлять новые ключи, удалять старые, если это необходимо.

• И само собой очистить полностью Local Storage:

Полная очистка кэша и куки:

1. В меню браузера Chrome навести на «Дополнительные инструменты».

2. Выбрать «Очистить данные просмотров».

3. Установить период, за который будет производиться очистка (например, за всё время).

4. Установить нужные чек-боксы («Файлы cookie и другие данные сайтов», «Изображение и другие файлы, сохранённые в кеше») и нажать «Удалить данные».

Режим инкогнито в браузере:

При открытии окна в режиме инкогнито браузер как бы начинает работу «с чистого листа», не используя старый кэш и куки.
Он записывает эти данные до тех пор, пока открыто окно в этом режиме. После закрытия окна, все эти «временные» кэш, куки и прочие исторические данные удаляются.
Это может помочь в тестировании, если надо проверить свежие изменения во Frontend части через новую сессию, не очищая кэш и/или куки.

Стоит начать с того, что существует 5 категорий кодов:

• Информационные (код начинается с 1)

• Успешные (код начинается с 2)

• Перенаправления (код начинается с 3)

• Клиентские ошибки (код начинается с 4)

• Серверные ошибки (код начинается с 5)

И самые популярные из этих кодов:

• 101 ("Switching Protocols") — переключение протоколов обмена с сервером, например с HTTP на WS

• 200 ("OK") — успешная обработка запроса

• 304 ("Not Modified") — сообщает, что запрашиваемый ресурс не был изменён и будет загружен из кэша

• 400 ("Bad Request") — некорректные параметры запроса

• 401 ("Unautorized") — для выполнения запроса необходима авторизоваться

• 403 ("Forbidden") — доступ к запрашиваемому ресурсу запрещён

• 404 ("Not Found") — запрашиваемый ресурс не найден

• 500 ("Internal Server Error") — любая внутренняя ошибка, вызванная работой сервера

• 502 ("Bad Gateway") — сетевая ошибка на стороне сервера, говорит о его недоступности

• 503 ("Service Unavailable") — сервис для обработки запроса перегружен и не может выполнить этот запрос

• 504 ("Gateway Timeout") — превышение времени ожидания ответа от сервера

1. Открыть DevTools инструменты разработчика (F12 по умолчанию).

2. Обновить страницу, которую необходимо исследовать (для того, чтобы DevTools перехватил все ресурсы этой страницы, а вернее HTTP-трафик).

3. Перейти во вкладку "Network".

4. В списке ресурсов найти и выбрать необходимый (уже здесь по полю "Status" можно увидеть, с каким кодом выполнился запрос).

5. В открывшейся информации о запросе, во вкладке "Headers", в блоке "General", в поле "Status Code" видно, с каким кодом выполнился выбранный запрос.

6. В этой же вкладке отображаются все заголовки отправляемого запроса и полученного ответа ("Request Headers" и "Response Headers").

7. Во вкладке "Response" будет содержаться ответ от сервера на отправленный запрос (обычно ответ от сервера выглядит в формате JSON).

Маркировка запросов с ошибкой

В DevTools подсвечиваются красным цветом те ресурсы, которые не загрузились или запрос вернулся с ошибкой.

Что ещё может пригодиться при использовании вкладки "Network" в DevTools:

• Включение постоянного логирования запросов ("Preserve Log"), чтобы их список в таблице не очищался при обновлении страницы.

• Отключение кэширования для загружаемых ресурсов ("Disable cache"), чтобы запрашиваемые ресурсы каждый раз загружались с сервера, а не из локального кэша.

• Эмуляция состояния соединения ("Throttling") для проверки работы запросов при медленном соединении. Есть предустановленные пресеты, но можно добавить и свои.

• Фильтр для типов ресурсов (Наиболее используемые: "Fetch/XHR" — отображает Rest API запросы, "Doc" — HTML-страницы, "WS" — отображает web-socket соединения).

• Вкладка "Timing", чтобы оценить сколько ушло времени на загрузку того или иного ресурса.

• Вкладка "Cookie", в которой видно, какие куки передаются с запросом "Request Cookies" (или возвращаются с ответом "Response Cookies").

• Контекстное действие для быстрой очистки кэша и куки в браузере.

• Блокировка запросов по конкретному URL или всего домена полностью:

• Возможность скопировать запрос в удобном формате — допустим, чтобы передать его разработчику или использовать для переотправки в Postman (например, "Copy as cURL"):

1. Открыть DevTools инструменты разработчика (F12 по умолчанию).

2. Перейти во вкладку "Console".

3. В открывшемся окне будут видны различные сообщения, исходящие от страницы, в том числе и ошибки (подсвечены красным цветом).

Что ещё может пригодиться при использовании консоли DevTools:

• Включение постоянного логирования, чтобы консоль не очищалась после обновления страницы ("Console Settings" → "Preserve Log").

• Настройка уровней логирования, чтобы собирать в консоль например только ошибки ("Log level").

• Сайд-бар консоли, для удобства сортировки сообщений ("Show console sidebar").

• Опция "Show timestamps" отобразит в консоли время возникновения сообщения/предупреждения/ошибки ("Settings" → "Preferences" → "Console").

• ERR_NAME_NOT_RESOLVED — несуществующий веб-адрес

• ERR_INTERNET_DISCONNECTED — устройство не подключено к Интернету

• ERR_CONNECTION_TIMED_OUT (ERR_TIMED_OUT) — для подключения к веб-странице потребовалось слишком много времени. Возможные причины: либо скорость соединения слишком низкая, либо страницу пытается открыть слишком много пользователей

• ERR_CONNECTION_RESET — соединение со страницей было прервано

• ERR_NETWORK_CHANGED — при загрузке страницы устройство отключилось от сети или подключилось к новой

• ERR_CONNECTION_REFUSED — страница не позволила Chrome подключиться к ней

• ERR_CACHE_MISS — страница просит повторно отправить ранее введенные данные

• ERR_EMPTY_RESPONSE — сайт не отправил данные и, возможно, недоступен

• ERR_SSL_PROTOCOL_ERROR — страница отправила данные, непонятные для Chrome

• ERR_BAD_SSL_CLIENT_AUTH_CERT — не удается войти на сайт (например, банка или организации) из-за ошибки в сертификате клиента

Эти ошибки можно увидеть при попытке браузером открыть страницу или же в консоли, когда проблема возникает с отдельно взятым ресурсом/сервисом/запросом. Примеры таких ошибок:

Полный список ошибок можно посмотреть здесь: chrome://network-errors.

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

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

URL ("Uniform Resource Locator") — это единый локатор ресурсов, стандарт, который используется для указания пути.

И вот в уже открывшемся браузере мы вводим в адресной строке необходимый URL-адрес.

Прежде чем мы начнём переход по этому адресу, следует разобрать, из чего собственно состоит адрес:

1. Протокол (например: "http://", "https://")

2. Доменное имя (например: "www.google.com")

3. TCP порт (например: ":80", ":443")

4. Адрес раздела или ресурса (например: "/product/search" или "/about/unwanted-software-policy.html")

5. Дополнительные параметры (например: "?utm_source=google&hl=en-RU&fg=1")

6. Якорь (например: "#tag")

Не все из этих параметров обязательны в URL. Например, TCP-порт, т.к. подразумевается, что работа HTTP и HTTPS протоколов будет осуществляться на их стандартных портах.

В качестве дополнения — прочие понятия, связанные с URL'ом:

• Ссылка ("Link") — синоним для таких понятий как URL-адрес и Web-адрес

• Абсолютный URL — полный URL-адрес web-сайта (например: "http://www.google.com")

• Относительный URL — указывает путь к разделу и/или документу внутри сайта (например: "/about/")

• Гиперссылка ("Hyperlink") — в отличие от обычной ссылки это UI элемент страницы, при нажатии на который осуществляется переход на другой адрес. Если адрес ведёт на этот же сайт, то это внутренняя гиперссылка. Если адрес ведёт на другой сайт, то это уже внешняя гиперссылка.

• Якорь ("Anchor Link", "Page Jump", "Jump to") — это метка с уникальным именем, ссылающаяся на определённое место Web-страницы. Указывается в конце URL'а, и перед такой меткой ставится символ #

• Глубинные ссылки ("Deeplink") — это ссылка, которая перенаправляет пользователя в конкретный раздел сайта (например, к настройкам, скрытым где-то в глубине сайта)

• Переадресация ("Redirect") — это перенаправление пользователя с одного URL-адреса на другой URL-адрес

При «вызове» URL-адреса начинается «общение» между браузером и Web-сервером посредством HTTP-запросов и HTTP-ответов.

HTTP ("Hyper Text Transfer Protocol") — протокол прикладного уровня для передачи данных, использующий надёжное TCP соединение.

И его защищённая версия HTTPS ("Hyper Text Transfer Protocol Secure"), которая использует SSL/TLS-сертификат для безопасного подключения к сайту.

Этот протокол также используется и в Frontend-Backend взаимодействии (через REST).

HTTP — это основополагающая сетевого общения на прикладном уровне.

HTTP-запрос ("Request") состоит из:

• Строки запроса:

  • HTTP метод — "HTTP Method"/"Request Method" (например: "GET", "PUT", "POST", "HEAD", "OPTION")

  • Путь запроса — "Request Target"/"Request URL" (Например: "https://www.google.com/")

  • Версия HTTP протокола — "HTTP Version" (Например: "HTTP/1.1")

• Заголовков запроса:

  • Основной заголовок — "General Headers" (например: "Connection")

  • Заголовок запроса — "Request Headers" (например: "User-Agent")

  • Заголовок ресурса — "Representation Headers" (например: "Content-Type")

• Тело запроса (необязательный параметр, требуется только для отправки на сервер, например, с помощью метода "POST"):

  • ИЛИ Одноресурсное тело — "Single-resource body" (состоит из одного файла и определяется заголовками "Content-Type" и "Content-Lenght" из "Representation Headers")

  • ИЛИ Многоресурсное тело — "Multiple-resource body" (состоит из раздельных частей/сегментов, хранящих свой бит информации. Обычно используется в HTML-формах)

Пример строки запроса и заголовков HTTP-запроса:

HTTP-ответ ("Response") состоит из:

• Строки состояния:

  • Версия HTTP протокола "HTTP Version" (например: "HTTP/1.1")

  • Код состояния — "Status Code" (например: "404")

  • Пояснение — "Status Text" (например: "Not Found")

• Заголовков ответа:

  • Основной заголовок — "General Headers" (например: "Connection")

  • Заголовок ответа — "Response Headers" (например: "Accept-Ranges")

  • Заголовки ресурса — "Entity Headers" (например: "Content-Lenght")

• Тело ответа:

  • ИЛИ Одноресурсное тело известной длины — "Single-resource body" (состоит из одного файла и определяется заголовками "Content-Type" и "Content-Lenght" из "Entity Headers")

  • ИЛИ Одноресурсное тело неизвестной длины — "Single-resource body" (состоит из одного файла, разбитого на небольшие части ("chunks") и определяется заголовком "Transfer-Encoding" из "General Headers")

  • ИЛИ Многоресурсное тело — "Multiple-resource body" (состоит из раздельных частей/сегментов, хранящих свой бит информации. Используется редко)

Пример строки состояния и заголовков HTTP-ответа:

После того, как мы «сообщили» браузеру о необходимости перейти по указанному URL-адресу, происходит примерно следующее:

• С помощью браузера пользователь отправляет запрос на проверку доменного имени из URL'а.

• После проверки URL выясняется, за каким IP-адресом «закреплено» это доменное имя.

• Устанавливается соединение с сервером, где хранятся ресурсы Web-приложения, по TCP (Transmission Control Protocol).

• Отправляется HTTP-запрос на получение ресурсов Web-приложения. Ожидается ответ.

• Сервер обрабатывает запрос и отправляет ответ пользователю.

• И только теперь пользователю возвращаются запрошенные по указанному URL'у данные.

DNS-Server, Hosting Server, Web-Server

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

• Чтобы использовать новое доменное имя, его необходимо зарегистрировать (через регистратор доменных имён).

• За каждым доменным именем должен быть закреплен внешний IP-адрес (для доступа по сети интернет).

• Необходимо произвести настройку на хостинге, чтобы по зарегистрированному доменному имени были доступны Web-ресурсы хранящиеся на сервере.

DNS-сервер ("Domain Name System Server", "DNS Server") — это сервер, который хранит IP-адреса для доменных имён и предоставляет эти данные по запросу. Отвечает за проверку/сопоставление доменного имени к IP-адресу и наоборот.

Хостинг сервер ("Hosting Server") — это сервер, который предоставляется как услуга, на котором будут размещаться различные Web-ресурсы, доступные по сети интернет. Обычно представляет из себя набор hardware оснащённого серверного оборудования, установленный в стойках или шкафах, на которое установлена серверная операционная система или система виртуализации. Всё это работает под управлением общей биллинговой системы и прочими системами мониторинга.

Хостинги бывают:

• Виртуальный ("Shared") — один большой сервер, на котором работает множество виртуальных от разных владельцев.

• Виртуальный выделенный "VPS/VDS" ("Virtual Private Server", "Virtual Dedicated Server") — в пользование отводится часть удаленного сервера.

• Выделенный ("Dedicated") — отдельный удаленный сервер, который находится под полным управлением владельца размещаемых Web-ресурсов.

• Облачный ("Cloud") — фактически схож с VPS/VDS, однако использует одновременно ресурсы нескольких серверов.

На этой картинке видно, по какой схеме работает обращение от пользователя к хостинг серверу, на котором размещаются ресурсы нашего абстрактного Web-приложения:

Web-сервер ("Web-Server") — это программный сервер, который управляет Web-ресурсами, отвечает на HTTP-запросы, может выступать в качестве прокси, иметь расширенные настройки окружения и администрирования этих Web-ресурсов.

Зачастую, под понятие Web-сервер подпадает более широкий спектр понятий, включая в этот список и само «железо», на котором работает HTTP-сервер.

Наиболее популярные Web-сервера (HTTP-сервера):

• Apache

• Nginx

• Microsoft IIS (Internet Information Services)

• Google Web Server

• Glassfish

В качестве наглядного примера — картинка с web-интерфейсом администрирования Glassfish Web-сервера. Эта картинка, разумеется, не даёт всех ответов о возможностях настроек Web-серверов, но она отлично показывает их охват:

CDN — Content Delivery Network

Но что делать, если сервер с Web-ресурсами у нас находится в одном гео, а пользователи подключаются с другого? Например, сервер расположен в Европе, а пользователи подключаются из Латинской Америки или Океании. Для таких пользователей обращение за Web-ресурсами будет утомительно долгим и нестабильным.

Для решения этого вопроса используется схема с CDN.

CDN ("Content Delivery Network") — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку доставку Web-ресурсов.

CDN состоит из:

• Origin — сервера, на котором хранятся исходные Web-ресурсы, раздаваемые через CDN.

• PoP ("Point of Presence"), Edge — кэширующего сервера в составе CDN, расположенного в определённой географической локации.

Пользователи из разных гео подключаются к ближайшему к ним Edge серверу и загружают Web-ресурсы с этого сервера.

Картинка, ярко демонстрирующая разницу при использовании разных схем подключения к Origin серверу — без CDN и с CDN соответственно:

И ещё одно изображение работы CDN для закрепления:

TCP/IP

Всё же стоит вкратце упомянуть и про стек протоколов TCP/IP, модель которого постоянно используется при обмене клиента и сервера.

Сетевая модель описывает процесс передачи цифровых данных: по каким уровням проходят данные, какие протоколы задействованы на разных уровнях.

За единицу информации в сети принято считать пакет.

Пакет ("Network packet", "Packet") — это оформленный блок данных, передаваемый по сети.

Пакеты состоят из:

• Версии пакета (IPv4, IPv6)

• Заголовка (граница, от которой начинаются данные)

• Приоритета пакета (QoS — "Quality of Service", ToS — "Type of Service")

• Длины/размера пакета (в байтах, данные + заголовок)

• Тэга (идентификатора)

• Флага (фрагментированный или не фрагментированный пакет)

• Смещения фрагмента ("Fragment Offset")

• Времени жизни (TTL — "Time to Live")

• Протокола (TCP — "Traffic Control Protocol", UDP — "User Datagram Protocol", ICMP — "Internet Control Message Protocol" или другие)

• Контрольной суммы заголовка ("Header Checksum")

• IP-адреса источника

• IP-адреса назначения

Сравнение уровней двух самых популярных концепций сетевых моделей:

Протоколы и среды передачи данных на разных уровнях модели TCP/IP:

Подводя черту под этим блоком, хочется сказать, что, когда мы говорим о взаимодействии «клиент-сервер», то подразумеваем общение Frontend и Backend части приложения (хотя в большинстве случаев под это понятие может подпадать общение Web-браузер — Web-сервер). 
Но важно понимать, что на пути к этому общению стоит вереница других серверов, начиная от серверов на сети провайдера, заканчивая серверами на хостинге. А помимо серверов существует огромный «зоопарк» из сетевого оборудования L2/L3 уровней со своими настройками, характеристиками и... Впрочем, это уже совсем другая история :)

И вот мы дошли до момента, когда (через тернии сетевых хитросплетений) Web-сервер нам вернул статус 200 ("OK") на запрос по указанному URL-адресу, что же будет происходить дальше?

А дальше происходит «получение» клиентской части для того, чтобы пользователь мог взаимодействовать с нашим абстрактным Web-приложением.

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

Структура клиентской части

Frontend ("Front-end") — клиентская сторона web-интерфейса для взаимодействия с сервисом (Web-приложением).

Страница и все элементы на ней в современном браузере загружаются как DOM-дерево и имеют вложенную структуру.

DOM ("Document Object Model") — это объектная модель представления HTML-документа в виде дерева тэгов, выступающая как некий программный интерфейс, необходимый для взаимодействия с HTML-элементами через JavaScript.

Схематичное представление DOM:

Структура DOM:

HTML ("HyperText Markup Language") — язык разметки для Web-страниц (в настоящее время используется HTML5 версия языка).

Синтаксис HTML состоит из HTML-элементов, которые определяют тэги и атрибутов этих тэгов.

Тэг ("HTML Tag") — часть синтаксического блока, которая размечает область, где будет находится содержимое HTML-элемента и задают его тип.

HTML-элементы состоят из:

• Тэг открытия — определяет, где начинается элемент (например: "<title>")

• Тэг закрытия — определяет, где заканчивается элемент (например: "</title>")

• Атрибут и его значение — дополнительные свойства тэга (например: "href="http://www.google.com"")

• Содержимое — текстовое наполнение, находящееся между тэгом открытия и тэгом закрытия

• Комментарий — необязательное свойство) (например: "<!-- Comment -->")

Несколько примеров HTML тэгов:

<html> — (основной тэг) сообщает о том, что это HTML-документ (является корневым тэгом)
<head> — (основной тэг) содержит техническую информацию
<title> — заголовок страницы
<style> — задаёт CSS стили для страницы
<script> — хранит JavaScript код и/или параметры для него (например, путь до отдельного JS-файла)
<body> — (основной тэг) определяет видимую часть страницы

<!doctype html><html dir="ltr" lang="ru">  <head>    <meta charset="utf-8">    <title>Новая вкладка</title>    <style>      body {        background: #35363A;        margin: 0;      }      #backgroundImage {        border: none;        height: 100%;        pointer-events: none;        position: fixed;        top: 0;        visibility: hidden;        width: 100%;      }      [show-background-image] #backgroundImage {        visibility: visible;      }    </style>  </head>  <body>    <iframe id="backgroundImage" src=""></iframe>    <ntp-app></ntp-app>    <script type="module" src="new_tab_page.js"></script>    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">    <link rel="stylesheet" href="shared_vars.css">  </body></html>

CSS ("Cascading Style Sheets") — язык описания внешнего вида HTML-документа.

Как было сказано ранее, в тэге <style> заключены CSS стили страницы, где может находиться каскадное описание внешнего вида или ссылки на конкретный CSS-файл.

Синтаксис CSS состоит из CSS правила, которое выглядит как отдельный блок кода и включает в себя:

• Селектор — указание элемента на странице (например: "header")

• Свойство — для выбранного в селекторе элемента (например: "font-style")

• Значение — параметры этого свойства (например: "bold")

.picker-frame {    width: 100%;    height: 100%;    border: 0;    overflow: hidden}.picker.modal-dialog-bg {    position: absolute;    top: 0;    left: 0;    background-color: #fff}.picker.modal-dialog {    position: absolute;    top: 0;    left: 0;    background-color: #fff;    border: 1px solid #acacac;    width: auto;    padding: 0;    z-index: 1001;    overflow: auto;    -moz-box-shadow: rgba(0,0,0,.2) 0 4px 16px;    -webkit-box-shadow: rgba(0,0,0,.2) 0 4px 16px;    box-shadow: rgba(0,0,0,.2) 0 4px 16px;    -webkit-transition: top .5s ease-in-out;    -moz-transition: top .5s ease-in-out;    -o-transition: top .5s ease-in-out;    transition: top .5s ease-in-out}.picker-min {    position: absolute;    z-index: 1002}.picker.modal-dialog-content {    font-size: 0;    padding: 0}.picker.modal-dialog-title {    height: 0;    margin: 0}.picker.modal-dialog-title-text,.picker.modal-dialog-buttons {    display: none}.picker.modal-dialog-bg,.picker.modal-dialog.picker-dialog {    z-index: 1999999999}

JS ("JavaScript") — это высокоуровневый мультипарадигменный язык программирования.

Возможности JavaScript достаточно обширны, и изначально он использовался для «оживления» HTML-страницы, но сейчас JavaScript позволяет создавать полноценно работающую логику, организовывать клиент-серверное взаимодействие, управлять различными элементами на странице, не считая таких вещей, как хранение данных и исполнения скриптов по событиям на странице (и это далеко не полный перечень).

JS скрипты встраиваются в HTML и выполняются при загрузке страницы.

Пара-тройка примеров HTML событий, которые может использовать JS:

• onchange — событие об изменении HTML элемента

• onclick — событие о клике мыши на HTML элемент

• onkeydown — событие о нажатии клавиши на клавиатуре

• onload — событие об окончании загрузки HTML-страницы

// Copyright (c) 2013 The Chromium Authors. All rights reserved.// Use of this source code is governed by a BSD-style license that can be// found in the LICENSE file./** * @fileoverview Assertion support. *//** * Verify |condition| is truthy and return |condition| if so. * @template T * @param {T} condition A condition to check for truthiness.  Note that this *     may be used to test whether a value is defined or not, and we don't want *     to force a cast to Boolean. * @param {string=} opt_message A message to show on failure. * @return {T} A non-null |condition|. * @closurePrimitive {asserts.truthy} * @suppress {reportUnknownTypes} because T is not sufficiently constrained. */export function assert(condition, opt_message) {  if (!condition) {    let message = 'Assertion failed';    if (opt_message) {      message = message + ': ' + opt_message;    }    const error = new Error(message);    const global = function() {      const thisOrSelf = this || self;      /** @type {boolean} */      thisOrSelf.traceAssertionsForTesting;      return thisOrSelf;    }();    if (global.traceAssertionsForTesting) {      console.warn(error.stack);    }    throw error;  }  return condition;}/** * Call this from places in the code that should never be reached. * * For example, handling all the values of enum with a switch() like this: * *   function getValueFromEnum(enum) { *     switch (enum) { *       case ENUM_FIRST_OF_TWO: *         return first *       case ENUM_LAST_OF_TWO: *         return last; *     } *     assertNotReached(); *     return document; *   } * * This code should only be hit in the case of serious programmer error or * unexpected input. * * @param {string=} opt_message A message to show when this is hit. * @closurePrimitive {asserts.fail} */export function assertNotReached(opt_message) {  assert(false, opt_message || 'Unreachable code hit');}/** * @param {*} value The value to check. * @param {function(new: T, ...)} type A user-defined constructor. * @param {string=} opt_message A message to show when this is hit. * @return {T} * @template T */export function assertInstanceof(value, type, opt_message) {  // We don't use assert immediately here so that we avoid constructing an error  // message if we don't have to.  if (!(value instanceof type)) {    assertNotReached(        opt_message ||        'Value ' + value + ' is not a[n] ' + (type.name || typeof type));  }  return value;}

Не хотелось бы упускать из виду такой термин как «контент».

Всё вышеперечисленное в этом блоке так или иначе относится к контенту страницы.

Контент — это информационное наполнение страницы.

В Web'е существуют такие понятия как «статический» и «динамический» — по отношению к контенту или к сайту целиком.

Статический сайт — состоит из неизменяемых страниц, контент которых хранится на Web-сервере в неизменяемом виде (HTML, CSS, JS, Мультимедиа, прочие бинарные файлы).

Динамический сайт — состоит из изменяющихся, адаптирующихся под конкретного пользователя страниц (или отдельных элементов), и контент которых генерируется на Web-сервере в момент получения запроса (обрабатывается на Backend, формируется из баз данных).

Прочие технологии, которые могут быть использованы во Frontend части

WebGL ("Web-based Graphics Library") — кросплатформенный API для 3D-графики в браузере. Размещается в HTML-элементе под тэгом <canvas>.

WebRTC ("Web Real Time Communications") — стандарт, который описывает передачу потоковых аудио/видео данных.

Клиент-серверное взаимодействие, в Web-приложении было бы невозможным без общения Frontend части с Backend частью.

Для этого существует ряд технологий, позволяющих это общение организовать. От уже упомянутого HTTP до соединения через WS.

WS ("Web-Socket") — протокол связи предназначенный для обмена клиента и сервера в режиме реального времени.

В HTTP, чтобы получить ответ от сервера, необходимо сперва послать запрос, а для WS сперва устанавливается сокетное соединение с сервером, где будет осуществляться «прослушка» данных в real-time, пока соединение «живёт»:

REST API (RESTful) ("REpresentational State Transfer" "Application Programm Interface") — архитектурная модель построения клиент-серверного взаимодействия по средствам HTTP-протокола.

HTTP методы REST API (CRUD — Create, Read, Update, Delete):

• GET — чтение данных

• POST — создание новых данных

• PUT — редактирование данных

• DELETE — удаление данных

Запросы и ответы по модели REST обычно приходят в формате JSON ("JavaScript Object Notation").

{  "squadName": "Super hero squad",  "homeTown": "Metro City",  "formed": 2016,  "secretBase": "Super tower",  "active": true,  "members": [    {      "name": "Molecule Man",      "age": 29,      "secretIdentity": "Dan Jukes",      "powers": [        "Radiation resistance",        "Turning tiny",        "Radiation blast"      ]    },    {      "name": "Madame Uppercut",      "age": 39,      "secretIdentity": "Jane Wilson",      "powers": [        "Million tonne punch",        "Damage resistance",        "Superhuman reflexes"      ]    },    {      "name": "Eternal Flame",      "age": 1000000,      "secretIdentity": "Unknown",      "powers": [        "Immortality",        "Heat Immunity",        "Inferno",        "Teleportation",        "Interdimensional travel"      ]    }  ]}

Для понимания модели — в REST API существуют такие понятия, как:

• Route ("Маршрут") — это часть URL-адреса, где указан полный путь до раздела или ресурса. Маршрут может иметь несколько конечных точек.

• Endpoint ("Конечная точка") — это обращение к маршруту через вызов HTTP метода.

На картинке приведён способ взаимодействия через RESTful модель:

SOAP ("Simple Object Access Protocol") — упрощённый протокол обмена структурированными сообщениями.

SOAP считается громоздким и устаревшим протоколом, и в настоящее время всё реже где-то используется.

Запросы и ответы в SOAP приходят в формате XML ("eXtensible Markup Language").

POST /InStock HTTP/1.1Host: www.example.orgContent-Type: application/soap+xml; charset=utf-8Content-Length: nnn<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Body xmlns:m="http://www.example.org/stock">  <m:GetStockPrice>    <m:StockName>IBM</m:StockName>  </m:GetStockPrice></soap:Body></soap:Envelope>

HTTP/1.1 200 OKContent-Type: application/soap+xml; charset=utf-8Content-Length: nnn<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Body xmlns:m="http://www.example.org/stock">  <m:GetStockPriceResponse>    <m:Price>34.5</m:Price>  </m:GetStockPriceResponse></soap:Body></soap:Envelope>

Работа SOAP протокола (извиняюсь за качество, протокол старенький, и красивые картиночки найти сложно):

Сравнительная схема работы SOAP и REST:

gRPC ("Remote Proccedure Calls") — протокол для удалённого вызова процедур, передаёт данные в бинарном виде. Использует HTTP/2 (вторая версия протокола HTTP) в качестве транспорта.

Две схемы реализации gRPC через gRPC-Web и через REST:

GraphQL (Query Language) — типизированный язык запросов для API и среда для выполнения таких запросов.

Принципиальная схема устройства сервисов с использованием GraphQL:

Ну и куда же без картинки с примером сравнения технологий:

Целью данной статьи не является раскрытие полностью работы всего бэкенда (т.к. тут в основном упор на клиентскую часть). 
Однако было бы кощунством не упомянуть о тех процессах, что происходят там, хотя бы в общих чертах.

Backend ("Back-end") — внутренняя часть сервиса (Web-приложения), отвечающая за бизнес-логику и обработку данных, выполняющаяся на стороне сервера.

Сбой в работе бэкенда может повлечь и остановку работы клиентской части Web-приложения.

Упрощённая, но при этом понятная, схема которая показывает место и роль Backend части Web-приложения:

Выделяют два основных типа Backend архитектуры:

• Монолитная архитектура — все сервисы бэкенда «зашиты» в один большой модуль. Такая архитектура развёртывается полностью.

• Микросервисная архитектура — сервисы слабо связанны и взаимодействуют друг с другом находясь на разных модулях. В такой архитектуре каждый сервис может быть развёрнут в отдельности.

Service — некое программное решение (компонент или модуль) предоставляющее услугу или набор услуг.

Архитектурное сравнение:

За общение между клиентом и сервером отвечает API.

API ("Application Programming Interface") — программный интерфейс прикладного уровня, представляющий из себя набор методов для взаимодействия с сервисом.

API — достаточно широкий термин и применяется повсеместно, так как API есть практически у любого сервиса, библиотеки или программы, не говоря уже об операционных системах (Windows API). Но здесь нас интересует такой вид как Web API, хотя обычно приставку "Web" перед API не употребляют, если из контекста понятно, о каком API идёт речь.

Красной нитью через всё клиент-серверное общение пролегают данные и CRUD-операции над ними. И если Frontend посылает эти данные, Backend обрабатывает эти данные, то где же они хранятся?

Database ("DB", "База данных", "БД") — это упорядоченный набор структурированной информации или данных, которые хранятся в электронном виде. База данных являются неотъемлемой частью Backend, и для взаимодействия с БД используется отдельный сервер баз данных (СУБД).

Существуют два типа баз данных:

• SQL ("Structured Query Language") — реляционная база данных с предопределёнными схемами (основанными на таблицах), со строго структурированным данными и использующая SQL-язык запросов. БД с вертикальным масштабированием.

• NoSQL ("Not only SQL") — нереляционная база данных с динамическими схемами для неструктурированных данных, представляющих из себя набор документов, ключей, графов, столбцов. БД с горизонтальным масштабированием.

Наиболее распространённые SQL СУБД: MySQL, MS SQL, PosgreSQL

Наиболее распространённые NoSQL СУБД: MongoDB, Cassandra, Redis

Сравнение хранения данных и ссылок на них в SQL и NoSQL базах данных:

Это заключительный этап, когда клиент через браузер уже вовсю общается с сервером, посылает запросы, получает ответы, загружает контент. И неужели после закрытия страницы ему потребуется снова гонять трафик туда-сюда, загружать контент или вновь авторизовываться? Nope!

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

Об этих локальных хранилищах уже упоминалось ранее: это Cache, Cookie, Session Storage, Local Storage.

Cache ("Кэш") — это хранилище временных копий файлов, выступающее в качестве буфера с быстрым доступом к этим закэшированным файлам.

Процесс кэширования ресурсов при загрузке страницы:

Cookie ("Куки") — это небольшие фрагменты данных, хранящие информацию о действиях на сайте и о состоянии клиента, передающиеся на сервер.

Типы Cookie по принадлежности:

• First-party cookies — основной файл cookie, принадлежащий сайту, на который осуществляется переход.

• Third-party cookies — файлы cookie сторонних сайтов, размещающих свой контент на странице.

Типы Cookie по времени жизни:

• Session cookies — удаляются при завершении работы клиента (закрытие браузера). Однако веб-браузеры могут восстановить сеанс после закрытия и восстановить session cookie.

• Permanent cookies — удаляются только по истечению срока (Max-Age) или в указанную дату (Expires).

Параметры Cookie:

• name — задаёт имя cookie-файла

• value — хранимое значение cookie-файла (для идентификации пользователя или для служебной информации)

• expires — определяет срок жизни cookie-файла до указанной даты

• max-age — определяет срок жизни cookie-файла по установленному времени (в секундах)

• path — указывает путь к директории на сервере

• domain — определяет, какой домен будет иметь доступ к этому cookie-файлу

• secure — обязывает передавать cookie только по HTTPS

• httponly — запрещает получать доступ к cookie через API браузера (document.cookie)

• samesite — определяет возможность передачи cookie через межсайтовые запросы ("none", "lax", "strict")

Web-storage

Web-Storage ("Web-хранилище", "DOM-хранилище") — это специально отведённое место, которое используется для хранения данных локально в браузере.

Таких мест два:

• Session Storage ("Сессионное хранилище") — позволяет хранить данные для каждого домена, доступные на протяжении сессии, до завершения работы клиента (закрытие браузера).

• Local Storage ("Локальное хранилище") — позволяет хранить данные для каждого домена, доступные в течение неограниченного времени, до удаления их вручную.

В Session Storage и Local Storage хранятся пары "Key" и "Value" (ключ и значение для этого ключа).

Сравнительная таблица характеристик для Local Storage, Session Storage и Cookies:

В качестве дополнительных примеров хочется отметить такие виды хранения данных, как:

• HTTP ETag — механизм кэширования HTTP, своего рода идентификатор, который присваивается файлу сервером для последующей проверки.

• IndexedDB — встроенная база данных, близкая к NoSQL типу БД.

• WebSQL — это хранилище, построенное на спецификации SQLite (считается устаревшим видом).

• Client-side Storage ("Хранилища приложений") — хранилища, располагающиеся внутри объектов страницы, на стороне клиентской части (Например: "Local Shared Objects", "Isolated Storage", "Java persistence API").

1. Открыть DevTools инструменты разработчика (F12 по умолчанию)

2. Перейти во вкладку "Network"

3. В открывшейся вкладке выбрать один из пресетов для эмуляции сетевого соединения ("Network Throttling")

4. Когда включена эмуляция, на вкладке "Network" появляется сигнализирующий значок с жёлтым треугольником ("Network throttling is enabled")

Если встроенных пресетов недостаточно, то можно добавить новый, на свой вкус:

1. Открыть меню "Settings" в DevTools

2. Перейти во вкладку "Throttling"

3. Нажать "Add custom profile..."

4. Задаём необходимую скорость скачивания и загрузки, а так же время отклика

5. Сохраняем пресет через "Add"

1. Открыть DevTools инструменты разработчика (F12 по умолчанию)

2. Перейти во вкладку "Performance"

3. Открыть расширенные настройки ("Capture Settings")

4. Выбрать необходимый мультипликатор для замедления CPU

Также можно выбрать из уже готовых пресетов «устройств» через "Toggle Device Bar". Таких пресетов два: "Mid-tier mobile" и "Low-end mobile", но стоит учитывать, что помимо замедления CPU в этих пресетах включена эмуляция сетевого соединения.

Диспетчер задач

1. Открыть меню браузера

2. Перейти в пункт меню «Дополнительные инструменты»

3. Выбрать «Диспетчер задач»

4. Здесь всё почти как и в диспетчере задач для ОС: идентификатор процесса, потребление трафика, загрузка процессора, потребление оперативной памяти

5. Так же можно и завершить выбранный процесс (задачу)

Performance monitor

1. В нижней части консоли DevTools нажать на меню и выбрать "Performance monitor"

2. Откроется вкладка, где будут отображаться метрики производительности

FPS ("Frame per Second") — количество кадров в секунду.

1. В нижней части консоли DevTools нажать на меню и выбрать "Rendering"

2. В появившейся вкладке "Rendering" выбрать "Frame Rendering Stats"

3. В углу страницы появится счётчик FPS и нагрузка на память GPU

1. Открыть DevTools инструменты разработчика (F12 по умолчанию)

2. Перейти во вкладку "Performance"

3. Нажать кнопку "Record"

4. Взаимодействовать со страницей по заранее заготовленному сценарию или в качестве исследования (пока идёт запись)

5. Остановить запись профилировщика, когда это потребуется

6. После того как профилировщик проанализирует все полученные сведения, появится статистика по данному замеру

На что обращать внимание в таких отчётах:

• на количество кадров в секунду ("FPS")

• на возможные спайки (резкие одномоментные скачки) — "CPU", "Memory", "Heap"

• на загрузку в «потолок» ("CPU", "Memory", "Heap")

• на завышенное потребление ресурсов при рядовых операциях

• на потребления ресурсов в моменты простоя

• на скорость загрузки ресурсов в дереве вызовов ("Call Tree")

Некоторые полезные функции встроенного профилировщика:

• Запись после обновления страницы "Start profiling and reload page"

• Возможность сохранять и загружать снятые замеры производительности

• Захват скриншотов при записи ("Capture Screenshots")

• Выбор разных записей для сравнения ("Show recent timeline sessions")

Наверное, самый важный и популярный вид инструмента для тестирования Web. Спектр возможностей достаточно широк, от отображения ошибок в консоли и захвата HTTP трафика, до замера производительности и возможности логировать исполнение JS кода. В любом современном десктопном браузере присутствует такой инструмент. Практически весь гайдлайн из этой статьи был описан с применением Chrome DevTools. По своему внешнему виду и набору функций инструменты разных браузеров +/- схожи (если не идентичны).

Несколько примеров инструментов из популярных браузеров:

• Chrome DevTools — инструмент разработчика, встроенный в браузер Google Chrome.

  • Документация: Chrome DevTools

Как открыть

• Меню браузера → Дополнительные инструменты → Инструменты разработчика:

• Вызвать контекстное меню на странице → Просмотреть код:

• Горячие клавиши (зависит от операционной системы) — по умолчанию "F12"

P.S. С помощью горячих клавиш ("cmd + shift + p" на macOS) ("ctrl + shift + p" на Windows) можно вывести панель навигации по всем разделам/настройкам/опциям DevTools.
Command Menu:

Веб-инспектор — инструменты разработчика, встроенные в браузер Safari.

• Документация: About Safari Web Inspector

Как открыть:

• Сперва понадобится включить меню "Разработка", Safari → Настройка → Дополнения:

• Разработка → Показать веб-инспектор:

• Вызвать контекстное меню на странице → Показать программный код страницы (или "Проверить объект"):

Инструменты веб-разработчика — инструмент разработчика, встроенный в браузер Firefox.

• Документация: Firefox DevTools User Docs

Как открыть:

• Инструменты → Инструменты браузера → Инструменты веб-разработчика:

• Вызвать контекстное меню на странице → Исследовать

• В дополнение: существуют экспериментальные настройки браузера (например, в Google Chrome на странице chrome://flags). Это скорее экзотика и маловероятно когда нибудь пригодится в тестировании, но возможно для debug-проверок будет полезно.

• А если хотите полюбопытствовать, какой скрытый (в т.ч. и дебажный) функционал есть ещё у Google Chrome, то полный список страниц лежит здесь chrome://about.

PixelPerfect — позволяет накладывать поверх страницы скриншот из макета, чтобы проверить дизайн с точностью до пикселя.

• Сайт разработчика: WellDoneCode

• Ссылка в магазине Chrome: PerfectPixel by WellDoneCode (pixel perfect)

Dimensions — включает курсор-перекрестие, для проверки отступов между HTML элементами.

• Сайт разработчика: FelixNiklas

• Ссылка в магазине Chrome: Dimensions

Tab Resize — разбивка вкладок браузера на два одинаковых по размеру окна по принципу split-screen. Может пригодиться для сравнения двух разных версий Frontend.

• GitHub: Tab Resize

• Ссылка в магазине Chrome: Tab Resize - split screen layouts

ModHeader — позволяет изменять заголовки запросов/ответов, модифицировать cookie и настраивать редирект с одного URL на другой.

• Документация: Introduction ModHeader

• Ссылка в магазине Chrome: ModHeader

Get cookies.txt — позволяет экспортировать собранные на странице cookie в отдельный txt-файл.

• Ссылка в магазине Chrome: Get cookies.txt

EditThisCookie — позволяет модифицировать собранные на странице cookie.

• Ссылка в магазине Chrome: EditThisCookie

Bonus:

Screencastify — вспомогательное расширение, удобное для записи видео как во вкладке, так и полностью на всём экране, с возможностью экспортировать видео в MP4. Пригодится для регистрации дефектов.

• Сайт разработчика: Screencastify 

• Ссылка в магазине Chrome: Screencastify - Screen Video Recorder

Charles Web Debugging Proxy — инструмент мониторинга HTTP и HTTPS трафика. Позволяет перехватывать HTTP-запросы, подменять содержимое как запросов, так и ответов.

• Сайт разработчика: Charles Proxy

• Документация: Charles Proxy - Welcome

Fiddler — по аналогии с Charles, сниффер HTTP/HTTPS трафика, с возможностью модифицировать запросы и ответы.

• Сайт разработчика: Telerik

• Документация: Getting Started with Fiddler Classic

Wireshark — программа для захвата и анализа сетевого трафика. В отличие от Charles и Fiddler, Wireshark захватывает трафик на более низком уровне (на уровне сетевых пакетов).

• Сайт разработчика: Wireshark

• Документация: Wireshark User's Guide

Postman — инструмент для работы с Web API, позволяет отправлять запросы и получать ответы без участия Frontend части Web-приложения.

• Сайт разработчика: Postman

• Документация: Postman Introduction

Swagger UI — мощный инструмент для документации спецификаций RESTful API, позволяющий взаимодействовать с этим API через web-интерфейс. Его нельзя установить как stand-alone приложение, окружение разворачивается во внутренней инфраструктуре.

• Сайт разработчика: Swagger

• Документация: REST API Documentation Tool

MySQL Workbench — инструмент для визуальной работы с MySQL базами данных (схемами, таблицами, содержимым, отправкой SQL-запросов и пр.).

• Сайт разработчика: MySQL

• Документация: MySQL Workbench Manual

Datagrip — среда разработки для визуальной работы с различными SQL и No-SQL базами данных (PostgreSQL, MySQL, MS SQL, Mongo DB и т.д.).

• Сайт разработчика: JetBrains

• Документация: Datagrip Introduction

Network Emulator for Windows Toolkit - Позволяет эмулировать плохое соединение, потери сетевых пакетов, скорость, доступен только для Windows 

• Сайт разработчика: Microsoft Research Asia

• Документация: ?

Clumsy — эмулятор сетевого соединения, обладает таким же классическим набором настроек: входящая/исходящая скорость соединения, потери пакетов и т.д.

• Сайт разработчика: GitHub Clumsy

• Документация: Clumsy Manual

Network Link Conditioner — более скудный по сравнению с инструментами выше, в своей настройке позволяет задавать скорость, потерю пакетов и задержку для входящего/исходящего трафика. Доступен только для macOS. Для установки потребуется скачать Additional Tools for XCode.

• Сайт разработчика: Apple for Developers

• Документация: ?

Visual Studio Code — «лёгкий» редактор исходного кода для кросплатформенной разработки.

• Сайт разработчика: Visual Studio Code

• Документация: VS Code Getting Started

Sublime Text — текстовый редактор, распространяемый по модели share-ware.

• Сайт разработчика: Sublime Text

• Документация: Sublime Text Documentation

Atom — бесплатный текстовый редактор с открытым исходным кодом.

• Сайт разработчика: Atom

• Документация: Atom Documentation

Для браузера

Документация по разным API браузеров, где можно ознакомиться со всем перечнем команд:

• Chrome API Reference

• Mozilla Web APIs

• Safari WebKit JS

Для терминала или командной строки (Terminal, CLI — "Command Line Interface")