Я заметил, что большинство хороших статей начинается с какой-то истории или шутки. Следите за изменениями, потому что я могу добавить один из них. ОБНОВЛЕНИЕ: у меня все еще нет хорошего. ОБНОВЛЕНИЕ ОБНОВЛЕНИЕ: по-прежнему нет. ОБНОВЛЕНИЕ ОБНОВЛЕНИЕ ОБНОВЛЕНИЕ: вы захотите прочитать это полностью, прежде чем решите, действительно ли выполнение следующих шагов полезно.
Итак, давайте узнаем, как отлаживать React с Chrome! Если вы читаете это, вероятно, это означает, что вы в настоящее время убеждаете себя, что Angular 1 на самом деле довольно хорош, и вам не нужно никому ничего доказывать. Что ж, не снимай пока свои неизменные штаны, я тебя прикрыл!
Эта статья на самом деле идеально подходит по времени, потому что у меня есть собственная ошибка React, и, черт возьми, это круто. Мы можем отладить это вместе. Я обнаружил, что практическое знание инструментов разработчика Chrome действительно может избавить вас от любых привязок веб-разработчиков.
Первый шаг - открыть ваше приложение в Chrome. Вы, наверное, уже пробовали поискать в Google «приложение реагировать не работает», так что мы можем пропустить это. Попробуйте открыть свои инструменты разработчика. Единственный способ сделать это - щелкнуть правой кнопкой мыши где-нибудь на странице. Затем в появившемся маленьком меню нажмите «Проверить». Первое, что вы заметите, - это болезненное ощущение в задней части глаз. Это стандартная цветовая схема инструментов разработчика Chrome, сжигающих ваши сетчатки глаза. Если вы все еще не уверены, попробуйте закрыть инструменты разработки с помощью «X» в правом верхнем углу. В противном случае просто выключите компьютер.
Многие раньше совершали ту же ошибку. Но это не проблема, потому что это кто-то исправил. Нам просто нужно включить настраиваемую тему пользовательского интерфейса, что довольно просто. Для этого введите следующий адрес в хром, chrome: // flags. Здесь мы можем найти множество строк текста. Прокрутите вниз, пока не найдете эту строку.
Включите этого плохого парня. Теперь возьмите солнцезащитные очки, потому что нам снова нужно будет открыть инструменты разработки. В правом верхнем углу рядом с символом «X» спасения сетчатки три точки в столбце. Щелкните любой из них, затем нажмите Настройки, и вы увидите слева что-то с надписью Эксперименты ... На самом деле, это могло быть неправильным флагом. Давай попробуем еще раз. Вернитесь к chrome: // flags. Вы увидите много текстовых строк с синим значком Включить. Нажмите на них. Продолжайте нажимать, пока не получите их все. При нажатии вы, вероятно, заметите всплывающее окно внизу.
Это правда. Это заставляет меня думать, что первое, что мы включили, было, вероятно, правильным. На этом этапе вы можете либо владеть им и оставить все включенные флажки, либо удалить Chrome. Перенесемся к вашему решению, и теперь, когда вы открываете инструменты разработчика, нажимаете точки и нажимаете настройки, вы увидите слева Эксперименты.
Это означает, что теперь мы можем установить нашу собственную цветовую схему. Рекомендую этот. Установите его. Не сработало. Подождите, нам еще нужно сделать одно. Вернитесь в настройки. Если вы нажмете Эксперименты, вы должны увидеть параметр Разрешить настраиваемые темы пользовательского интерфейса. Щелкните по нему. Теперь цветовая схема devtools должна быть ... Ну, по-видимому, она все еще не работает. Если честно, это не особо помогает при отладке. Давайте двигаться дальше.
Оставьте модальные настройки и щелкните вкладку Консоль в верхней части окна инструментов разработчика. Надеюсь, вы увидите красный текст и какое-то сообщение об ошибке. Если нет, попробуйте удалить несколько строк кода, потому что вам понадобится что-то, что нужно сделать. Например, вот что я вижу в своей консоли.
Не беспокойтесь о желтых вещах, которые называются предупреждениями. Они создаются console.warn и не имеют значения. Но эта красная штука выглядит тревожной. Надеюсь, это связано с тем, почему у всего моего приложения нет пользовательского интерфейса. Прочитав этого плохого парня, дайте мне понять, что я нарушил инвариант. Это не хорошо. Если каким-то образом благодаря чистой силе воли мне удастся читать дальше двоеточия, я смогу изолировать свою проблему от определенного компонента SearchInput. Консоль на данный момент сделала свое дело. Пора перейти на вкладку Источники. Теперь я могу провести вас через процесс отладки.
Хорошо, с открытой вкладкой Источники я нажимаю cmd + p. После закрытия модального окна печати я проверяю, что на самом деле сфокусирован на вкладке источников, и снова нажимаю cmd + p. Откроется диалоговое окно поиска файлов. Я набираю «search-inpu», но прекращаю ввод, если ничего не найдено. Меня осенило, что, поскольку я собираю свой код, такого файла нет. Хорошо, я просто перейду в свой файл bundle.js. Открыв это, я начинаю гуглить «СРЕДНИЕ стековые задания». К счастью, последний испуганный взгляд на мой связанный код позволяет мне заметить это всплывающее окно.
Исходные карты - это в основном представление вашего кода до того, как он был объединен. Несмотря на то, что этот код на самом деле никогда не запускается в вашем браузере, Chrome готов сделать вид, что это так. Итак, теперь нам просто нужно включить исходные карты. Вернитесь в Настройки, на вкладке Настройки под заголовком Источники есть удобная кнопка Включить исходные карты JavaScript. флажок. Включено. По-прежнему нет исходных карт. Обновите страницу. Какое облегчение, ввод «search-inpu» теперь позволяет мне перейти к этому файлу. Вспоминая сообщение об ошибке в моей консоли, я прокручиваю вниз до своего метода рендеринга, чтобы проверить наличие ошибок. К счастью, навыки подсветки синтаксиса JSX в Chrome находятся на высоте.
Если подумать, я немного волновался, что мои стили афродиты могут вызвать проблемы. Я хочу убедиться, что все по-прежнему отображается после этого div верхнего уровня. Chrome великолепен и позволяет мне ставить точки останова на определенные строки, чтобы я мог видеть, что происходит. Давайте продолжим и поставим точку останова в строке 15.
Достаточно близко. Теперь я просто обновляю приложение, чтобы достичь точки останова. Не попадает. Может быть, это означает, что он умирает до этой точки останова. Давайте попробуем вместо этого строку 14, закроем инструменты и снова откроем их на всякий случай. На этот раз я попал в точку останова, и внезапно мой пользовательский интерфейс начал работать. К сожалению, строка 14 бесполезна, так как я понятия не имею, что такое JSX как выражение. "Хм…"
К счастью, работа с моей новой цветовой схемой инструментов разработчика придала мне немного уверенности. Давайте попробуем перейти к компоненту выше этого, и там мы сможем проверить, что именно мы импортируем.
Использование консоли во время точки останова действительно полезно; вы можете ввести имена переменных, чтобы увидеть, что они из себя представляют. Установив точку останова в строке 6, я обновляю страницу. Когда мое приложение попадает в эту строку, я набираю «SearchInput» в консоли. Консоли это не понравилось: «Uncaught ReferenceError: SearchInput is not defined». Хорошо……..
Я не буду лгать; все выглядит мрачно. Мое приложение, похожее на Twitter, но предназначенное для хирургов, чтобы они могли делиться забавными медицинскими историями, не похоже, что это произойдет. Пришло время Радуйся, Мария. У Chrome есть последний инструмент отладки: скопируйте точную ошибку в адресную строку и нажмите Enter.
30 минут Stack Overflow спустя….
Итак, очевидно, все методы рендеринга должны возвращать свой JSX. Следовательно, в сообщении об ошибке говорилось: «Возможно, вы вернули undefined, массив или другой недопустимый объект.». Функция без оператора return вернет один из этих трех. Как только я помещаю это в рендер моего SearchInput, все работает правильно.
Что за путешествие, а? Надеюсь, вы узнали много хорошего на этом пути. Поскольку я нашел время, чтобы написать эту полезную статью, я также не стесняюсь поставить плагин для приложения, над которым я работаю, под названием Surgitter. Возможно, я уже упоминал об этом ранее. В этом рассказе иногда происходят забавные вещи во время операции, и хирурги нуждаются в безопасном месте, чтобы поделиться этими историями. Если у вас есть какой-либо интерес, немедленно свяжитесь со мной, и я объясню варианты инвестиций.
