Эффективно используйте git bisect, чтобы быстро находить сложные ошибки.

внешний интерфейс Git TypeScript
Эффективно используйте git bisect, чтобы быстро находить сложные ошибки.

kagol

Основные шаги для поиска проблемы с помощью дихотомии git bisect:

  1. git bisect start [последний неверный идентификатор фиксации] [далее правильный идентификатор фиксации]
  2. Проверьте соответствующую функцию
  3. git bisect good помечен правильно
  4. пока что-то не пойдет не так, отметьте ошибку git bisect bad
  5. Предлагаемый commitid — это коммит, вызвавший проблему

описание проблемы

мы начинаем сVue DevUIПример ошибки в библиотеке компонентов 🌰

5d14c34bНа этот раз зафиксировать, выполнитьyarn buildОтчет об ошибке выглядит следующим образом:

✓ building client + server bundles...
✖ rendering pages...
build error:
 ReferenceError: document is not defined

могу определить последнюю версию(d577ce4) может быть успешно построен.

Введение в git bisect

git bisectКоманда использует алгоритм бинарного поиска, чтобы найти, какая фиксация в истории коммитов вызвала ошибку. Это почти позволяет вам быстро найти любые проблемы с исходным кодом с закрытыми глазами, очень практично.

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

Таким образом, нам нужно только проанализировать код, отправленный в это время, и мы можем быстро найти и устранить ошибку (конкретное время позиционирования зависит от количества отправленного кода и вашего опыта), поэтому мы должны разрабатывать небольшие партии при отправке. код Привычка отправки состоит в том, чтобы отправлять только небольшую независимую функцию за раз.Если есть проблема, ее можно будет очень быстро найти.

Далее я будуVue DevUIВозьмем баг, появившийся ранее, в качестве примера, и подробно опишем, как его использоватьgit bisectЭто оружие.

процесс позиционирования

git bisect start 5d14c34b d577ce4
or
git bisect start HEAD d577ce4

в5d14c34bЭто последнее сообщение об ошибке,d577ce4Это последний коммит без проблем.

Начать после выполненияbisectПосле этого сразу переходим к середине представления, и вот результат печати:

kagol:vue-devui kagol$ git bisect start 5d14c34b d577ce4
Bisecting: 11 revisions left to test after this (roughly 4 steps)
[1cfafaaa58e03850e0c9ddc4246ae40d18b03d71] fix: read-tip icon样式泄露 (#54)

Вы можете видеть, что следующие коммиты были вырезаны:

[1cfafaaa] fix: read-tip icon样式泄露 (#54)

Выполнение заказа:

yarn build

Сборка прошла успешно, поэтому отметьте ееgood:

git bisect good
kagol:vue-devui kagol$ git bisect good
Bisecting: 5 revisions left to test after this (roughly 3 steps)
[c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0] feat(drawer): add service model (#27)

отметка в миллионgood, и сразу через дихотомию переходим к новому коммиту:

[c0c4cc1a] feat(drawer): add service model (#27)

выполнить сноваbuildЗаказ:

yarn build

Сборка завершилась неудачно с самой ранней ошибкой, с которой мы столкнулись:

✓ building client + server bundles...
✖ rendering pages...
build error:
 ReferenceError: document is not defined

под маркойbad, снова чтобы перейти к среднему коммиту:

kagol:vue-devui kagol$ git bisect bad
Bisecting: 2 revisions left to test after this (roughly 2 steps)
[86634fd8efd2b808811835e7cb7ca80bc2904795] feat: add scss preprocessor in docs && fix:(Toast)  single lifeMode bug in Toast 

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

kagol:vue-devui kagol$ git bisect good
c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0 is the first bad commit
commit c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0
Author: nif <lnzhangsong@163.com>
Date:   Sun Dec 26 21:37:05 2021 +0800

    feat(drawer): add service model (#27)
    
    * feat(drawer): add service model
    
    * docs(drawer): add service model demo
    
    * fix(drawer): remove 'console.log()'

 packages/devui-vue/devui/drawer/index.ts           |  7 +++--
 .../devui-vue/devui/drawer/src/drawer-service.ts   | 33 ++++++++++++++++++++++
 packages/devui-vue/devui/drawer/src/drawer.tsx     |  3 ++
 packages/devui-vue/docs/components/drawer/index.md | 29 +++++++++++++++++++
 4 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 packages/devui-vue/devui/drawer/src/drawer-service.ts

Наконец, найдите коммит с проблемой:

c0c4cc1a is the first bad commit

GitHub.com/Облако разработки Fe/…

Весь процесс позиционирования — почти механическая операция, не нужно знать исходный код проекта, не нужно знать, кто что подавал в последнее время, нужно просто бездумно: проверить, отметить, проверить, отметить и, наконец, git сообщит нам, что в этой отправке была ошибка.

Такое ароматное средство, приходите и попробуйте!

анализ проблемы

До какого коммита проблема, сфера позиционирования гораздо меньше.

Если вы обычно отправляете код и хорошо следите за отправкой небольших частиц, появятся ошибки.

Мы должны поблагодарить наших авторов DevUI, у них у всех выработалась привычка отправлять небольшие фрагменты, что на этот раз привело к отправке ошибок.c0c4cc1a, было отправлено всего 4 файла, содержащих более 70 строк кода.

image.png

где мы ищемdocumentключевое слово, нашел два места, оба вdrawer-service.tsПо всему файлу:

Одна строка 12:

static $body: HTMLElement | null = document.body

Другая строка 17:

this.$div = document.createElement('div')

image.png

Оказалось, что всему виной 12 строк кода!

Решите дело!

Вот @lnzhangsong наш землевладелец, безотказно почини эту жучку.

image.png