Общие проблемы браузеров google Chrome и Opera web development tools.
WEB DEVTOOLS OF CHROME
1. Чтобы попасть в командные настройки, введите ctrl+shift+p.
2. Чтобы отключить javascript, запустите ctrl+shift+p -> Disable JavaScript
3. Для жесткой перезагрузки браузера chrome ctrl+F5 или Opera или лучше Right Mouse Button на значке перезагрузки и выберите click empty cache and hard reload
4. С помощью инструментов разработчика можно эмулировать мобильное устройство (devtools spoof useragent), геолокацию (но старайтесь сочетать с соответствующим VPN) и скорость сетевого соединения more tools->sensors. performance
5. Чтобы получить выделенный элемент в консоли JS, введите var $0
6. Панель ctrl+shift+P -> Show coverage показывает использование css и jsю
КОНСОЛЬ
7. Для включения перехвата XMLHttpRequest устпокрытия ановите флажок в Console->Console Settings
SOURCES
8. В панели Source можно временно изменить css и js до перезагрузки страницы. Вы можете сохранить изменения с помощью devtools, если у вас локальный сервер и если вы настроили рабочее пространство в Source->File systeme Settings
9. В Sources->Event listeners breakpoint можно установить точку останова на Canvas или Geolocation и т.д.
10. Можно отлавливать все Ajax-запросы Sources->XHR/fetch писать точки останова В сети вы увидите информацию о полезной нагрузке, которую веб-страница получает от браузера. И вы даже можете избежать этого запроса с помощью stepover.
10.1 Или вы можете набрать ctrl-shift-p->Network request blockingдля блокировки
10.2 Я думаю, что лучшая идея - это отредактировать XHR запрос на лету и отправить его этим любопытным ребятам.
11. Для подмены useragent используйте Network panel->Network conditions очень мощный инструмент
12. Чтобы узнать, не слишком ли сильно веб-страница загружает ваш процессор, активируйте флажок Ctrl+SHift+P Show Rendering - Frame Rendering stats.
12.1 Для анализа нагрузки используйте Performance -> Frames. Должен быть зеленым, красный или желтый означает перегрузку
12.2 Панель Performance Monitor позволяет следить за использованием процессора
12.3 Для уменьшения объема памяти нажмите кнопку Garbage Collect на панели Memory. Если уровень памяти после GC стал выше, чем после предыдущего нажатия кнопки GC, значит проблема с перегрузкой памяти.
13. Application->cookies позволяет удалить или редактировать выбранную куку.
14. Используйте application->Service workers для их удаления. Service workers могут вызвать перегрузку процессора. Например, при просмотре utube мой процессор работает на 50% из-за какого-то дурацкого скрипта service worker.
15. Чтобы перехватить всю фоновую активность в браузере, используйте application->Background Fetch->record
16. Для анализа производительности и SEO веб-сайта юзай panel Lighthouse
17. Интересная функция позволяет увидеть всех слушателей на веб-странице, установи чекбокс Rendering->Scrolling performance issues
18. Чтобы попасть в расширенные настройки хрома, введите chrome://chrome-urls/
19. Чтобы сопоставить номер процесса chromium и веб-страницы, используйте chrome://discards/graph
20. Вы можете проверить базу данных веб-контента, которую chromium сохранил на вашей машине /home/<user name>/snap/chromium/common/chromium/Default/IndexedDB