Halo. Saya memiliki masalah yang sama. Mungkin info ini berguna:
1) Ketika saya membuka beberapa "halaman" (biarlah P1 ) dari SPA saya, kemudian buka DevTools, saya tidak dapat melihat tab "Komponen" dan "Profiler".
2) Saya menutup DevTools
3) Lalu saya beralih ke "halaman" lain di SPA (biarlah P2 )
4) Buka DevTools saat saya menggunakan P2
5) Sekarang saya melihat tab "Komponen" dan "Profiler"
6) Tanpa menutup DevTools saya beralih kembali ke P1 , dua tab ekstensi RDT masih di sini, untung :)

@ Roman-Popov Dapatkah Anda mereproduksi ini dengan andal? Apakah penting apa itu p1 dan p2? (Jika sesuatu tentang aplikasi tampak penting, dapatkah Anda membagikannya dengan saya agar saya dapat melakukan repro?)

Juga browser + OS mana

@ Roman-Popov @bengry (atau siapa pun yang melihat ini dan dapat melakukan repro) Jika Anda dapat melakukan repro, apakah Anda bersedia mencoba versi baru DevTools (yang dapat saya bagikan di sini) untuk melihat apakah masalah masih terjadi?

Saya dapat mencoba membuat build dengan # 18860 mundur. (Itu satu-satunya komit di set perubahan 4.6-> 4.7 yang tampak mencurigakan.)

@bvaughn Tentang p1 dan p2. Ya, sepertinya ada perbedaan di antara keduanya. P2, di mana RDT tidak ditampilkan secara default, berisi lebih banyak elemen dom. Dan ini satu detail lagi - tab Redux-devtools berperilaku persis seperti tab RDT.

Bagaimana dengan https://reactjs.org/ halaman (masalah disebutkan oleh @bengry) - Saya melihatnya juga. Tetapi periksa lagi sekarang dan tidak melihat masalah. Tab ditampilkan, semuanya baik-baik saja.

Mungkin dalam kasus saya ada masalah memori dalam proyek saya atau sesuatu seperti ini. Karena Jika saya menghapus daftar panjang dari P2, tab devtools akan muncul.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Menangkan 10 Pro 1903

@ Roman-Popov Terima kasih atas informasi yang ditambahkan!

Adakah kesempatan Anda dapat membagikan repro (atau akses ke sana) dengan saya sehingga saya dapat melihat apa yang terjadi?

Bergantian, apakah Anda bersedia untuk menginstal devtools build satu kali jika saya melampirkannya di sini? (Hanya untuk melihat apakah Anda masih bisa menegurnya)

Saya mengalami masalah yang sama di SPA kami. Saya bisa membuat tab Komponen dan Profiler muncul di Alat Pengembang Chrome saat saya memeriksa aplikasi kami di "tampilan" seluler (yang mengubah perenderan komponen awal). Saya menyegarkan dan mengubah kembali ke "tampilan" desktop / responsif (alat pengembang terbuka sepanjang waktu) tab tetap terlihat.

Untuk SPA kami, perbedaan terbesar antara halaman landing seluler dan desktop adalah di desktop kami membuka laci dengan daftar react-virtualized. Laci ini tidak langsung dibuka atau dirender di ponsel. Saya tidak yakin apakah info ini membantu, saya tahu itu hanya remah roti. Saya akan memperbarui jika saya menemukan yang lain.

Akan dengan senang hati mencoba build khusus untuk melihat apakah itu menyelesaikan masalah.

Karena Jika saya menghapus daftar panjang dari P2, tab devtools akan muncul.

Ya! React-virtualized. Saya menggunakannya juga untuk daftar panjang yang saya sebutkan di pesan saya sebelumnya.
overscanRowCount={600} disetel untuk daftar terbungkus. Ini cukup besar, tetapi hanya ada placeholder yang sangat ringan dengan beberapa elemen-dom (untuk menjaga pencarian browser melalui daftar dengan menekan ctrl + f). Jika saya menurunkan versi overscanRowCount menjadi + -50, maka masalah dengan tab yang hilang akan hilang.

Menarik. Jadi sepertinya masalahnya ada hubungannya dengan ukuran pohon, atau mungkin jumlah anak dalam satu orang tua ... @ Roman-Popov, bisakah Anda secara kebetulan melaporkan ini di Code Sandbox atau semacamnya? (Karena saya tidak bisa melihat P2 secara langsung, saya berasumsi?)

Namun dalam berita lain- overscanRowCount={600} tampaknya ... sangat tinggi yang tidak terduga. Saya tidak akan menyarankan bahwa nilai lebih dari satu digit angka. RV dan RW ada untuk menghindari pembuatan dan pengerjaan daftar yang panjang. 600 berarti merender baris viewport, ditambah sebanyak 1.200 baris tambahan.

Apakah reactjs.org menggunakan react-virtualized juga? Karena masalah direproduksi untuk saya di sana juga (pada kenyataannya, masalah ini dibuka dengan itu sebagai contoh). Kami menggunakannya di aplikasi kami, tetapi dengan jumlah overscan yang lebih kecil, dan itu masih terjadi di sana.

Apakah reactjs.org menggunakan react-virtualized juga? Karena masalah itu muncul kembali untuk saya di sana juga

Bekerja dengan baik untuk saya di reactjs.org.

Di aplikasi kami sendiri, kami tidak menggunakan react-virtualized, namun kami dapat mereproduksi masalah tersebut.

edit: Saya mengalami masalah yang sama pada aplikasi react baru yang dibuat oleh create-react-app.

Saya pikir ini mungkin terkait dengan Chrome 83, saya mulai mengalami masalah ini setelah meningkatkan ke 83 dan saya dapat mereproduksinya di Chrome Canary 85.

Kolega yang menggunakan Chromium 81 tidak memiliki masalah dalam menggunakan aplikasi yang sama.

@tokopedia

overscanRowCount = {600} tampaknya ... sangat tinggi yang tidak terduga.
....
RV dan RW ada untuk menghindari pembuatan dan pengerjaan daftar yang panjang

Benar: AKU tahu tentang kinerja. Itu tidak bagus, tapi solusi cepat. Nanti saya melakukan beberapa jenis pencarian khusus tentunya :)
Tentang kode sumber untuk menampilkan aplikasi saya dan mencoba mereproduksi - maaf, saya rasa saya tidak bisa melakukan itu, NDA dan seterusnya, Anda tahu. Tetapi saya dapat mencoba membuat beberapa proyek CRA kecil dengan daftar react-virtualized , halaman yang berat, dll. Dan membagikan repo itu jika saya menemukan bug ini lagi. Saya akan mencoba mencari waktu untuk penyelidikan ini)

Saya pikir ini mungkin terkait dengan Chrome 83, saya mulai mengalami masalah ini setelah meningkatkan ke 83 dan saya dapat mereproduksinya di Chrome Canary 85.

Kolega yang menggunakan Chromium 81 tidak memiliki masalah dalam menggunakan aplikasi yang sama.

Ini akan menjadi info yang sangat berguna untuk dikonfirmasi. @ianvieira, seberapa andal Anda dapat mereproduksi masalah ini? Jika sangat andal, dapatkah Anda mencoba versi Chromium yang lebih lama dan melihat apakah versi tersebut tidak lagi mereproduksi?

Jika demikian, beri tahu saya dan saya akan menghubungi tim Chrome.

Hanya untuk mencoba satu hal tambahan, jika ada orang lain yang dapat melakukan repro masalah ini dengan cukup andal, apakah Anda akan mencoba ekstensi ini dan beri tahu saya jika itu membantu?

ReactDevTools.zip

Saya tidak terlalu mengharapkannya, tetapi saya ingin mengesampingkan perubahan WebPack terbaru.

Untuk memasang ekstensi di atas:

1. Unduh dan unzip di suatu tempat
2. Buka chrome://extensions/ di browser Anda
3. Klik tombol kecil untuk menonaktifkan ekstensi React DevTools
4. Klik tombol "Load Unpacked"
5. Pilih folder ekstensi unzip dari langkah 1

@bvaughn Saya pikir saya dapat secara konsisten mereproduksinya tetapi setelah membuka https://reactjs.org (yang menampilkan tab dengan benar) dan kembali ke aplikasi saya dengan konsol terbuka, sekarang berfungsi secara konsisten.

Di Chrome Canary saya masih dapat mereproduksinya secara konsisten di aplikasi saya dengan beberapa node. Saya akan mencoba versi yang Anda kirim.

Saya perhatikan ini tampaknya mematikan semua tab konsol yang ditambahkan ekstensi lainnya juga. Redux, dll.

Saya perhatikan ini tampaknya mematikan semua tab konsol yang ditambahkan ekstensi lainnya juga. Redux, dll.

Saya mulai curiga ini ada hubungannya dengan Chrome.

Saya pernah mendengar laporan dari orang lain yang mengatakan bahwa Relay DevTools mengalami crash, yang menyebabkan React DevTools rusak. Sekarang saya melihat Anda mengatakan bahwa ini juga memengaruhi Redux DevTools.

Tidak ada yang harus dilakukan React (atau Relay) yang saling mempengaruhi, atau ekstensi Redux.

Saya perhatikan ini tampaknya mematikan semua tab konsol yang ditambahkan ekstensi lainnya juga. Redux, dll.

Saya memperhatikan hal yang sama. Saya baru saja mencoba di Chrome Canary, saya memiliki perilaku yang sama, setelah membuka https://reactjs.org tab React muncul, bersama dengan yang lain:

Saya mencoba sebelumnya dengan https: // localhost : 3000 (tidak berhasil membuka dan menutup Dev Tools) dan dengan https://farfetch.com. Tab baru saja muncul kembali dengan https://reactjs.org dan setelah menutup Dev Tools antara Farfetch dan React dan menyegarkan halaman.

Oh btw, saya menggunakan versi yang Anda kirim ke @bvaughn.

Untuk beberapa alasan, saya hanya dapat melihat tab di https://reactjs.org di Canary. Localhost diam tanpanya (tidak hanya yang bereaksi tetapi semuanya). Saya rasa saya memiliki tab di stable karena saya membuka localhost setelah dokumen React dengan alat Dev dibuka.

Saya mencoba melakukan hal yang sama tetapi saya tidak dapat memilikinya di localhost secara konsisten di Chrome Canary.

EDIT: Setelah menutup tab browser saya mengakses dokumen React di stable, tab-tab tersebut hilang lagi. Tampaknya ini benar-benar masalah Chrome

Masalah ini tidak deterministik. Terkadang berhasil, terkadang tidak. Saya tidak berpikir kita harus membaca terlalu banyak tentang satu kesuksesan .

Chrome v83 kebetulan dirilis satu hari setelah React DevTools v4.7.

Ini adalah versi React DevTools (4.6) sebelumnya jika ada yang ingin mencobanya untuk melihat apakah ada perubahan:
ReactDevTools-4.6.zip

Kedengarannya semakin seperti masalah Chrome meskipun dari apa yang saya dengar.

Baik versi eksperimental maupun 4.6 tidak berfungsi untuk saya (hanya solusi yang disebutkan di atas). Saya juga merasa ini adalah masalah Chrome, karena bug terjadi setelah memperbarui Canary beberapa hari yang lalu dan terus berlanjut sejak itu, tetapi ekstensi berfungsi dengan benar di Stabil.

Mungkin juga perlu dicatat bahwa reactjs.org selalu memiliki masalah sesekali dengan tab ekstensi tidak muncul. Saya tidak yakin mengapa, tetapi kegagalan sesekali tidak ada hal baru . Apa yang tampaknya baru adalah frekuensi kegagalan ini, dan fakta bahwa itu terjadi di situs lain, dan fakta bahwa tampaknya juga terjadi untuk ekstensi lain. (Inilah mengapa saya pikir ini adalah masalah Chrome / Chromium)

Saya tidak tahu cara kerja ekstensi dan saya juga tidak dapat membuat kasus uji yang dikurangi. Tetapi mungkin ini membantu Anda dengan cara apa pun:

Di reactjs.org tempat ekstensi bekerja, objek window memiliki __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ dan __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Yang terakhir terlihat seperti ini:

Di aplikasi yang ekstensinya tidak berfungsi, hanya ada __REACT_DEVTOOLS_GLOBAL_HOOK__ dan terlihat seperti ini:

Apakah ada cara untuk menghubungkan ke ekstensi ( main.js ?), Bahkan mungkin memasang debugger, untuk menemukan potensi kesalahan? (Saya mencoba background.js tetapi tampaknya ini bukan tempat yang tepat untuk dilihat.)

@bvaughn saya juga berpikir ini mungkin bug Chromium (perhatikan Chromium, dan bukan Chrome, karena saya mendapatkan perilaku buggy yang sama persis di Edge). Opera berfungsi dengan baik untuk saya dengan RDT terbaru, jadi saya kira mereka belum memperbarui ke Chromium 83 (meskipun saya belum menghitung untuk memeriksanya sekarang).

Saya membuka bug di sini karena tampaknya diteruskan ke RDT (saya juga tidak tahu tentang orang lain seperti Relay dan Redux DT tidak berfungsi), jadi mungkin dengan beberapa integrasi di antara keduanya. Mungkin API ekstensi yang menyebabkan masalah dan berubah di Chromium 83.

Apakah Anda menghubungi tim Chromium / Chrome tentang ini seperti yang Anda sebutkan sebelumnya?

Setuju pada titik ini bahwa tampaknya itu adalah bug Chromium (yang diluncurkan dengan pembaruan Chrome 83 dan Edge 83 baru-baru ini).

Saya telah melakukan ping ke salah satu rel pengembang di Twitter tetapi saya belum mendengarnya kembali.

Apakah ada cara untuk menghubungkan ke ekstensi (main.js?), Bahkan mungkin memasang debugger, untuk menemukan potensi kesalahan? (Saya mencoba background.js tetapi ini sepertinya bukan tempat yang tepat untuk dilihat.)

@maxbeier Ada beberapa cara untuk men-debug ekstensi. Beberapa ekstensi memasukkan kode ke halaman yang Anda lihat (seperti halnya React DevTools) dalam hal ini Anda dapat men-debugnya menggunakan alur kerja normal.

Anda mungkin juga ingin men-debug UI ekstensi itu sendiri, yang dapat Anda lakukan dengan melepaskan / melepas panel DevTools, dan memunculkan jendela DevTools kedua untuk memeriksa yang pertama, seperti ini (Saya menggunakan ⌘ + J ):

Anda juga dapat membuka ekstensi (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) dan memilih "Detail" dan "Periksa tampilan".

Ngomong-ngomong, tampaknya ini adalah masalah Chromium yang juga memengaruhi Vue dan Redux DevTools.

Jika Anda memiliki akun bug CR, pertimbangkan untuk membintangi masalah ini:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

Saya tidak yakin apakah ini jawaban yang Anda cari, tetapi di Urql Devtools kami telah mencoba beralih dari menggunakan chrome.devtools.inspectedWindow.eval untuk berjabat tangan karena tidak dapat diprediksi seperti ini.

Masalah dengan mengevaluasi jendela yang diinspeksi adalah Anda bisa berakhir dengan kondisi balapan atau ketergantungan pada polling seperti yang terjadi pada react devtools.

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

Saya belum dapat mereproduksi bug tetapi saya tidak akan terkejut jika chrome melakukan sesuatu yang funky dengan panggilan interval di ekstensi. Ini tidak menyenangkan tetapi berjabat tangan mungkin membuat segalanya sedikit lebih mudah, saya tahu perpesanan adalah sesuatu yang didorong oleh dokumen chrome melalui pengevaluasian jendela untuk alasan keamanan.

Itu saran yang menarik, @andyrichardson. Terima kasih!

Kami juga menghadapi masalah yang sama untuk ChroPath
Saya belum mendapatkan solusi permanen tetapi berikut adalah penyelesaiannya-

1. Ubah tema Chrome DevTools, hanya jika diperlukan.
2. Sekarang buka devtools, Anda akan menemukan tab ekstensi di DevTools.
3. Anda dapat mengubah tema lagi apa pun yang ingin Anda pertahankan dan ini akan memperbaiki masalah Anda.

Terima kasih, @sanjayautonomiq , ini berhasil untuk saya

Ini telah terjadi pada saya selama lebih dari setahun di chrome. biasanya memuat ulang halaman, komponen dan tab profiler muncul kembali. hanya ingin menunjukkan bahwa ini bukan hanya rilis terbaru, itu sudah terjadi sejak v16 sepanjang yang saya ingat

Ini telah terjadi pada saya selama lebih dari setahun di chrome. biasanya memuat ulang halaman, komponen dan tab profiler muncul kembali. hanya ingin menunjukkan bahwa ini bukan hanya rilis terbaru, itu sudah terjadi sejak v16 sepanjang yang saya ingat

Saya pikir itu mungkin sesuatu di pihak Anda, karena secara pribadi saya belum pernah melihat ini di tahun lalu AFAIR - dan seperti yang disebutkan, ini tidak terjadi di Opera terbaru pada saat penulisan ini (Opera 68, Chromium 81), dan bagi saya menyegarkan halaman tidak membantu. Solusi yang disarankan oleh @sanjayautonomiq melakukannya.
Meskipun bug ini telah ada setidaknya selama satu tahun, sesuatu dalam beberapa minggu terakhir telah memperburuknya (Chromium baru dan / atau versi RDT baru) - terbukti dari semua reaksi dalam masalah ini.

Meskipun bug ini telah ada setidaknya selama satu tahun, sesuatu dalam beberapa minggu terakhir telah memperburuknya (Chromium baru dan / atau versi RDT baru) - terbukti dari semua reaksi dalam masalah ini.

Memang benar. Saya melakukan ping ke bug CR lagi. Regresi ini cukup mengganggu.

FYI, saya baru saja menandai http://crbug.com/1085215 sebagai duplikat dari http://crbug.com/1093731. Perbaikan untuk masalah terakhir telah dikirimkan ~ 8 hari yang lalu. Harap uji ulang di Canary dan, jika masalah tidak teratasi, dedupkan 1085215.

Memang terlihat seperti perbaikan Canary menyelesaikan masalah ini (atau setidaknya membuatnya JAUH lebih sulit untuk ditegur). Akan membiarkan masalah ini terbuka sampai perbaikan telah diluncurkan ke Chrome stable, karena kami sudah mendapatkan banyak laporan duplikat tentang ini.

Kami juga menghadapi masalah yang sama untuk ChroPath
Saya belum mendapatkan solusi permanen tetapi berikut adalah penyelesaiannya-

1. Ubah tema Chrome DevTools, hanya jika diperlukan.
2. Sekarang buka devtools, Anda akan menemukan tab ekstensi di DevTools.
3. Anda dapat mengubah tema lagi apa pun yang ingin Anda pertahankan dan ini akan memperbaiki masalah Anda.

Bekerja seperti pesona bagi saya, terima kasih! Akan mencoba membenturkan kepalaku ke dinding.

Ini sangat aneh.

Saya harus mengubah tema devTools untuk memperbaiki masalah ini.

Terima kasih, @sanjayautonomiq

Tapi ini bug.

Tapi ini bug.

Iya.

Secara khusus, ini adalah bug Chrome (bug CR 1085215 ) seperti yang disebutkan dalam deskripsi masalah: smile: Tidak ada yang dapat kami lakukan (di sini) untuk memperbaikinya.

Ini tampaknya telah diselesaikan sekarang untuk saya di Chrome stable jadi saya akan menutup masalah ini.

Ini tampaknya telah diselesaikan sekarang untuk saya di Chrome stable jadi saya akan menutup masalah ini.

Masih mereproduksi untuk saya di Chrome 83.0.4103.116.

Saya setuju ini tidak ada perbaikan di sisi RDT, tetapi mungkin layak untuk menjaga masalah ini tetap terbuka sampai ini diperbaiki di Chrome.

Masalah yang sama di sini Versi 83.0.4103.116 (Build Resmi) (64-bit)

Saya akan menyela dan mengatakan itu juga menjadi masalah bagi saya (Versi 83.0.4103.116).

Hai semuanya. Mungkin tidak ada gunanya menambahkan lebih banyak komentar "+1" di sini karena ini adalah bug Chromium. Tidak ada yang bisa saya lakukan di sisi ekstensi untuk membuatnya berfungsi. Suara "+1" akan lebih baik dihabiskan untuk bug Chromium itu sendiri: senyuman: sehingga Google tahu bahwa ini berdampak pada banyak orang.

Karena itu, bug CR telah ditandai sebagai diperbaiki dan dijadwalkan untuk diambil ceri ke v84 dari Chrome sesuai komentar ini sehingga semoga dapat segera diselesaikan untuk semua orang.

Sementara itu, saya akan mengunci masalah ini hanya untuk menghindari pemberitahuan-spamming kepada semua orang yang telah berkomentar di atas.