Таким образом, вы создали веб-приложение один или два раза. Может быть, вам нравится заполнить ваше приложение с помощью console.log Трассу при отладке.
Даже лучше, вы знаете, как использовать Chrome devtools и может разместить точка останова или отладчик; утверждения и знаете, как выйти через код и выяснить, что такое.
Но как насчет реагировать родным? Если это собственное приложение, которое не работает в браузере … Как мы это отлавим?
Отладка удаленного JavaScript
Эта статья предполагает, что у вас уже есть некоторые реагировать нативный проект и работают в эмуляторе локально на вашем компьютере. Чтобы добраться до инструментов отладки, сначала нам нужно поднять контекстное меню в эмуляторе, Ctrl + M (Android) или ⌘ + D (iOS)
Мы больше всего заинтересованы Отладка JS удаленно Отказ После нажатия, UI отладчик автоматически откроется в нашем браузере. Вы можете поднять консоль Tools Tools, нажав Ctrl + Shift + J (ПК) или CMD + опция + J (Mac).
КОНЧИК: Включить живую перезагрузку а также Включить горячую перезагрузку Очень удобны!
Давайте вернемся к нашему насуточному проекту actact и добавить некоторый код для отладки:
const randomNumber = Math.random(); debugger;
После добавления этих строк сохраните изменения. Если будет включена живая перегрузка, это должно автоматически перезагрузить приложение и прекратить выполнение на отладчик; утверждение. Если это не так, убедитесь, что ваш Источники Панель открыта с сетью devtools. Вам также может понадобиться вручную Перезагрузить Ваше приложение в пределах контекстного меню эмулятора.
Здесь мы можем видеть, что константа RandomNumber равно 0.1297839199744638 Отказ Уже мы можем увидеть значение этого удаленного отладчика. Возможность остановить время и выйти через наш код, строку по линии, определить значение переменных ….. бесценный ! Не только это, но нам не нужно модифицировать наш код с кучей console.log Сообщения.
Хорошо, так это Источники Отладчик отлично, но что, если мы хотим осмотреть планировку страницы, как мы обычно можем, с Chrome devtools?
React devtools & redux devtools
Если у вас установлены расширения Read devtools или redux devtools, вы можете заметить, что они не работают с этим удаленным отладчиком, как они делают в веб-приложении.
Это связано с тем, что UI отладчик, который мы открыли выше, не является фактическим приложением, которое мы отладки. Это просто белый экран с некоторым текстом. Расширения будут пытаться подключиться к белому экрану с некоторым текстом (не удаленное нативное приложение), поэтому он не подключается правильно.
Реагировать devtools
Реагировать devtools Позволяет осматривать компонентную наследственность, а также узнать о доступных реквизитах и состоянии каждого компонента. Это может быть очень удобно, но, к сожалению, использовать его с реактивным родным, мы должны использовать Автономное приложение Отказ
$ npm install -g react-devtools $ react-devtools
На данный момент мы увидим автономное окно RevTools RevTools, которое должно автоматически подключаться к вашему первоначальному приложению. Если нет, попробуйте перезагрузить и перераспределить ваше приложение.
Мы можем проверить иерархию компонентов, расширяя компоненты, или мы можем включить инспектор в эмуляторе Toggle осматривает В контекстном меню Ctrl + M Отказ На эмуляторе iOS нажмите Показать инспектор В контекстном меню.
Redux devtools.
Redux devtools – отличный способ осмотреть то, что происходит между действиями, и как каждое действие влияет на ваш магазин данных.
Обратите внимание, что есть два проекта, окружающие Redux Devtools. Первый, Redux devtools , является способом дока дока Redux отладки компонентов непосредственно в ваше приложение, которое, по я считаю, делает наш проект более сложным, чем он должен быть.
Последний, Redux devtools расширение , аутсорсисы до предварительно построенной отладки UI в расширении браузера, которые вы должны установить ( Chrome или Firefox ). Расширение приятно, потому что он сохраняет отладку UI отдельно от вашего кода приложения.
Двигаясь вперед с этой статьей, давайте предположим, что у вас уже есть расширение. Вот a Демо-приложение Это будет обнаружено расширением, если вы хотите увидеть для себя:
Вы можете увидеть действия слева, а также сравнение diff справа. Не только это, но вы можете сверлить в любую часть состояния магазина, чтобы узнать, какое значение имеет значение или было в этот момент во времени:
Эти инструменты великолепны … Что проб, Боб?
Почему вы не можете просто раскрутить отдельные удаленные экземпляры отладчика JavuScript, Rect devtools и redux devtools? Ну … ты мог бы Сделай это, но это немного сложнее, чем должно быть. Если бы только было что-то, что объединило эти отличные инструменты в один …
Представляя: реагировать на родном отладчике
Аххх! Святой Грааль от отладки реагировать собственные приложения: Реагируйте родной отладчик Отказ Это автономное приложение – это удаленный отладчик, который сочетает в себе всю славу Chrome devtools , Реагировать devtools и Redux devtools расширение все в одном окне.
Давайте погрузиться в!
Как видите, redux devtools находится в левом верхнем углу, отреагируйте в левом нижнем углу, а Chrome devtools справа. Я поместил точку останова в моем коде, прежде чем стрелять от запроса авторизации, чтобы получить токен с Имя пользователя и пароль Отказ
В Redux devtools в левом верхнем углу вы можете увидеть действие, которое выгнало его, Auth_login_req и я проверяю действие, где Имя пользователя и пароль поставляется в Action.poyload Отказ
С React devtools в левом нижнем углу мы можем проверить нативные компоненты вместе со своими значениями и стилями. Вы можете увидеть значение Привет это ценность из TextInput Элемент, который я проверяю.
В моем исходном коде API.JS Мы видим, где код приостановлен, на линии 96 Отказ В Область Панель под ним, мы видим переменные области Имя пользователя и пароль и их ценности.
Мы также можем записать в консоль под любому выражению, которое мы хотим, возможно, фрагмент кода, и совершенствуем его до следующего раза.
Вы можете поднять Консоль Ниже нажав Побег Во время сосредоточенности на панели Chrome devtools. Вы можете увидеть, что я вошел в переменные Имя пользователя и пароль вручную проверить их значения, а также комбинированное выражение.
Сетевые запросы
Если вы отправляетесь в Сеть И найдите ваши запросы XHR не регистрируются, вы заметите, что вы не можете видеть. Вы должны сначала включить их, щелкнув правой кнопкой мыши в Реагировать devtools или Redux devtools раздел и нажатие Включить сетевую проверку Отказ
Теперь, если вы увольняете запрос аутентификации, например, вы можете увидеть сетевой запрос в Сеть Панель, а также действия Redux в Redux devtools Панель:
Финальная мысль
Инструменты, которые мы используем, позволяют нам умножить нашу производительность и облегчить нашу жизнь. Можете ли вы представить себе строительство дома без инструментов? Сколько дольше это займет? Чем раньше вы вкладываете время на ваш насущный компьютер, тем раньше вы можете сделать отладку и завершение ваших проектов. Эти инструменты разработчика бесцельны и должны для любого профессионального разработчика.
До следующего раза, мир и счастливые отладки!