Хотелось бы выделить еще пару важных и удобных вещей в Chrome Dev tools для фронта:
правый клик на брейкпоинте -> Edit breakpoint -> здесь задаем нужное нам условие при котором брейкпоинт будет срабатывать (например x===5)
Во кладке watch можно указывать имена переменных за которыми хотим следить, таким образом на каждом брейкпоинте в этой вкладке будут отображаться значения именно нужных нам переменных
Во вкладке call stack отображается стэк вызовов, в том числе и из прошлого, таким образом мы можем отследить, где была вызвана данная функция, а также «вернутся в прошлое» на пару шагов
Если в UI что-то изменяется, но непонятно что вызвало это изменение, то можно перейти в инспектор DOM, выбрать интересующий элемент и по нажатию на правую кнопку мыши выбрать Break on...subtree modification, тем самым выполнение программы остановится в методе, изменяющем интересующий нас элемент
Выбранный в DOM элемент доступен из консоли по имени $0, таким образом для инспекции при отладке нет необходимости писать в консоли document.querySelector
Важно понимать, что делают разные «стрелочки» в правом верхнем углу. Например, перепрыгнуть через выполнение функции или выйти во внешнюю функцию. Также есть отдельная кнопка, позволяющая брейкпоинтить на всех эксепшенах
Вкладка Network, где можно посмотреть ход общения с сервером
Методы console.warn и console.error, которые визуально выделяют логи и также отображают их в разных категориях, что часто удобно для ориентирования в куче разных логов
Есть вопрос по поводу Яндекс.Блица по фронтенду: задания будут также основываться на алгоритмах и структурах данных или уклон в сторону JS/HTML/CSS/фреймворков?
Серьезно? Это как будто спойлер на шаху поставили и сказали, что так стало лучше.
Проблема только в том, что вы тоже в трениках
Про симуляцию и нереальность всего вокруг — у этой теории есть название — солипсизм. Граничащие идеи также раскрывались в фильме Начало и Матрица.