DevTools Google Chrome

Google Chrome — это кроссплатформенный веб-браузер, разработанный компанией Google, основанный на движке Chromium. Он отличается высокой скоростью работы, поддержкой современных веб-стандартов, возможностью синхронизации данных между устройствами и встроенными инструментами для разработчиков.

• Скачать Google Chrome
• The Chromium Projects - открытая реализация Chrome

DevTools в браузере — это встроенный набор инструментов разработчика, которые позволяют просматривать, отлаживать и тестировать веб-страницы прямо в браузере. С помощью DevTools можно анализировать HTML, CSS и JavaScript, отслеживать сетевые запросы, измерять производительность сайта, искать ошибки, эмулировать разные устройства и экраны, а также сразу вносить изменения в код для поиска и устранения багов.

• Что такое Disable cache в Dev tools?

Disable cache — это настройка во вкладке Network, которая временно отключает работу браузерного кэша для всех сетевых запросов при открытой панели DevTools: при обновлении страницы все ресурсы всегда загружаются с сервера, что удобно для тестирования изменений и отладки.

• Что такое Preserve log в Dev tools?

Preserve log — это флажок на вкладке Network в DevTools, который сохраняет журнал всех сетевых запросов при обновлении страницы и навигации, позволяя видеть историю запросов за всё время работы вкладки, а не только для текущего открытия страницы.

Ниже все основные способы открыть DevTools:

• Клавиша F12
• Горячие клавиши: Ctrl + Shift + I (Windows/Linux), Cmd + Option + I (Mac)
• Правый клик по элементу → “Исследовать элемент” (“Inspect”, “Просмотреть код”)
• Через меню браузера:
  • Chrome/Edge: Меню → Дополнительные инструменты → Инструменты разработчика
  • Firefox: Меню → Веб-разработка → Инструменты разработчика
  • Safari: Настройки → Дополнительно → Включить меню "Разработка" → Показать инспектор веб-страницы

• Sources — отладка JavaScript, установка точек останова, исследование исходных файлов
• Performance — профилирование производительности страницы и выявление "узких мест"
• Memory — мониторинг использования памяти и поиск утечек
• Security — проверка SSL-сертификатов и уровня безопасности соединения
• Lighthouse — автоматический аудит производительности, SEO, доступности и PWA

Вкладка Elements — просмотр и редактирование HTML и CSS элементов страницы в реальном времени.

Вкладка "Console" в браузерных инструментах разработчика отображает логи, ошибки, предупреждения и различные сообщения, связанные с работой JavaScript-кода на странице, а также позволяет вручную вводить и выполнять команды для отладки. Вкладка console широко применяется в тестировании:

• Для быстрого выявления ошибок, возникающих на стороне клиента, которые не всегда видны визуально на странице.
• Для анализа сообщений об ошибках — они часто содержат подробности о причине сбоя, что позволяет создать точные баг-репорты.
• Для отслеживания выполнения JavaScript-кода, логирования значений переменных, проверки работы функций, событий и взаимодействия с DOM-объектами.
• Позволяет вводить тестовые команды, изменять значения в реальном времени, что полезно для воспроизведения проблем и проверки фикса багов.

Вкладка console — незаменимый инструмент для тестировщика при ручном и автоматизированном тестировании веб-приложений.

Пример использования: Если на открытой странице не догрузились какие-либо данные, например стили, шрифты или картинки, отображаются соответствующие ошибки с подробным описанием.

Вкладка "Network" в браузерных DevTools предназначена для отслеживания всех сетевых запросов, скорость загрузки и ответы сервера. Во вкладке Network тестировщик может получить важную информацию:

• Узнайте, какие ресурсы подключаются/не подключаются, поискать ошибки загрузки (404, 500 и т.д.).
• Анализировать заголовки запроса, ответы, методы (GET, POST, PUT, DELETE), тела запросов и ответов.
• Копировать URL, тела и параметры запросов для дальнейшего тестирования API (например, через Postman).
• Проверьте, отправляются ли лишние запросы, вызывающие задержку загрузки страницы.
• Оценить поведение системы при разном уровне интернет-соединения (можно симулировать 3G/4G/потерю интернета).
• Просмотреть общий объем полученных данных, количество запросов и время загрузки.
• Проследить, корректно ли работают интерактивные элементы (кнопки, формы) через наблюдение за XHR/FETCH-запросами.

Вкладка Network – это must-have для тестирования производительности, функциональной проверки, диагностики проблем загрузки и работы API.

Вкладка Application позволяет просматривать, изменять, удалять и управлять данными различных хранилищ, включая базы данных IndexedDB и Web SQL, а также Local Storage, Session Storage, Cookies и кеш. Панель, в которой можно быстро очистить хранилище и кэш.

Это позволяет "забыть" сессию для текущего пользователя – после обновления страницы сессионные данные будут удалены.

1. Открой DevTools (F12 или Ctrl+Shift+I; на Mac — Cmd+Option+I).
2. Перейди на вкладку Application.
3. В левом меню выбери Session Storage.
4. Кликни по домену нужного сайта.
5. В центральной части появятся ключи сессии.
6. Для удаления одной записи: выдели ключ и нажми Delete или воспользуйся контекстным меню (правый клик — "Delete"). Для удаления всех ключей: нажми кнопку Clear All в таблице.

После этого данные sessionStorage очищаются, и сессия пользователя сбрасывается.

1. Открой DevTools (F12 или Ctrl+Shift+I; на Mac — Cmd+Option+I).
2. Перейди на вкладку Application.
3. В левом меню выбери раздел Cookies и нужный домен.
4. В центральной части появятся все cookie текущего сайта.
5. Для удаления одного cookie: выдели строку и нажми Delete или воспользуйся правым кликом — "Delete". Для удаления всех cookie: нажми кнопку Clear All над таблицей.

После этих действий cookie будут удалены из текущего браузерного хранилища.

Кэш браузера — это временное хранилище, в котором сохраняются копии страниц, изображений и других файлов сайтов для ускорения их повторной загрузки.

Обычные статические или классические сайты чаще используют браузерный кэш "на лету" через HTTP/кэш браузера, но не через Cache Storage — поэтому этот раздел часто бывает пуст у стандартных ресурсов и обычных интернет-страниц.

Обычный браузерный кэш (cached files, images, страницы) полностью просмотреть и управлять через DevTools нельзя — DevTools показывает работу кэша только на вкладке Network (иконки “Memory Cache” и “Disk Cache” у ресурсов), но сам список файлов кэша и их содержимое не выводит.

1. Открой DevTools (F12 или Ctrl+Shift+I, Mac — Cmd+Option+I).
2. Перейди на вкладку Application.
3. В левом меню выбери раздел Cache Storage или Clear Storage.
4. Для удаления отдельных объектов кэша: выбери нужный cache, выдели элементы и нажми Delete.
5. Для полной очистки: выбери Clear Storage и нажми кнопку Clear site data.

Все данные кэша для текущего сайта будут удалены из браузера.

1. Папки с вашим профилем Google Chrome хранятся:

   Windows 7, 8, 10: C:\Users\имя пользователя\AppData\Local\Google\Chrome\User Data\Default
   Mac OS X: Users/имя пользователя/Library/Application Support/Google/Chrome/Default
   Linux: /home/<username>/.config/google-chrome/default

   Вместо "имя пользователя" вставьте имя под которым вы входите в операционную систему.

2. Нативный способ введите в адресной строке браузера:

   chrome://version/

   напротив "Путь к профилю" будет указан нужный путь.

Полное удаление Гугл Хром может понадобиться по разным причинам, например, какие-то глюки или зависания в работе. Итак, Вы решаете переустановить браузер, но для начала следует удалить старый, причем полностью.

ШАГ 1: Стандартное удаление через менеджер программ.

Windows 11:

1. Закройте все окна Chrome.
2. Нажмите кнопку "Пуск" > Параметры.
3. Выберите Приложения > Приложения и возможности.
4. Рядом с приложением Google Chrome нажмите на значок "Ещё"Ещё > Удалить.
5. Выберите Удалить.
6. Чтобы разрешить приложению вносить изменения на устройстве, нажмите Да.

Windows 10:

1. Закройте все окна и вкладки Chrome.
2. Нажмите кнопку "Пуск" Меню "Пуск" > Параметры.
3. Выберите Приложения.
4. В разделе "Приложения и возможности" найдите и выберите Google Chrome.
5. Выберите Удалить.
6. Подтвердите действие, нажав Удалить.
7. Чтобы стереть данные профиля, например закладки и историю, установите флажок "Также удалить данные о работе в браузере".
8. Выберите Удалить.

ШАГ 2: Удаление из папки AppData.

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

Для всех установленных в системе Windows браузеров путь хранения временных файлов один. Переходим в Мой компьютер/Локальный диск "С:/Пользователи/имя вашего пользователя". Тут должна быть скрытая папка AppData или Application Data. Windows специально прячет важные системные папки для того, чтобы мы их специально не удалили. Для того, чтобы она появилась в зоне видимости нужно выбрать Вид поставить галочку на Скрытые элементы.

Открываем AppData/Local ищем Google. Удаляем эту папку.

ШАГ 3: Удаление из системного реестра. Чистку реестра Windows можно провести вручную, использую команду regedit, либо автоматически с помощью специализированных программ. Подробное описание чистки реестра выходит за рамки этой статьи. Тем более, я очень редко использую этот шаг.

На этом полное удаление браузера Google Chrome завершено.

Все закладки Google Chrome размещены в файле Bookmarks (и резервная копия Bookmarks.bak).

• Windows настройка, ускорение, частые вопросы 7 и 8 данная папка находится по адресу «Пуск» - «Компьютер» - «Локальный диск C:» - «Пользователи» - «Имя вашего пользователя». После этого вам потребуется дополнительно перейти в директорию AppData – Local – Google – Chrome – User Data – Default.
• FAQ Linux: /home/<user_name>/.config/google-chrome/Default/Bookmarks

Что такое советника Яндекс.Маркета? Это такой скрипт sovetnik.min.js подключаемый в ваш браузер и дающий вам советы. Это дикий совок, давать непрошеные советы. Бог бы с ними с советами от Яндекса, но он дает ТОРМОЗНУТЫЕ советы. Когда я при тестировании сайта увидел, что из-за скрипта sovetnik.min.js мой сайт грузится дольше на 2 минуты!! Я думал мой сайт взломан и это какая-то гадость грузится с моего сайта!!

Выпиливаем левую заразу из браузера! В моем случае я не смог найти какое плагин подтянул скрипт sovetnik.min.js.

Универсальный способ по удалению Яндекс Советника из браузера Chrome:

1. Находим в профиле Chrome папку с расширениями, в моем случае: C:\Users\<имя пользователя> \AppData\Local\Google\Chrome\User Data\Default\Extensions.
2. Открываем папку в проводнике Windows 10 и в поиске вбиваем имя файла sovetnik.
3. Будут найдены файлы, выделяем найденный файл и нажимаем кнопку открыть расположение файла.
4. Удаляем полностью папку со всеми файлами.

Ручное редактирование закладок Google Chrome в файле Bookmarks можно при помощи любого простого текстового редактора, например gedit текстовый редактор.

Файл Bookmarks разделен на секции, имеющие различные названия. После раздела roots: представлены все папки и ссылки, хранящиеся в браузере. Далее в кавычках представляется название директории, в которой хранятся закладки. Например, bookmark_bar отвечает за закладки, которые хранятся в панели закладок. В строчке id представлен идентификатор закладки, который не стоит настраивать. Параметр name содержит имя файла, которое может быть изменено. Параметр type может иметь значения url или folder, который определяет саму закладку и поддиректорию соответственно. Строчка url отвечает за адрес самой закладки, который также может быть изменен.

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

Скрипт gbookmarklive.php считывает файл закладок и для каждой ссылки выводит её состояние.

gbookmarklive.php

<?php
 
/*
  Are Google bookmarks live? Are Google bookmarks available?
 
  aptitude install php5-curl
 */
 
class gbookmarks {
 
    public $fbpatch = '';
    public $filecont = '';
 
    function __construct($fb = 'Bookmarks') {
        $this->fbpatch = $fb;
    }
 
    function toArray() {
        return (array) $this;
    }
 
    function catSTDOUT() {
 
        return passthru("cat $this->fbpatch");
    }
 
    function getJson() {
 
        return json_decode($this->filecont);
    }
 
    function getUrls() {
        $this->filecont = file_get_contents($this->fbpatch);
        preg_match_all('/.*\"url\": \"(.*).*\"/i', $this->filecont, $matches);
        return $matches[1];
    }
 
}
 
function check_http_status($url) {
// Source: http://petrenco.com/php.php?txt=20
    $user_agent = 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_USERAGENT, $user_agent);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_VERBOSE, false);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    $page = curl_exec($ch);
 
    $err = curl_error($ch);
    if (!empty($err))
        return $err;
 
    $httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
 
// HTTP status codes: https://support.google.com/webmasters/answer/40132
// HTTP 200 (Successful) - OK
// HTTP 301 (Moved permanently) - OK
// HTTP 302 (Moved temporarily) - OK
// HTTP 307 (Temporary redirect) - Fail
// HTTP 404 (Not found) - Fail
 
    return $httpcode;
}
 
$okcodes = array(200, 301, 302);
 
//$obj = new gbookmarks('/home/<user>/.config/google-chrome/Default/Bookmarks.bak');
$obj = new gbookmarks('/home/<user>/.config/google-chrome/Default/Bookmarks');
$urls = $obj->getUrls();
 
foreach ($urls as $url) {
    $answer = check_http_status($url);
 
    if (!in_array($answer, $okcodes)) {
        echo 'HTTP status code: ' . $answer . '. URL: ' . $url . "\n";
    }
}
?>

• Перенос Cookie (куки) Google Chrome Indigo, AEZAKMI