https://victor-homyakov.github.io/profile-visualization/

Chrome DevTools tips and tricks

• $0 в консоли - ссылка на на текущий выбранный элемент в панели элементов (Elements)
• $_ в консоли - ссылка на последний вычисленный в консоли результат
• Ctrl-click (Cmd-click в MacOS) по правилу CSS в панели элементов - Chrome DevTools откроет определение этого стиля в панели Sources
• Ctrl-Shift-P (Cmd-Shift-P в MacOS) - быстрый поиск команд
• Chrome умеет делать скриншоты: Ctrl-Shift-P - набрать screenshot - есть команды Capture screenshot, Capture node screenshot, Capture full size screenshot
• Поиск в панели элементов (Ctrl-F) можно вести по строке, CSS-селектору или XPath
• Ctrl-Shift-O - навигация по списку имён в текущем файле (классы, функции и т.п.)
• Ctrl-O (Cmd-O, Cmd-P) в панели Sources - универсальная навигация: по списку всех загруженных файлов, по номерам строк в текущем файле, по символам в текущем файле, по командам DevTools
• Alt-click в MacOS (Alt- или Ctrl-Alt-click в Windows) по треугольнику слева от элемента в панели элементов - развернуть элемент и все вложенные в него элементы
• Ctrl-Shift-D - изменение docking mode (расположения) DevTools - сбоку, снизу или в отдельном окне
• Выделение мышкой с нажатой Alt в панелях Elements и Sources - выделение вертикального блока (Esc - вернуться к обычному одиночному курсору)
• Если навести мышку на селектор в стилях в панели элементов и подождать - Chrome подсветит на странице все элементы с таким селектором
• В контекстном меню для каждого запроса в панели Network есть пункты Copy as fetch, Copy as cURL - в буфер будет скопирована команда JavaScript или команда curl с правильными параметрами
• В контекстном меню для каждого запроса в панели Network есть возможность заблокировать загрузку данного ресурса
• Ctrl-Shift-F (Cmd-Alt-F) в консоли - поиск строки сразу во всех доступных файлах
• copy(object) в консоли копирует переданный объект как строку в буфер обмена
• queryObjects(Array) в консоли покажет все объекты, созданные конструктором Array

Визуализация результатов профилирования в chrome://tracing

При профилировании сложных библиотек и фреймворков типа React и Angular в полученных результатах очень много визуального шума от всевозможных обёрток и утилитных функций, которые загромождают стек. Можно и нужно сделать свой собственный код для более высокоуровневого профилирования (например, в React замерять только времена стандартных методов жизненного цикла компонента: shouldComponentUpdate, render и т.д.).

Встаёт вопрос визуализации полученных данных. Таблички - хорошо, но таймлайн или flame chart - нагляднее и легче для анализа. Можно быстро набросать визуализатор с помощью Google Charts Timeline, но хочется чего-то более мощного и интерактивного, как в Dev tools, с возможностью масштабирования и перемещения вдоль временной оси.

Какие действия заставляют Chromium вычислять layout (делать reflow)

Я уже как-то писал про то, какие действия заставляют WebKit в Chromium вычислять layout (делать reflow)

C тех пор Chromium перешёл на Blink, репозиторий кода сменил свой адрес, и вообще много чего изменилось. Настало время посмотреть в код ещё раз.

Background tab in Chrome browser: how it affects JS

This presentation from Chrome developers shows technical details regarding what happens to a web page when it goes into background (the user switches to another tab)

Freezing:

• ~2013: timers are stopped on mobile after 5 minutes
• M67: loading tasks are stopped on mobile after 5 minutes
• M68 (experiment): page is frozen on desktop after 1 hour without network activity
• M69: page will be frozen or discarded based on the API it uses
• ~2020: page will be frozen after loading

Throttling:

• 2011: setTimeout/setInterval are fired once a second
• M56: timers are delayed to limit CPU usage to 1%
• M68: workers are throttled
• 2018: non-timer tasks are throttled
• ~2020: page will be throttled during loading depending on the foreground activity

Frequently forgotten limitations of the :visited link selector

• Sibling selectors like :visited + span don't work in CSS
• Nested selectors like :visited div don't work in CSS
• :visited link can be styled only via
• color
• background-color
• border-color
• column-rule-color
• outline-color
• fill (color only)
• stroke (color only)
• You cannot change the transparency of the above mentioned allowed rules via color: rgba() or similar techniques, i.e.
  a {color: rgba(128, 0, 0, 0.5)} a:visited {color: rgba(0, 128, 0, 0.1)}
  is effectively equal to
  a {color: rgba(128, 0, 0, 0.5)} a:visited {color: rgba(0, 128, 0, 0.5)}
• window.getComputedStyle, element.querySelector etc. won't detect :visited link

JSFiddle: https://jsfiddle.net/kt5ahmb7/

Reference to the MDN documentation page: https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

CSSTree: CSS to AST parser and syntax validator

• CSSTree - a toolset to work with CSS, including fast detailed parser (string->AST), walker (AST traversal), generator (AST->string) and lexer (validation and matching) based on knowledge of spec and browser implementations
• CSS syntax validator
• CSS syntax documentation
• Analysis of real CSS in the web