Всем привет. У меня та же проблема. Возможно, эта информация будет полезна:
1) Когда я открываю некоторые «страницы» (пусть это будет P1 ) моего SPA, а затем открываю DevTools, я не вижу вкладок «Компоненты» и «Профилировщик».
2) закрываю DevTools
3) Затем переключаюсь на другую "страницу" SPA (пусть это будет P2 )
4) Откройте DevTools, пока я на P2
5) Теперь я вижу вкладки "Компоненты" и "Профилировщик".
6) Не закрывая DevTools, я снова переключаюсь на P1 , две вкладки RDT-extension все еще здесь, прибыль :)

@ Roman-Popov Сможете ли вы достоверно воспроизвести это? Имеет ли значение, что такое p1 и p2? (Если что-то в приложениях кажется важным, можете ли вы как-нибудь поделиться со мной, чтобы я мог воспроизвести их?)

Также какой браузер + ОС

@ Roman-Popov @bengry (или любой другой, кто это видит и может воспроизвести). Если вы умеете воспроизводить, не могли бы вы попробовать новую сборку DevTools (которой я мог бы поделиться здесь), чтобы увидеть, сохраняется ли проблема?

Я мог бы попробовать сделать сборку с # 18860, отказавшейся. (Это единственная фиксация в наборе изменений 4.6-> 4.7, которая выглядит даже отдаленно подозрительной.)

@bvaughn Насчет p1 и p2. Ага, похоже, между ними есть разница. P2, где RDT не отображается по умолчанию, содержит гораздо больше dom-элементов. И еще одна деталь - вкладка Redux-devtools ведет себя точно так же, как вкладки RDT.

Что насчет страницы https://reactjs.org/ (проблема, упомянутая @bengry) - я тоже это видел. Но проверил еще раз и проблем не вижу. Вкладки показаны, все нормально.

Вероятно, в моем случае в моем проекте есть проблема с памятью или что-то в этом роде. Потому что, если я удалю длинные списки из P2, появятся вкладки devtools.

Chrome v83.0.4103.61
Chrome Canary версии 85.0.4157.0
Win 10 Pro 1903

@ Roman-Popov Спасибо за добавленную информацию!

Есть ли шанс, что вы можете поделиться репродукцией (или доступом к ней) со мной, чтобы я мог видеть, что происходит?

В качестве альтернативы, не могли бы вы установить одноразовую сборку инструментов разработчика, если я прикреплю ее сюда? (Просто чтобы посмотреть, сможете ли вы еще воспроизвести его)

Я столкнулся с той же проблемой в нашем SPA. Мне удалось отобразить вкладки «Компоненты» и «Профилировщик» в Chrome Dev Tools, когда я проверил наше приложение в мобильном «представлении» (которое изменяет начальную визуализацию компонентов). Я обновился и снова переключился на рабочий стол / отзывчивый "вид" (инструменты разработчика открыты все время), вкладки остались видимыми.

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

Будем рады попробовать кастомную сборку, чтобы увидеть, решит ли она проблему.

Потому что, если я удалю длинные списки из P2, появятся вкладки devtools.

Ага! Реагировать-виртуализированный. Я тоже использую это для длинных списков, упомянутых в предыдущем сообщении.
overscanRowCount={600} устанавливается для обернутого списка. Он достаточно большой, но есть только очень легкие заполнители с парой dom-элементов (чтобы браузер продолжал поиск по списку, нажимая ctrl + f). Если я понизлю overscanRowCount до + -50, проблема с отсутствующими вкладками исчезнет.

Интересно. Похоже, проблема как-то связана с размером дерева или, может быть, с количеством потомков у одного родителя ... @ Roman-Popov, не могли бы вы случайно воспроизвести это в песочнице кода или что-то в этом роде? (Поскольку я не могу смотреть на P2 напрямую, я полагаю?)

Однако из других новостей - overscanRowCount={600} кажется ... очень неожиданно высоким. Я бы не советовал, чтобы это значение превышало однозначное число. RV и RW существуют, чтобы избежать создания длинных списков и работы с ними. 600 означает, что выполняется рендеринг строк области просмотра, плюс еще 1200 дополнительных.

Использует ли reactjs.org react-virtualized ? Потому что проблема была воспроизведена для меня и там (на самом деле, эта проблема была открыта на этом примере). Мы используем это в нашем приложении, но с меньшим количеством пересканированных изображений, и это все еще происходило там.

Использует ли reactjs.org react-virtualized ? Потому что проблема воспроизведена и для меня там

У меня отлично работает на reactjs.org.

В нашем собственном приложении мы не используем виртуализацию реакции, но мы можем воспроизвести проблему.

изменить: у меня такая же проблема с новым приложением для реагирования, созданным с помощью create-react-app.

Я думаю, это может быть связано с Chrome 83, у меня возникла эта проблема после обновления до 83, и я могу воспроизвести ее на Chrome Canary 85.

У коллеги, использующего Chromium 81, нет проблем с тем же приложением.

@bvaughn

overscanRowCount = {600} кажется ... очень неожиданно высоким.
....
RV и RW существуют, чтобы избежать создания длинных списков и работы с ними

Верно: D Я знаю о производительности. Это было нехорошее, но быстрое решение. Позже делаю конечно кастомный поиск :)
Об исходном коде, чтобы показать мое приложение и попытаться воспроизвести - извините, я не могу этого сделать, NDA и так далее, вы знаете. Но я могу попробовать сделать небольшой CRA-проект со списками react-virtualized , тяжелыми страницами и т. Д. И поделиться этим репо, если я снова поймаю эту ошибку. Я постараюсь найти время на это расследование)

Я думаю, это может быть связано с Chrome 83, у меня возникла эта проблема после обновления до 83, и я могу воспроизвести ее на Chrome Canary 85.

У коллеги, использующего Chromium 81, нет проблем с тем же приложением.

Это была бы действительно полезная информация для подтверждения. @ianvieira, насколько надежно можно воспроизвести эту проблему? Если очень надежно, не могли бы вы попробовать старую версию Chromium и посмотреть, не воспроизводится ли она больше?

Если да, дайте мне знать, и я свяжусь с командой Chrome.

Просто чтобы попробовать еще одну вещь, если кто-то еще может достаточно надежно воспроизвести эту проблему, вы бы попробовали эту сборку расширения и дайте мне знать, поможет ли это?

ReactDevTools.zip

На самом деле я этого не ожидаю, но я бы хотел исключить недавние изменения WebPack.

Чтобы установить указанное выше расширение:

1. Скачайте и распакуйте куда-нибудь
2. Откройте в браузере chrome://extensions/
3. Щелкните небольшой переключатель, чтобы отключить расширение React DevTools.
4. Нажмите кнопку «Загрузить распакованный»
5. Выберите распакованную папку расширения с шага 1

@bvaughn Я думал, что смогу последовательно воспроизвести его, но после перехода на https://reactjs.org (который правильно отображал вкладки) и возврата к моему приложению с открытой консолью теперь оно работает стабильно.

В Chrome Canary я все еще могу последовательно воспроизвести его в своем приложении с несколькими узлами. Я попробую ту версию, которую вы прислали.

Я заметил, что это, похоже, убивает все мои другие вкладки консоли, добавленные расширением. Redux и др.

Я заметил, что это, похоже, убивает все мои другие вкладки консоли, добавленные расширением. Redux и др.

Я начинаю подозревать, что это как-то связано с Chrome.

Я слышал сообщения от других о том, что Relay DevTools дает сбой, что вызывает сбой React DevTools. Теперь я вижу, как вы говорите, что это также влияет на Redux DevTools.

React (или Relay) не должен делать ничего, что могло бы влиять друг на друга или на расширение Redux.

Я заметил, что это, похоже, убивает все мои другие вкладки консоли, добавленные расширением. Redux и др.

Я заметил то же самое. Я только что попробовал в Chrome Canary, у меня было такое же поведение, после перехода на https://reactjs.org появляются вкладки React вместе с другими:

Раньше я пробовал использовать https: // localhost : 3000 (безуспешно открывая и закрывая инструменты разработчика) и https://farfetch.com. Вкладки снова появились с https://reactjs.org и после закрытия инструментов разработчика между Farfetch и React и обновления страницы.

О, кстати, я использовал версию, которую вы отправили @bvaughn.

По какой-то причине я вижу вкладки только на https://reactjs.org на Canary. Localhost по-прежнему работает без него (не только реагирующие, но и все). Я подозреваю, что у меня есть вкладка в конюшне, потому что я открыл localhost после открытия документов React с открытыми инструментами Dev.

Я пытался сделать то же самое, но у меня не получается постоянно размещать его на локальном хосте в Chrome Canary.

РЕДАКТИРОВАТЬ: после закрытия вкладки браузера я получил доступ к документам React в стабильной версии, вкладки снова отсутствуют. Это действительно похоже на проблему с Chrome

Этот вопрос не детерминирован. Иногда это работает, иногда нет. Я не думаю, что мы должны придавать слишком много значения одному успеху .

Chrome v83 вышел через день после React DevTools v4.7.

Вот предыдущая версия React DevTools (4.6), если кто-то захочет попробовать ее, чтобы увидеть, изменится ли что-нибудь:
ReactDevTools-4.6.zip

Это все больше и больше похоже на проблему с Chrome, хотя из того, что я слышу.

У меня не работают ни экспериментальная версия, ни 4.6 (только обходной путь, упомянутый выше). У меня также есть ощущение, что это проблема Chrome, поскольку ошибка возникла после обновления Canary несколько дней назад и сохраняется с тех пор, но расширение работает правильно в стабильной версии.

Также стоит отметить, что у reactjs.org всегда возникали случайные проблемы, когда вкладка расширения не отображалась. Не знаю, почему, но случайные неудачи не новы . Что кажется новым, так это частота этого сбоя и тот факт, что он происходит на других сайтах, а также тот факт, что он, похоже, также происходит и с другими расширениями. (Вот почему я думаю, что это проблема Chrome / Chromium)

Я понятия не имею, как работает расширение, и я также не могу создать сокращенный тестовый пример. Но, возможно, это вам хоть как-то поможет:

На reactjs.org, где работает расширение, объект window имеет __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ и __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Последний выглядит так:

В приложении, в котором расширение не работает, существует только __REACT_DEVTOOLS_GLOBAL_HOOK__ выглядит так:

Есть ли способ подключиться к расширению ( main.js ?), Может быть, даже подключить отладчик, чтобы найти потенциальную ошибку? (Я пробовал background.js но мне кажется, это неподходящее место для просмотра.)

@bvaughn Я также думаю, что это может быть ошибка Chromium (обратите внимание на Chromium, а не на Chrome, так как у меня точно такое же ошибочное поведение в Edge). Opera отлично работает у меня с самым последним RDT, поэтому я предполагаю, что они еще не обновились до Chromium 83 (хотя сейчас я не рядом с вычислителем).

Я обнаружил ошибку здесь, поскольку она, похоже, передается на RDT (я также не знал, что другие, такие как Relay и Redux DT, не работают), так что это может быть некоторая интеграция между ними. Возможно, API-интерфейс расширения, который вызывает проблему и изменился в Chromium 83.

Обращались ли вы по этому поводу к команде Chromium / Chrome, как упоминали ранее?

На данный момент согласен, что это, скорее всего, ошибка Chromium (которая появилась в последних обновлениях Chrome 83 и Edge 83).

Я связался с одним из разработчиков в Твиттере, но пока не получил ответа.

Есть ли способ подключиться к расширению (main.js?), Может быть, даже подключить отладчик, чтобы найти потенциальную ошибку? (Я пробовал background.js, но мне кажется, это неподходящее место для просмотра.)

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

Вы также можете отладить сам пользовательский интерфейс расширения, что можно сделать, отсоединив / отстыковав панель DevTools и открыв второе окно DevTools для проверки первого, вот так (я использую ⌘ + J ):

Вы также можете открыть расширение (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) и выбрать «Подробности» и «Проверить представления».

Кстати, похоже, что это проблема Chromium, которая также влияет на Vue и Redux DevTools.

Если у вас есть учетная запись с ошибкой CR, подумайте о том, чтобы отметить эту проблему:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

Я не уверен, что это именно тот ответ, который вы ищете, но в Urql Devtools мы попытались отказаться от использования chrome.devtools.inspectedWindow.eval в пользу подтверждения связи из-за такой непредсказуемости.

Проблема с оценкой проверенного окна заключается в том, что вы можете столкнуться с условиями гонки или зависимостью от опроса, как в случае с react devtools.

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

Мне не удалось воспроизвести ошибку, но я не удивлюсь, если хром будет делать что-то странное с интервальными вызовами в расширениях. Это не весело, но рукопожатие может сделать все немного проще, я знаю, что обмен сообщениями - это то, что chrome docs поощряет по сравнению с окнами по соображениям безопасности.

Интересное предложение, @andyrichardson. Спасибо!

Мы также сталкиваемся с той же проблемой для ChroPath
Я еще не получил постоянного решения, но вот работа -

1. Измените тему Chrome DevTools только один раз, когда это потребуется.
2. Теперь откройте инструменты разработчика, вы найдете вкладку расширения в DevTools.
3. Вы можете снова изменить тему, которую хотите сохранить, и это решит вашу проблему.

Спасибо, @sanjayautonomiq , эта работа для меня

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

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

Я думаю, что это может быть что-то на вашей стороне, поскольку лично я не видел этого в прошлом году AFAIR - и, как уже упоминалось, этого не происходит в последней версии Opera на момент написания этой статьи (Opera 68, Chromium 81), и мне не помогает обновление страницы. Однако обходной путь, предложенный @sanjayautonomiq, работает.
Даже если эта ошибка существует как минимум год, что-то за последние пару недель сделало ее хуже (новые версии Chromium и / или новые версии RDT) - как видно из всех реакций в этой проблеме.

Даже если эта ошибка существует как минимум год, что-то за последние пару недель сделало ее хуже (новые версии Chromium и / или новые версии RDT) - как видно из всех реакций в этой проблеме.

Безусловно верно. Я снова пропинговал ошибку CR. Эта регрессия очень разрушительна.

К вашему сведению, я только что пометил http://crbug.com/1085215 как копию http://crbug.com/1093731. Исправление последней проблемы было отправлено ~ 8 дней назад. Повторите тест на канарском языке и, если проблема не будет решена, выполните списание 1085215.

Действительно похоже, что исправление Canary решает эту проблему (или, по крайней мере, делает ее НАМНОГО сложнее воспроизвести). Мы собираемся оставить эту проблему открытой до тех пор, пока исправление не будет выпущено в стабильную версию Chrome, поскольку мы уже получаем много повторяющихся отчетов об этом.

Мы также сталкиваемся с той же проблемой для ChroPath
Я еще не получил постоянного решения, но вот работа -

1. Измените тему Chrome DevTools только один раз, когда это потребуется.
2. Теперь откройте инструменты разработчика, вы найдете вкладку расширения в DevTools.
3. Вы можете снова изменить тему, которую хотите сохранить, и это решит вашу проблему.

Сработало для меня как шарм, спасибо! Собирался попытаться удариться головой о стену.

Это так странно.

Мне нужно изменить тему devTools, чтобы исправить эту проблему.

Спасибо, @sanjayautonomiq

Но это ошибка.

Но это ошибка.

Да.

В частности, это ошибка Chrome (ошибка CR 1085215 ), как упоминалось в описании проблемы: smile: Мы ничего не можем сделать (здесь), чтобы исправить это.

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

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

Все еще воспроизводится для меня в Chrome 83.0.4103.116.

Я согласен, что у этого нет исправления на стороне RDT, но, возможно, стоит оставить эту проблему открытой, пока она не будет исправлена ​​в Chrome.

Такая же проблема здесь Версия 83.0.4103.116 (официальная сборка) (64-разрядная версия)

Я вмешаюсь и скажу, что это тоже проблема для меня (версия 83.0.4103.116).

Эй, ребята. Вероятно, не стоит добавлять сюда больше комментариев «+1», поскольку это ошибка Chromium. Я ничего не могу с этим поделать со стороны расширения, чтобы заставить его работать. Голоса «+1» лучше потратить на саму ошибку Chromium: smile: чтобы Google знал, что она затрагивает множество людей.

При этом ошибка CR была отмечена как исправленная и запланирована для выбора вишни в версии 84 Chrome в соответствии с этим комментарием, поэтому, мы надеемся, что она должна быть исправлена ​​в ближайшее время.

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