внешний интерфейс! 7 волшебных инструментов отладки для быстрого поиска ошибок

Vue.js CSS

Эта статья была одобрена первоначальным автором

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

В этой статье в основном перечислены некоторые инструменты отладки, которые вы можете выбрать в зависимости от ситуации.

Инструменты разработки в веб-браузерах

Любой современный веб-браузер поставляется с мощными инструментами для отладки приложений. Если используется оператор консолиcconsole.log(),использоватьalert(), вы также можете использоватьdebuggerОператоры, которые приостанавливают выполнение кода, полезны для нашей отладки.

Мы также можем использовать веб-инспектор или инспектор стилей CSS, чтобы упростить и упростить отладку.

Любой современный веб-браузер оснащен мощными инструментами для отладки вашего приложения. Это может быть просто консольный оператор с console.log(), всплывающее окно с alert() или даже оператор отладчика для приостановки выполнения кода. Эти инструменты были очень полезны для наших задач по отладке, особенно операторы отладчика.

Postman

адрес:www.postman.com/

Почти все клиентские приложения отправляют и получают ответы и запросы JSON. Приложения могут делать множество вещей, запрашивая API, например аутентификацию, передачу пользовательских данных и даже простые вещи, такие как получение текущей погоды для своего местоположения.

Postman— один из лучших инструментов для отладки интерфейсов. оно работаетMacOS,Windowsа такжеLinuxсистема, которая может быстро и легко отправлять напрямуюREST,SOAPа такжеGraphQLпросить.

Используя Postman, мы можем формировать запросы, анализировать ответы и устранять проблемы. Это полезно, когда вы не уверены, в чем проблема: во внешнем интерфейсе или в серверной части.

CSS Lint

адрес:csslint.net/

CSSLintЭто инструмент, используемый для поиска проблем в коде CSS. Он может выполнять базовую проверку синтаксиса и использовать набор предустановленных правил для проверки ошибок в коде. Правила могут быть расширены.

JSON Formatter & Validator

адрес:jsonformatter.curiousconcept.com/

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

JSON Formatter & Validator toolJSON Format - это инструмент, просто введите сжатыйJSONформат, чтобы получить правильный формат. Инструмент также может проверять JSON на соответствие стандартам RFC.

Sentry

адрес:sentry.io/welcome/

Независимо от того, насколько хорошо программа протестирована, ошибки неизбежно будут. Некоторые ошибки появляются не каждый раз. Код, который хорошо работает во время тестирования, может остановиться, когда пользователь использует его, но когда программа падает на глазах у пользователя, Вы можете не видите ошибки, и, конечно, вы говорите: «Эй, у меня есть журнал». Но если честно, то программа генерирует большое количество логов каждый час и каждый день, и она распределена по разным серверам, и если у вас обслуживается несколько сервисов, то количество логов не видно. Когда в один прекрасный день пользователь не выдержит и позвонит, чтобы разглагольствовать, вы снова найдете журнал и обнаружите, что журнал бесполезен: отсутствие контекста, неизвестно, что сделал пользователь, чтобы вызвать исключения, слишком много исключения (никогда. Ради просмотра лога) не знаю как запустить и тд.

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

SentryЭто лог-платформа, она разделена на клиентскую и серверную, клиент (на данный момент у клиента есть Python, PHP, C#, Ruby и другие языки) встроен в середину вашего приложения, и программа отправит исключение в сообщение сервера, сервер записывает сообщение в базу данных и предоставляет веб-программе для удобного просмотра.SentryНаписано на python, исходный код открыт, производительность отличная, легко расширяется.В настоящее время известные пользователиDisqus, Path, mozilla, PinterestЖдать.

JSHint

адрес:jshint.com/

JSHintЭто инструмент анализа и обнаружения кода Javascript, который может не только помочь нам обнаружить ошибки кода JS и потенциальные проблемы, но и помочь нам стандартизировать разработку кода.

JSHintСканируйте программу, написанную на JavaScript, и сообщайте о распространенных ошибках и потенциальных ошибках. Потенциальными проблемами могут быть синтаксические ошибки, ошибки из-за неявных преобразований типов, утечки переменных или другие явные проблемы.

JSHintСканируйте программы, написанные на JavaScript, и сообщайте о распространенных и потенциальных ошибках. Потенциальными проблемами могут быть синтаксические ошибки, ошибки из-за неявных преобразований типов, утечки переменных или что-то еще.

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

BrowserStack

адрес:www.browserstack.com/

Сейчас браузеров с собственными ядрами становится все больше, да и возможности у них тоже самые разные. Если вы хотите проверить совместимость своего сайта в разных браузерах, под разными операционными системами и мобильными платформами, это довольно болезненно. Я видел, что вы установили виртуальные машины на свой компьютер для настройки различных сред, и вы настроили такую ​​среду на своем компьютере, а затем протестировали их одну за другой, но человеческая энергия все-таки ограничена, и мы не можем установить так много систем на одном компьютере, затем мультибраузерность. К счастью, BrowserStack — это евангелие для внешнего интерфейса.

BrowserStackЭто онлайн-инструмент облачного тестирования, который обеспечивает тестирование совместимости браузера веб-сайта, поэтому разработчикам и тестировщикам больше не нужно готовить много виртуальных машин или симуляторов мобильных телефонов.

BrowserStackЭто облачное онлайн-приложение, которое обеспечивает тестирование совместимости браузеров веб-сайтов и поддерживает более 100 браузеров в 9 основных операционных системах. Поддержка локального тестирования, поддержка интеграции с Visual Studio. Или вы можете перейти непосредственно кmodern.ieОнлайн-тест, теперь вы можете зарегистрироваться на бесплатную пробную версию на три месяца.Через три месяца с вас будет взиматься плата.Через три месяца, если вы хотите использовать его и не хотите платить, вы знаете это как разработчик Небесная династия.


Автор: Махди Резви Переводчик: Front-end Xiaozhi Источник: medium оригинал:medium.com/better-pro Страна…

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


общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.