Отладка рабочей среды в Chrome | Минимизированный JS | Отладка дефектов блокировщика в продакшене.
Вы разочарованы производственным браком? Я могу понять вашу боль, если что-то работает в вашей локальной среде, но внезапно выходит из строя в рабочей среде или в любой среде верхнего уровня. Вы продолжаете пытаться, но не можете воспроизвести, ваш менеджер стоит за вами, ваши клиенты продолжают звонить вам — так много эскалаций, когда затрагиваются реальные пользователи. Все ждут ваших исправлений, а вы не умеете отлаживать в продакшене.
Я до сих пор помню, как однажды на выходных я развлекался со своей девушкой, и вдруг мне позвонил мой менеджер и сказал, что приложение не работает в продакшене, исправьте это как можно скорее. В тот день не было никого доступного, никого из БД, бэкенда, даже моего менеджера не было. Клиенты напрямую звонят мне, никто не смог помочь.
Вы можете себе представить ситуацию? Если вы знакомы с JavaScript, вам повезло: мы можем отлаживать минимизированный код JavaScript непосредственно из самого Chrome.
Мы можем воспроизвести ту же ошибку в тестовой среде с неминифицированной версией JavaScript, которая не работает.
Продвинулось все, даже браузеры продвинулись, поняли проблему разработчика и предоставили бесплатную функцию под названием Pretty-Print. Если вы умны, вы можете использовать эту функцию.
Взгляните на следующие шаги для отладки
- Откройте ваше приложение в браузере.
- Теперь нажмите F12 или Ctrl + Shift + I или щелкните правой кнопкой мыши в любом месте веб-страницы и выберите «Проверить», в основном последний вариант.
- Затем перейдите на вкладку исходного кода в инструменте разработчика и найдите уменьшенный файл main.js, нажмите на него.
4. После этого вы увидите опцию {} в левом углу, которая называется красивой печатью.
Проверьте изображение ниже, чтобы найти его:
5. Нажмите на этот знак {}, вы получите новую вкладку с отформатированным исходным кодом в JS.
6. Теперь вы можете видеть номер строки с левой стороны, в любом месте, где вы можете щелкнуть номер строки, чтобы поместить отладчик в нужное вам место.
7. Теперь обновите страницу, нажав кнопку обновления браузера. Пожалуйста, не нажимайте F5, так как это обновит инструмент разработчика и дождется достижения точки останова.
8. Как только точка останова будет достигнута, снова нажмите { }, вы увидите новую вкладку с точкой останова, сохраненной на том же месте.
9. Теперь вы можете видеть значения и легко выполнять отладку.
Вот и все. Я надеюсь, что эта статья поможет вам уменьшить количество производственных дефектов.
Пожалуйста, подпишитесь на меня, если вам понравилась статья, и загляните в мой блог о программировании https://coderfact.com/
Создавайте компонуемые интерфейс и серверную часть
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →
