React: لا يعرض ملحق Devtools عناصر من الملفات المحلية
هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
حشرة
ما هو السلوك الحالي؟
عندما يتم تحميل ملف محلي ، يعرض امتداد devtools لوحة في devtools ، لكن جميع العناصر مفقودة. لا توجد تحذيرات أو أخطاء وحدة التحكم. يتم عرض جميع العناصر بشكل صحيح عند استخدام الخادم ، لكن الوثائق تقول أن الخادم ليس ضروريًا في هذه الحالة.
إذا كان السلوك الحالي عبارة عن خطأ ، فالرجاء تقديم خطوات إعادة إنتاج المشكلة ، وإن أمكن عرضًا أدنى من العرض التوضيحي للمشكلة. الصق الرابط إلى JSFiddle (https://jsfiddle.net/Luktwrdm/) أو مثال CodeSandbox (https://codesandbox.io/s/new) أدناه:
- ضع هذا في
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function HelloWorld() {
return React.createElement("h1", null, "Hello, world!");
}
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById("root")
);
</script>
</body>
</html>
- قم بتثبيت ملحق React devtools والسماح بالوصول إلى URLS للملف المحلي
- افتح
index.html - افتح devtools
- افتح لوحة المكونات
ما هو السلوك المتوقع؟
يتم عرض عنصر Hello بالإعدادات الافتراضية ، ويتم عرض كل من Hello و h1 عندما لا يكون نوع المضيف مخفيًا في الإعدادات.
ما إصدارات React وأي متصفح / نظام تشغيل متأثر بهذه المشكلة؟
- React / ReactDOM 16.10.1 UMD من Unpkg CDN
- أدوات المطورين React (امتداد Chrome) 4.1.2
- كروم 77.0.3865.90
- macOS 10.14.6
nickmccurdy
ال 3 كومينتر
يتم رمي chrome.devtools.inspectedWindow.eval :
DOMException: فشل تنفيذ "postMessage" على "نافذة": أصل الهدف غير صالح "فارغ" في استدعاء لـ "postMessage".
يبدو وكأنه انحدار ناتج عن # 16900. تؤدي العودة إلى هذا الالتزام إلى إصلاح DevTools.
cc linshunghuang
bvaughn
في ٢٩ سبتمبر ٢٠١٩
نعم بالتأكيد بسبب هذا التغيير. تخميني هو أننا سنحتاج إلى تغيير هدف postMessage من window.origin إلى "*" لأن الأصل خالٍ للملفات المحلية؟
linshunghuang
في ٢٩ سبتمبر ٢٠١٩
تم إصلاح ذلك عبر # 16953 وسأصدر تحديثًا اليوم (4.1.3) مع الإصلاح!
bvaughn
في ٣٠ سبتمبر ٢٠١٩
القضايا ذات الصلة
tleunen
·
3تعليقات
krave1986
·
3تعليقات
framerate
·
3تعليقات
varghesep
·
3تعليقات
bloodyowl
·
3تعليقات
التعليق الأكثر فائدة
يتم رمي
chrome.devtools.inspectedWindow.eval:يبدو وكأنه انحدار ناتج عن # 16900. تؤدي العودة إلى هذا الالتزام إلى إصلاح DevTools.
cc linshunghuang