مرحبا. لدي نفس المشكلة. ربما تكون هذه المعلومات مفيدة:
1) عندما أفتح بعض "الصفحات" (فليكن P1 ) من SPA الخاص بي ، فافتح علامة التبويب DevTools لا أستطيع رؤية علامتي التبويب "المكونات" و "منشئ ملفات التعريف".
2) أغلق DevTools
3) ثم أنتقل إلى "الصفحة" الأخرى لـ SPA (فليكن P2 )
4) افتح DevTools بينما أنا في P2
5) الآن أرى علامتي التبويب "المكونات" و "منشئ ملفات التعريف"
6) بدون إغلاق DevTools ، أعود إلى P1 ، ولا تزال علامتا التبويب RDT-extension هنا ، الربح :)

@ Roman-Popov هل يمكنك إعادة إنتاج هذا بشكل موثوق؟ هل يهم ما هي p1 و p2؟ (إذا كان هناك شيء ما يتعلق بالتطبيقات يبدو مهمًا ، فهل يمكنك مشاركته معي بطريقة ما حتى أتمكن من إعادة طرحه؟)

أيضا أي متصفح + نظام التشغيل

@ Roman- Popovbengry (أو أي شخص آخر يرى هذا ويمكنه إعادة برورو) إذا كان بإمكانك إعادة النسخ ، فهل ستكون على استعداد لتجربة إنشاء جديد من 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 v85.0.4157.0
فوز 10 برو 1903

@ رومان بوبوف شكرا للمعلومات المضافة!

هل هناك أي فرصة لمشاركة repro (أو الوصول إليه) معي حتى أتمكن من رؤية ما يحدث؟

بالتناوب ، هل ستكون على استعداد لتثبيت إصدار devtools لمرة واحدة إذا قمت بإرفاق واحد هنا؟ (فقط لمعرفة ما إذا كان لا يزال بإمكانك التراجع عنها)

لقد واجهت نفس المشكلة في SPA لدينا. تمكنت من إظهار علامتي التبويب "المكونات" و "ملف التعريف" في Chrome Dev Tools عندما قمت بفحص تطبيقنا في "عرض" الجوال (الذي يغير عرض المكونات الأولية). لقد قمت بالتحديث والتغيير مرة أخرى إلى "عرض" سطح المكتب / سريع الاستجابة (تفتح أدوات التطوير طوال الوقت) وظلت علامات التبويب مرئية.

بالنسبة إلى SPA الخاص بنا ، يتمثل الاختلاف الأكبر بين الصفحة المقصودة للأجهزة المحمولة وسطح المكتب في أنه على سطح المكتب نعرض الدرج مفتوحًا بقائمة تفاعلية افتراضية. هذا الدرج غير مفتوح أو معروض مباشرة على الهاتف المحمول. لست متأكدًا مما إذا كانت هذه المعلومات مفيدة ، أعلم أنها مجرد مسار تنقل. سوف أقوم بالتحديث إذا وجدت أي شيء آخر.

يسعدنا تجربة إنشاء مخصص لمعرفة ما إذا كان يحل المشكلة.

لأنني إذا قمت بإزالة القوائم الطويلة من P2 ، فستظهر علامات تبويب devtools.

نعم! رد فعل الافتراضية. أنا أستخدم ذلك أيضًا في القوائم الطويلة التي ذكرتها في رسالتي السابقة.
overscanRowCount={600} للقائمة المغلفة. إنه كبير بما يكفي ، ولكن لا يوجد سوى عناصر نائبة خفيفة الوزن للغاية تحتوي على عنصرين dom (للحفاظ على بحث المتصفح في أسفل القائمة بالضغط على ctrl + f). إذا قمت بإرجاع overscanRowCount إلى + -50 ، فستختفي مشكلة علامات التبويب المفقودة.

مثير للإعجاب. لذلك يبدو أن المشكلة لها علاقة بحجم الشجرة ، أو ربما عدد الأطفال في أحد الوالدين ... @ Roman-Popov هل يمكنك بالصدفة إعادة صياغة هذا في Code Sandbox أو شيء من هذا القبيل؟ (بما أنني لا أستطيع النظر إلى P2 مباشرة أفترض؟)

في أخبار أخرى على الرغم من أن- overscanRowCount={600} يبدو ... مرتفع بشكل غير متوقع. لم أكن لأخبرهم بأن القيمة تزيد عن رقم واحد. توجد RV و RW لتجنب إنشاء قوائم طويلة والعمل عليها. 600 يعني أنها تعرض صفوف منفذ العرض ، بالإضافة إلى 1200 صف إضافي.

هل تستخدم Reactjs.org react-virtualized أيضًا؟ لأن المشكلة تكررت لي هناك أيضًا (في الواقع ، تم فتح هذه المشكلة مع ذلك كمثال). نحن نستخدمه بالفعل في تطبيقنا ، ولكن مع عدد أصغر من المسح الزائد ، ولا يزال يحدث هناك.

هل تستخدم Reactjs.org react-virtualized أيضًا؟ لأن القضية أعيد إنتاجها هناك أيضًا

تعمل بشكل جيد بالنسبة لي في رد فعل.

في تطبيقنا الخاص ، لا نستخدم المحاكاة الافتراضية ، ومع ذلك يمكننا إعادة إظهار المشكلة.

تحرير: أواجه نفس المشكلة في تطبيق رد فعل جديد تم إنشاؤه بواسطة create-response-app.

أعتقد أن هذا قد يكون مرتبطًا بـ Chrome 83 ، لقد بدأت أواجه هذه المشكلة بعد الترقية إلى 83 ويمكنني إعادة إنتاجها على Chrome Canary 85.

زميل يستخدم Chromium 81 ليس لديه مشكلة في استخدام نفس التطبيق.

تضمين التغريدة

overcanRowCount = {600} تبدو ... عالية جدًا بشكل غير متوقع.
....
توجد RV و RW لتجنب إنشاء قوائم طويلة والعمل عليها

صحيح: تعرف شركة DI عن الأداء. لم يكن ذلك جيدًا ، ولكنه حل سريع. في وقت لاحق ، أجري نوعًا من البحث المخصص بالطبع :)
حول كود المصدر لإظهار تطبيقي ومحاولة إعادة الإنتاج - آسف ، أعتقد أنني لا أستطيع فعل ذلك ، 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. انقر فوق الزر "تحميل Unpacked"
5. حدد مجلد الامتداد غير المضغوط من الخطوة 1

bvaughn اعتقدت أنه يمكنني إعادة إنتاجه باستمرار ، ولكن بعد الانتقال إلى https://reactjs.org (الذي عرض علامات التبويب بشكل صحيح) والعودة إلى تطبيقي مع فتح وحدة التحكم ، أصبح الآن يعمل باستمرار.

على Chrome Canary ، لا يزال بإمكاني إعادة إنتاجه باستمرار على تطبيقي باستخدام عدة عقد. سأحاول الإصدار الذي أرسلته.

لقد لاحظت أن هذا يبدو أنه يقتل جميع علامات تبويب وحدة التحكم الأخرى المضافة إلى الإضافات أيضًا. إعادة ، إلخ.

لقد لاحظت أن هذا يبدو أنه يقتل جميع علامات تبويب وحدة التحكم الأخرى المضافة إلى الإضافات أيضًا. إعادة ، إلخ.

بدأت أشك في أن هذا له علاقة بـ Chrome.

لقد سمعت تقارير من آخرين تفيد بأن Relay DevTools تتعطل ، مما يتسبب في تعطل React DevTools. الآن أراك تقول إن هذا يؤثر على Redux DevTools أيضًا.

لا يوجد شيء يجب أن تفعله React (أو Relay) بحيث تؤثر على بعضها البعض ، أو امتداد Redux.

لقد لاحظت أن هذا يبدو أنه يقتل جميع علامات تبويب وحدة التحكم الأخرى المضافة إلى الإضافات أيضًا. إعادة ، إلخ.

لقد لاحظت نفس الشيء. لقد جربت للتو في Chrome Canary ، وكان لدي نفس السلوك ، بعد الانتقال إلى https://reactjs.org تظهر علامات تبويب React ، مع الآخرين:

لقد حاولت من قبل باستخدام https: // localhost : 3000 (دون نجاح في فتح وإغلاق أدوات Dev) ومع https://farfetch.com. عادت علامات التبويب للظهور مرة أخرى باستخدام https://reactjs.org وبعد إغلاق أدوات Dev بين Farfetch و React وتحديث الصفحة.

أوه بالمناسبة ، كنت أستخدم الإصدار الذي أرسلته إلىbvaughn.

لسبب ما ، لا يمكنني رؤية علامات التبويب إلا على https://reactjs.org على Canary. لا يزال المضيف المحلي بدونه (ليس فقط الأشخاص الذين يتفاعلون ولكنهم جميعًا). أظن أن لدي علامة التبويب على المستقر لأنني فتحت المضيف المحلي بعد فتح مستندات React باستخدام أدوات Dev.

حاولت أن أفعل الشيء نفسه ولكن لا يمكنني الحصول عليه على المضيف المحلي باستمرار في Chrome Canary.

تحرير: بعد إغلاق علامة تبويب المتصفح ، قمت بالوصول إلى React docs على مستقر ، علامات التبويب مفقودة مرة أخرى. يبدو حقًا أنه مشكلة في Chrome

هذه القضية ليست حتمية. في بعض الأحيان يعمل ، وأحيانًا لا يعمل. لا أعتقد أننا يجب أن نقرأ الكثير في نجاح واحد.

حدث إصدار Chrome v83 بعد يوم واحد من إصدار React DevTools v4.7.

إليك الإصدار السابق من React DevTools (4.6) إذا كان أي شخص يرغب في تجربته لمعرفة ما إذا كان هناك أي تغيير:
ReactDevTools-4.6.zip

إنها تبدو أكثر فأكثر وكأنها مشكلة في Chrome رغم ما أسمعه.

لا يعمل الإصدار التجريبي ولا الإصدار 4.6 من أجلي (الحل البديل المذكور أعلاه فقط). لدي أيضًا شعور بأن هذه مشكلة في Chrome ، حيث حدث الخطأ بعد تحديث Canary منذ بضعة أيام واستمر منذ ذلك الحين ، لكن الامتداد يعمل بشكل صحيح في Stable.

قد يكون من الجدير بالذكر أيضًا أن المتفاعلات كانت تواجه دائمًا مشكلات عرضية مع عدم ظهور علامة تبويب الامتداد. لست متأكدًا من السبب ، لكن الفشل العرضي ليس هناك شيء جديد . ما يبدو أنه جديد هو تكرار هذا الفشل ، وحقيقة أنه يحدث لمواقع أخرى ، وحقيقة أنه يبدو أنه يحدث أيضًا لامتدادات أخرى. (لهذا السبب أعتقد أنها مشكلة في 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 لا تعمل) ، لذلك قد يكون ذلك مع بعض التكامل بين الاثنين. ربما تكون واجهة برمجة تطبيقات امتداد هي التي تسبب المشكلة وتغيرت في Chromium 83.

هل اتصلت بفريق Chromium / Chrome بشأن هذا كما ذكرت سابقًا؟

تم الاتفاق في هذه المرحلة على أنه من المحتمل أن يكون خطأ Chromium (تم طرحه مع تحديثات Chrome 83 و Edge 83 الأخيرة).

لقد قمت باختبار اتصال أحد المطورين على Twitter لكنني لم أتلق أي رد بعد.

هل هناك طريقة للربط بالامتداد (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 لصالح المصافحة بسبب عدم القدرة على التنبؤ بهذا الشكل.

تكمن المشكلة في تقييم النافذة التي تم فحصها في أنه يمكن أن ينتهي بك الأمر بظروف السباق أو الاعتماد على الاقتراع كما هو الحال في أدوات devtools للتفاعل.

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

لم أتمكن من إعادة إنتاج الخطأ ، لكنني لن أتفاجأ إذا كان الكروم يقوم بشيء غير تقليدي مع المكالمات الفاصلة في الامتدادات. إنه ليس ممتعًا ولكن المصافحة قد تجعل الأمور أكثر وضوحًا إلى الأمام ، وأنا أعلم أن المراسلة هي شيء تشجعه مستندات chrome على عمليات الإحاطة بالنافذة لأسباب أمنية.

هذا اقتراح مثير للاهتمام ،andyrichardson. شكرا لك!

نحن نواجه أيضًا نفس المشكلة لـ ChroPath
لم أحصل على حل دائم حتى الآن ولكن هنا الحل-

1. قم بتغيير سمة chrome DevTools ، بمجرد أن تكون مطلوبة.
2. افتح الآن devtools ، ستجد علامة تبويب الامتداد في DevTools.
3. يمكنك مرة أخرى تغيير المظهر الذي تريد الاحتفاظ به وسيؤدي ذلك إلى حل مشكلتك.

شكرا ، sanjayautonomiq ، هذا العمل بالنسبة لي

كان هذا يحدث لي منذ أكثر من عام في الكروم. عادةً ما يتم إعادة تحميل الصفحة ، تظهر علامة تبويب المكوِّنات وملف التعريف. أردت فقط أن أشير إلى أنه ليس فقط أحدث إصدار ، إنه يحدث منذ الإصدار 16 طالما يمكنني تذكره

كان هذا يحدث لي منذ أكثر من عام في الكروم. عادةً ما يتم إعادة تحميل الصفحة ، تظهر علامة تبويب المكوِّنات وملف التعريف. أردت فقط أن أشير إلى أنه ليس فقط أحدث إصدار ، إنه يحدث منذ الإصدار 16 طالما يمكنني تذكره

أعتقد أن هذا قد يكون شيئًا من جانبك ، فأنا شخصياً لم أر هذا في AFAIR العام الماضي - وكما ذكرنا ، لم يحدث هذا في أحدث أوبرا وقت كتابة هذا (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 ، ستجد علامة تبويب الامتداد في DevTools.
3. يمكنك مرة أخرى تغيير المظهر الذي تريد الاحتفاظ به وسيؤدي ذلك إلى حل مشكلتك.

عملت مثل السحر بالنسبة لي ، شكرا! كنت على وشك محاولة ضرب رأسي بالحائط.

هذا أمر غريب جدا.

لا بد لي من تغيير سمة devTools لإصلاح هذه المشكلة.

شكرا لك @ sanjayautonomiq

لكن هذا خطأ.

لكن هذا خطأ.

نعم.

على وجه التحديد ، إنه خطأ Chrome (خطأ CR 1085215 ) كما هو مذكور في وصف المشكلة: ابتسامة: لا شيء يمكننا القيام به (هنا) لإصلاحه.

يبدو أنه تم حل هذه المشكلة الآن بالنسبة لي في مستقر Chrome ، لذا سأغلق هذه المشكلة.

يبدو أنه تم حل هذه المشكلة الآن بالنسبة لي في مستقر Chrome ، لذا سأغلق هذه المشكلة.

لا يزال يُنسخ بالنسبة لي على Chrome 83.0.4103.116.

أوافق على أن هذا ليس له حل من جانب RDT ، ولكن قد يكون من المفيد إبقاء هذه المشكلة مفتوحة حتى يتم إصلاح ذلك في Chrome.

نفس المشكلة هنا الإصدار 83.0.4103.116 (الإصدار الرسمي) (64 بت)

سأتناغم وأقول إنها مشكلة بالنسبة لي أيضًا (الإصدار 83.0.4103.116).

مرحبا يا اصدقاء. ربما لا يستحق إضافة المزيد من تعليقات "+1" هنا نظرًا لأن هذا خطأ في Chromium. لا يوجد شيء يمكنني القيام به حيال ذلك على جانب الامتداد لجعله يعمل. من الأفضل إنفاق أصوات "+1" على خطأ Chromium نفسه: ابتسم: حتى تعرف Google أنه يؤثر على الكثير من الأشخاص.

ومع ذلك ، فقد تم وضع علامة على خطأ CR على أنه تم إصلاحه وجدولًا لانتقاء الكرز في الإصدار 84 من Chrome وفقًا لهذا التعليق ، لذا يجب حله قريبًا للجميع على أمل.

في غضون ذلك ، سأقفل هذه المشكلة فقط لتجنب إرسال رسائل غير مرغوب فيها إلى كل من سبق له التعليق أعلاه.