Странные трюки для отладки интерфейса

внешний интерфейс Debug программист
Странные трюки для отладки интерфейса

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

Devtools

Инструменты разработки Chrome должны быть вам знакомы. Давайте поговорим о некоторых идеях отладки в инструментах разработки.

breakpoint

Точка останова является наиболее часто используемой, но многие студенты использовали только точку останова по умолчанию, на самом деле есть еще два типа.

breakpoint

Пауза, когда выполнение кода достигает этой строки кода

conditional breakpoint

Условная точка останова, пауза только в том случае, если выражение истинно, на следующем рисунке показано, когда переменнаяa === 1время сделать паузу. Классический сценарий приложения заключается в том, что когда ошибка возникает время от времени, вам нужно знать, является ли входной параметр нормальным или нет.Вы можете нажать на условную точку останова, которую вы считаете ненормальной, чтобы увидеть, кто ее вызвал. PS: Стоит отметить, что если ваше выражение сообщает об ошибке, эта точка останова не сработает, необходимо определить, не введена ли точка останова, вызванная ошибкой, или она действительно не введена.

logpoint

Точка останова журнала, когда код выполняется здесь, выведет ваше выражение в консоль, не приостанавливая выполнение кода, следующий рисунок является примером вывода на консоль.Стоит отметить, что когда вы отлаживаете сжатый код с помощью sroucemap, имя переменной, которое вы видите, может отличаться от имени переменной, которое вы получаете при фактическом запуске. right Реальное имя переменной или точка останова после отключения исходной карты js на панели исходного кода.

Performance

Когда вы выполняете какие-то операции и не уверены, какой код выполняется, вы можете использовать производительность, чтобы зафиксировать, какой код выполняется.В сочетании с вашей конкретной ситуацией вы иногда можете найти подсказки и получить неожиданные результаты.

кто переместил мой код

Классический вопрос на собеседовании, как узнать, кто остановил бублинг, просто введите следующий код прямо в консоли. Часто используется, чтобы выяснить, почему события, которые я связываю, не запускаются.

var tmpStopPropagation = MouseEvent.prototype.stopPropagation;

MouseEvent.prototype.stopPropagation = function(...args) {
  console.trace('stopPropagation');
  tmpStopPropagation.call(this, ...args);
};

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

var tmpScrollTop = element.scrollTop;

Object.defineProperty(element, 'scrollTop', {
  get: function() {
    return tmpScrollTop;
  },
  set: function(newVal) {
    console.trace('scrollTop');
    tmpScrollTop = newVal;
  }
})

setTimeout

Если мы полагаемся на операции с мышью или клавиатурой, когда мы хотим прервать точку, если вы перейдете к исходной панели и нажмете Tentative, то моя сцена исчезнет, ​​и следующий код поможет вам решить проблему.

setTimeout(() => {debugger;}, 4000);

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

setTimeout(() => {console.log(yourInstance.getSomeValue());}, 100);

SSR

Если вы хотите отладить стиль рендеринга SSR на странице, вы можете отключить его выполнение js, конкретная операция - открыть devtools исходную панель, затем cmd + p, введите «> отключить javascript», нажмите Enter, затем обновите страницу. страница - это чистое SSR состояние.

дихотомия

Это окончательный метод отладки, который редко используется, но он также очень прост для понимания и имеет определенные сценарии применения. Когда вы обнаружите, что проблема с вашим кодом после определенной версии, но вы не можете найти никаких идей, я знаю только, что в версии А нет проблемы, но есть проблема в версии Б, или есть проблема проблема с кодом вдруг, и я не знаю Этот метод можно использовать, если это зависит от того, у кого есть проблема. Общая идея состоит в том, чтобы "контролировать переменные". Вы можете комментировать некоторые коды в коде пакетами, а затем проверять, сохраняется ли проблема. Если она у вас все еще есть, продолжайте комментировать. Если нет, проблема заключается в аннотированном коде. код, который больше похож на алгоритм дихотомии.

Суммировать

Есть больше навыков по отладке, и то, что я написал здесь, - это только часть. Если у вас есть другие идеи получше, оставьте сообщение.

Добро пожаловать в "Byte Front End ByteFE"

Контактный адрес электронной почты для доставки резюме "tech@bytedance.com"

Категории