Глава 2.1: Chrome DevTools для Android

1 Что такое Chrome DevTools для WebView

Chrome DevTools — это набор инструментов разработчика, встроенный в браузер Google Chrome. С помощью Remote Debugging можно подключить DevTools к WebView на Android-устройстве и отлаживать его так же, как обычный сайт в браузере.

Что можно делать с Chrome DevTools для WebView:

• Инспектировать DOM: Просматривать и редактировать HTML-структуру страницы.
• Редактировать CSS в реальном времени: Менять стили и сразу видеть результат на устройстве.
• Выполнять JavaScript: Запускать JS-код в консоли, проверять значения переменных.
• Мониторить сетевые запросы: Видеть все HTTP-запросы, их статусы, время выполнения, заголовки.
• Анализировать производительность: Записывать и анализировать производительность страницы.
• Профилировать память: Делать снимки памяти и искать утечки.
• Управлять хранилищами: Просматривать и редактировать Cookies, LocalStorage, IndexedDB.
• Проводить аудит: Использовать Lighthouse для проверки производительности, доступности, SEO.

Почему это важно для QA:

• Локализация багов: Можно точно определить, в каком слое живёт баг (веб-контент, JS Bridge, нативная обёртка).
• Быстрое воспроизведение: Можно изменить CSS/JS прямо в DevTools и проверить, исправит ли это баг.
• Детальная информация: Можно получить полную информацию о сетевых запросах, ошибках JavaScript, производительности.
• Доказательная база: Скриншоты из DevTools — отличное дополнение к баг-репорту.

2 Подготовка окружения

Перед тем как подключить DevTools к WebView, нужно правильно настроить устройство и приложение. Без этого подключение не будет работать.

Шаг 1: Включите режим разработчика на Android-устройстве

1. Откройте Настройки устройства.
2. Перейдите в О телефоне (или «О устройстве»).
3. Найдите Номер сборки (Build number).
4. Нажмите на него 7 раз подряд.
5. Увидите сообщение «Вы стали разработчиком!» (или «Режим разработчика включён»).

Шаг 2: Включите USB-отладку

1. Вернитесь в главное меню Настроек.
2. Перейдите в Система → Для разработчиков (или «Параметры разработчика»).
3. Включите переключатель USB-отладка (USB debugging).
4. Подтвердите действие, если появится диалог.

Шаг 3: Включите отладку WebView в приложении

По умолчанию отладка WebView отключена в релизных сборках. Разработчики должны включить её вручную. Вот как это делается в коде:

import android.webkit.WebView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Включаем отладку WebView (только для debug-сборок!)
        if (BuildConfig.DEBUG) {
            WebView.setWebContentsDebuggingEnabled(true)
        }
        
        setContentView(R.layout.activity_main)
        
        val webView = findViewById<WebView>(R.id.webview)
        webView.loadUrl("https://example.com")
    }
}

import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // Включаем отладку WebView (только для debug-сборок!)
        if (BuildConfig.DEBUG) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
        
        setContentView(R.layout.activity_main);
        
        WebView webView = findViewById(R.id.webview);
        webView.loadUrl("https://example.com");
    }
}

Шаг 4: Подключите устройство к компьютеру

1. Подключите Android-устройство к компьютеру через USB-кабель.
2. На устройстве выберите режим подключения «Передача файлов» (MTP) или «Передача изображений» (PTP).
3. На компьютере откройте Google Chrome (версия 80+).
4. В адресной строке введите chrome://inspect/#devices.
5. Убедитесь, что включена галочка «Discover USB devices».
6. В списке устройств должно появиться ваше устройство.

# Проверьте, видит ли компьютер устройство
adb devices

# Вывод должен быть примерно таким:
# List of devices attached
# ABC123456789    device

# Если устройство не появляется:
# 1. Проверьте USB-кабель (не все кабели поддерживают передачу данных)
# 2. Установите драйверы для вашего устройства
# 3. Перезапустите ADB-сервер:
adb kill-server
adb start-server

# Если устройство в статусе "unauthorized":
# 1. Проверьте экран устройства — должен быть диалог разрешения отладки
# 2. Нажмите "Разрешить"

3 Подключение к WebView и первый инспектор

Теперь, когда всё настроено, давайте подключимся к WebView и откроем первый инспектор.

Шаг 1: Откройте приложение на устройстве

1. Запустите приложение на Android-устройстве.
2. Перейдите на экран с WebView.
3. Убедитесь, что WebView загрузил страницу (не белый экран).

Шаг 2: Найдите WebView в списке

1. На компьютере откройте chrome://inspect/#devices.
2. В разделе «Your device» вы увидите название вашего устройства.
3. Под названием устройства будет список всех WebView и вкладок Chrome.
4. Найдите ваше приложение (по названию пакета, например, com.example.myapp).
5. Под названием приложения будет URL, загруженный в WebView.

Your device (Android 13)

  com.example.myapp (WebView)
    https://example.com
    
    [inspect] [Configure...]

  Chrome
    https://www.google.com
    
    [inspect]

Шаг 3: Откройте инспектор

1. Нажмите на ссылку «inspect» под вашим WebView.
2. Откроется новое окно Chrome DevTools, подключённое к WebView.
3. В этом окне вы увидите точную копию страницы, отображаемой на устройстве.

4 Вкладка Elements: Инспекция DOM и CSS

Вкладка Elements — это ваш главный инструмент для инспекции HTML-структуры и редактирования CSS. Здесь вы можете найти и исправить большинство визуальных багов.

Что можно делать во вкладке Elements:

• Просматривать DOM-дерево: Видеть всю HTML-структуру страницы.
• Редактировать HTML: Изменять атрибуты, текст, структуру элементов.
• Редактировать CSS: Менять стили и сразу видеть результат на устройстве.
• Использовать инструмент «Выбрать элемент»: Кликать на элементы на устройстве и видеть их в DOM.
• Проверять вычисленные стили: Видеть финальные значения CSS-свойств.
• Анализировать Box Model: Видеть отступы, границы, padding, margin.

Как использовать вкладку Elements:

1. Выберите элемент:
   • Нажмите на иконку «Выбрать элемент» (стрелка в верхнем левом углу панели Elements).
   • Кликните на элемент на предпросмотре страницы или на самом устройстве.
   • Элемент подсветится в DOM-дереве.
2. Просмотрите стили:
   • В правой панели увидите вкладку «Styles» с применёнными CSS-правилами.
   • Можете редактировать значения, добавлять новые свойства.
   • Изменения сразу отразятся на устройстве.
3. Проверьте вычисленные стили:
   • Переключитесь на вкладку «Computed».
   • Увидите финальные значения всех CSS-свойств после применения всех правил.
   • Это полезно, когда стиль переопределяется несколькими правилами.
4. Проанализируйте Box Model:
   • Внизу вкладки Computed увидите схему Box Model.
   • Увидите размеры контента, padding, border, margin.
   • Это помогает понять, почему элемент занимает больше или меньше места, чем ожидается.

Баг: "Кнопка 'Оплатить' не видна на экране"

Действия QA:
1. Откройте вкладку Elements
2. Используйте инструмент "Выбрать элемент"
3. Кликните на область, где должна быть кнопка
4. В DOM-дереве увидите, что кнопка существует
5. Проверьте стили:
   - position: fixed
   - bottom: 0
   - z-index: 100
6. Проверьте Computed стили:
   - bottom: 0px
   - height: 60px
   - visibility: visible
7. Проверьте Box Model:
   - margin-bottom: 0
   - padding-bottom: 0
8. Вывод: Кнопка должна быть видна, но её перекрывает другой элемент
9. Проверьте z-index соседних элементов
10. Нашли: нативный таб-бар имеет z-index: 200 и перекрывает кнопку

Решение: Увеличить z-index кнопки или изменить отступ

Полезные функции вкладки Elements:

• Toggle element state: Кликните правой кнопкой на элемент → «Force state» → выберите состояние (:hover, :active, :focus). Полезно для проверки стилей при наведении.
• Copy selector: Кликните правой кнопкой → «Copy» → «Copy selector». Скопирует CSS-селектор элемента.
• Copy XPath: Кликните правой кнопкой → «Copy» → «Copy XPath». Скопирует XPath элемента.
• Copy full XPath: Полный путь к элементу от корня DOM.
• Delete element: Кликните правой кнопкой → «Delete element». Удалит элемент из DOM (полезно для проверки, что баг связан с этим элементом).
• Edit HTML: Дважды кликните на элемент в DOM-дереве, чтобы редактировать HTML напрямую.

5 Вкладка Console: JavaScript и логирование

Вкладка Console — это ваш инструмент для работы с JavaScript. Здесь вы можете выполнять JS-код, просматривать ошибки, логировать данные и отлаживать логику приложения.

Что можно делать во вкладке Console:

• Выполнять JavaScript: Вводить JS-код и выполнять его в контексте страницы.
• Просматривать ошибки: Все JavaScript-ошибки отображаются здесь.
• Просматривать предупреждения: Предупреждения от браузера и приложения.
• Просматривать логи: Вывод console.log(), console.warn(), console.error().
• Проверять значения переменных: Вводить имена переменных и видеть их значения.
• Вызывать функции: Вызывать функции, определённые на странице.
• Тестировать JS Bridge: Вызывать нативные методы из JavaScript.

Как использовать вкладку Console:

1. Выполнение кода:
   • Введите JavaScript-код в поле ввода внизу консоли.
   • Нажмите Enter для выполнения.
   • Результат отобразится ниже.
2. Просмотр ошибок:
   • Ошибки отображаются красным цветом.
   • Кликните на ошибку, чтобы увидеть стек вызовов.
   • Кликните на номер строки, чтобы перейти к источнику ошибки.
3. Фильтрация логов:
   • Вверху консоли есть фильтры: All, Errors, Warnings, Info, Verbose.
   • Используйте фильтры, чтобы сосредоточиться на нужных сообщениях.
4. Очистка консоли:
   • Нажмите кнопку «Clear console» (иконка с перечёркнутым кругом).
   • Или используйте горячие клавиши: Ctrl+L (Windows/Linux) или Cmd+K (Mac).

// Проверка версии WebView
navigator.userAgent

// Проверка поддержки функции
typeof window.Android !== 'undefined' // Android JS Bridge
typeof window.webkit !== 'undefined' // iOS JS Bridge

// Проверка LocalStorage
localStorage.getItem('user_token')
localStorage.length

// Проверка Cookies
document.cookie

// Проверка геолокации
navigator.geolocation.getCurrentPosition(
  (pos) => console.log('Координаты:', pos.coords),
  (err) => console.error('Ошибка:', err)
)

// Вызов нативного метода (Android)
if (window.Android) {
  window.Android.showToast('Привет из консоли!')
}

// Вызов нативного метода (iOS)
if (window.webkit && window.webkit.messageHandlers) {
  window.webkit.messageHandlers.showToast.postMessage('Привет из консоли!')
}

// Проверка размера экрана
window.innerWidth
window.innerHeight
window.devicePixelRatio

// Проверка ориентации
screen.orientation.type

// Проверка типа подключения
navigator.connection.effectiveType // '4g', '3g', '2g', 'slow-2g'

// Очистка LocalStorage
localStorage.clear()

// Очистка Cookies
document.cookie.split(";").forEach(function(c) { 
  document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
});

Типичные сценарии использования Console:

Баг: "Кнопка 'Поделиться' не работает"

Действия QA:
1. Откройте вкладку Console
2. Проверьте, определён ли JS Bridge:
   console.log('Android bridge:', typeof window.Android)
   console.log('iOS bridge:', typeof window.webkit)
   
3. Если bridge определён, попробуйте вызвать метод вручную:
   window.Android.share('https://example.com')
   
4. Проверьте консоль на наличие ошибок:
   - Если есть ошибка "window.Android is not defined" — JS Bridge не зарегистрирован
   - Если есть ошибка "share is not a function" — метод не реализован
   - Если ошибок нет, но ничего не происходит — баг в нативном коде

5. Проверьте логи нативного приложения (Logcat) — возможно, там есть ошибка

Баг: "Список товаров не загружается"

Действия QA:
1. Откройте вкладку Console
2. Перезагрузите страницу (F5)
3. Проверьте консоль на наличие ошибок:
   - Ошибки JavaScript?
   - Ошибки CORS?
   - Ошибки сети?
   
4. Выполните запрос вручную:
   fetch('https://api.example.com/products')
     .then(response => response.json())
     .then(data => console.log('Данные:', data))
     .catch(error => console.error('Ошибка:', error))
   
5. Если запрос успешен в консоли, но не работает в приложении:
   - Проблема в коде приложения (обработка ответа, рендеринг)
   
6. Если запрос не успешен:
   - Проблема на стороне сервера или сети
   - Проверьте вкладку Network для деталей

Баг: "Калькулятор считает неправильно"

Действия QA:
1. Откройте вкладку Console
2. Найдите функцию калькулятора в коде (через вкладку Sources)
3. Добавьте breakpoint на строке с расчётом
4. Выполните расчёт в приложении
5. Когда выполнение остановится на breakpoint:
   - Проверьте значения переменных
   - Выполните расчёт вручную в консоли
   - Сравните с ожидаемым результатом
   
6. Пример:
   // В коде: const result = price * quantity * tax
   // В консоли:
   console.log('price:', price)
   console.log('quantity:', quantity)
   console.log('tax:', tax)
   console.log('result:', price * quantity * tax)
   
7. Если значения неверные — проблема в получении данных
8. Если значения верные, но результат неверный — проблема в формуле

console.log('=== WebView Info ===')
console.log('User Agent:', navigator.userAgent)
console.log('Screen:', window.innerWidth, 'x', window.innerHeight)
console.log('Device Pixel Ratio:', window.devicePixelRatio)
console.log('Orientation:', screen.orientation.type)
console.log('Connection:', navigator.connection?.effectiveType)
console.log('LocalStorage items:', localStorage.length)
console.log('Cookies:', document.cookie)
console.log('Android Bridge:', typeof window.Android !== 'undefined')
console.log('iOS Bridge:', typeof window.webkit !== 'undefined')
console.log('====================')

6 Вкладка Network: Мониторинг сетевых запросов

Вкладка Network — это ваш инструмент для анализа всех сетевых запросов, которые делает WebView. Здесь вы можете найти проблемы с загрузкой ресурсов, CORS-ошибки, проблемы с API и многое другое.

Что можно делать во вкладке Network:

• Просматривать все запросы: HTML, CSS, JS, изображения, шрифты, API-запросы.
• Анализировать время выполнения: Сколько времени занял каждый запрос.
• Проверять статус-коды: 200 OK, 404 Not Found, 500 Internal Server Error и т.д.
• Просматривать заголовки: Request headers, Response headers.
• Просматривать тело запроса/ответа: Payload, Response.
• Фильтровать запросы: По типу (XHR, JS, CSS, Img), по статусу, по домену.
• Эмулировать медленную сеть: Throttling для тестирования в условиях плохой сети.
• Эмулировать офлайн-режим: Проверка работы без интернета.
• Блокировать запросы: Проверка работы без определённых ресурсов.

Как использовать вкладку Network:

1. Запись запросов:
   • Откройте вкладку Network.
   • Убедитесь, что включена кнопка «Record» (красный круг).
   • Перезагрузите страницу (F5) или выполните действие в приложении.
   • Все запросы будут записаны.
2. Анализ запроса:
   • Кликните на запрос, чтобы увидеть детали.
   • Вкладка «Headers»: URL, метод, статус-код, заголовки.
   • Вкладка «Payload»: Тело запроса (для POST/PUT).
   • Вкладка «Preview»: Предпросмотр ответа (для JSON, изображений).
   • Вкладка «Response»: Сырой ответ сервера.
   • Вкладка «Timing»: Детальная временная диаграмма запроса.
3. Фильтрация:
   • Используйте фильтры вверху: All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS, Manifest, Other.
   • Используйте поле поиска для фильтрации по URL.
   • Используйте фильтр по статусу: 4xx, 5xx для поиска ошибок.
4. Эмуляция условий сети:
   • В выпадающем списке «Throttling» выберите профиль:
     • Fast 3G: Быстрая 3G-сеть.
     • Slow 3G: Медленная 3G-сеть.
     • Offline: Полное отключение сети.
     • Custom: Настройка своих параметров.
   • Перезагрузите страницу, чтобы увидеть, как она ведёт себя в этих условиях.

Баг: "Страница загружается очень долго"

Действия QA:
1. Откройте вкладку Network
2. Перезагрузите страницу
3. Посмотрите на общую статистику внизу:
   - X requests | X.X MB transferred | X.X MB resources
   - Finish: X.X s
   - DOMContentLoaded: X.X s
   - Load: X.X s
   
4. Отсортируйте запросы по времени (колонка "Duration")
5. Найдите самые долгие запросы
6. Проверьте их:
   - Это API-запросы? → Проблема на стороне сервера
   - Это изображения? → Нужно оптимизировать/сжать
   - Это JS/CSS? → Нужно минифицировать/объединить
   
7. Проверьте количество запросов:
   - Если > 100 запросов → нужно объединять ресурсы
   - Если много мелких изображений → использовать спрайты или SVG
   
8. Проверьте размер ресурсов:
   - Если JS > 500 KB → нужно разделить на чанки
   - Если изображения > 1 MB → нужно сжать
   
9. Включите throttling "Slow 3G" и проверьте, как ведёт себя страница
10. Проверьте, есть ли lazy loading для изображений

Баг: "API не работает в WebView, но работает в браузере"

Действия QA:
1. Откройте вкладку Network
2. Найдите API-запрос (фильтр "Fetch/XHR")
3. Проверьте статус-код:
   - Если (failed) или (blocked:cors) → проблема с CORS
   - Если 401/403 → проблема с авторизацией
   - Если 500 → проблема на стороне сервера
   
4. Для CORS-ошибки:
   - Кликните на запрос
   - Перейдите во вкладку "Headers"
   - Проверьте "Response Headers":
     * Есть ли "Access-Control-Allow-Origin"?
     * Совпадает ли значение с origin вашего приложения?
     
5. Проверьте консоль:
   - Должна быть ошибка типа:
     "Access to fetch at 'https://api.example.com' from origin 
     'https://app.example.com' has been blocked by CORS policy"
     
6. Решение:
   - Сервер должен добавить заголовок:
     Access-Control-Allow-Origin: https://app.example.com
   - Или для разработки:
     Access-Control-Allow-Origin: *

Баг: "Иконки не отображаются"

Действия QA:
1. Откройте вкладку Network
2. Примените фильтр "Img"
3. Найдите запросы со статусом 404
4. Кликните на запрос
5. Проверьте URL:
   - Правильный ли путь?
   - Нет ли опечаток?
   - Правильный ли домен?
   
6. Пример:
   Запрошен: https://example.com/icons/icon-home.png
   Ожидается: https://example.com/assets/icons/icon-home.png
   
7. Решение:
   - Исправить путь в коде
   - Или загрузить файл на сервер по правильному пути
   
8. Проверьте, что файл действительно существует на сервере

Полезные функции вкладки Network:

• Disable cache: Поставьте галочку, чтобы отключить кэш. Полезно для проверки, что ресурсы загружаются заново.
• Preserve log: Поставьте галочку, чтобы сохранять логи при навигации между страницами.
• Block request URL: Кликните правой кнопкой на запрос → «Block request URL». Заблокирует этот запрос (полезно для проверки, что будет без этого ресурса).
• Block request domain: Заблокирует все запросы к этому домену.
• Copy as cURL: Кликните правой кнопкой → «Copy» → «Copy as cURL». Скопирует команду cURL для повторения запроса в терминале.
• Replay XHR: Кликните правой кнопкой на XHR-запрос → «Replay XHR». Повторит запрос.
• Save as: Сохранит ответ сервера в файл.
• Save all as HAR: Сохранит все запросы в формате HAR (HTTP Archive).