باعتبارك老婆لأحذية الأطفال الأمامية، أعتقد أنك يجب أن تكون على دراية بمتصفح Chrome.调页面،写BUG ،画样式،看php片، سيكون العالم كله عديم الفائدة بدونها.
لا تصدق ذلك؟ دعونا نرى مدى قوة老婆...
عند تصحيح أخطاء الواجهة الخلفية بشكل مشترك أو استكشاف الأخطاء وإصلاحها على الإنترنت، هل تسمعهم كثيرًا يقولون هذه الجملة: أنت تحاول تقديم طلب آخر و اسمحوا لي أن أرى لماذا حدث الخطأ!
هناك طريقة بسيطة يبعث على السخرية لإعادة إرسال الطلب.
حدد Network
وانقر فوق Fetch/XHR
وحدد طلب إعادة الإرسال، ثم
انقر بزر الماوس الأيمن وحدد Replay XHR
ليست هناك حاجة لتحديث الصفحة أو التفاعل معها أليس هذا رائعًا؟ ! !
سيناريو بدء الطلب بسرعة في وحدة التحكم أو التصحيح المشترك أو إصلاح الأخطاء لنفس الطلب، في بعض الأحيان يكون من الضروري تعديل معلمات الإدخال وإعادة البدء، هل هناك أي اختصار؟
حدد Network
وانقر فوق Fetch/XHR
وحدد Copy as fetch
console، والصق الرمز
لتعديل المعلمات، ثم اضغط على Enter للإنهاء
في الماضي، كنت أتعامل معها دائمًا عن طريق تغيير الكود أو كتابة fetch يدويًا، وكان من الغباء حقًا التفكير في الأمر...
3
ويحتاج إلى نسخها وإرسالها إلى الآخرين، فماذا أفعل؟
استخدم وظيفة copy لتنفيذ对象كمعلمة إدخال
في الماضي، كنت أطبعه دائمًا على وحدة التحكم من خلال JSON.stringify(fetfishObj, null, 2) ، ثم أقوم بنسخه ولصقه يدويًا، وكان هذا غير فعال حقًا...
بعد تحديد عنصر في لوحة Elements ، ماذا لو كنت تريد معرفة بعض سماته، مثل宽高位置إلى ذلك، من خلال JS ؟
حدد العنصر المراد تصحيح أخطائه من خلال Elements
وقم بالوصول إلى وحدة التحكم مباشرة باستخدام $0
في بعض الأحيان، سنحتاج إلى التقاط لقطة شاشة لصفحة ويب. يمكن عمل لقطات شاشة مدمجة في النظام أو لقطات شاشة WeChat، ولكن يلزم التقاط محتوى يتجاوز ذلك. شاشة واحدة ماذا تفعل ؟
قم بإعداد المحتوى الذي يجب التقاطه
cmd + shift + p قم بتنفيذ أمر Command
وأدخل Capture full size screenshot واضغط على Enter.
ماذا لو كنت تريد اعتراض بعض العناصر المحددة؟
الإجابة أيضًا بسيطة جدًا. في الخطوة الثالثة، أدخل Capture node screenshot
. عند تصحيح العناصر، هل تقوم غالبًا بتوسيعها واحدًا تلو الآخر لتصحيح الأخطاء عندما يكون المستوى عميقًا نسبيًا؟ هناك طريقة أسرع
للضغط باستمرار على مفتاح opt + النقر (العنصر الخارجي الذي يحتاج إلى التوسيع)
لرؤية هذا السيناريو. أعتقد أنه تم تنفيذ عمليات مختلفة على سلسلة معينة، ثم نريد معرفة نتائج كل خطوة من خطوات التنفيذ. ماذا يجب أن نفعل؟ .
'fatfish'.split('').reverse().join('') // hsiftaf يمكنك القيام بذلك
// الخطوة 1 'fatfish'.split('') // ['f', 'a', 't'، 'f'، 'i'، 's'، 'h']
// الخطوة 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i '، 'و'، 'ر'، 'أ'، 'و']
// الخطوة 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
الطريقة الأسهل هي
استخدام $_ للإشارة إلى نتيجة العملية السابقة دون نسخها في كل مرة
// الخطوة 1 'fatfish'.split('') // ['f', 'a', 't', ' سمكة']
// الخطوة الثانية $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// الخطوة 3 $_.join('') // hsiftaf
بعض الطلاب يحبون المظهر الأبيض للكروم، والبعض الآخر يحب اللون الأسود. يمكننا استخدام مفاتيح الاختصار للتبديل بين الموضوعين بسرعة.
cmd + shift + p قم بتنفيذ أمر Command
وأدخل Switch to dark theme أو Switch to light theme لتبديل السمة.
$ " و " $$ "هي المتطلبات الأكثر شيوعًا لاستخدام document.querySelector و document.querySelectorAll على وحدة التحكم لتحديد عناصر الصفحة الحالية، ولكنها في الواقع طويلة جدًا يمكننا استخدام $ و $$ بديل.
$i قم بتثبيت حزمة npm مباشرة في وحدة التحكم،هل سبق لك أن واجهت هذا السيناريو؟ أحيانًا أرغب في استخدام API مثل dayjs أو lodash ، لكني لا أرغب في الانتقال إلى الموقع الرسمي للتحقق منها. سيكون من الرائع أن أتمكن من تجربتها مباشرة على وحدة التحكم.
يعد Console Importer أحد المكونات الإضافية المستخدمة لتثبيت حزم npm مباشرة في وحدة التحكم.
قم بتثبيت المكون الإضافي Console Importer
$i('name') لتثبيت حزمة npm
لنفترض أن هناك الكود التالي، نأمل أن يتم تفعيل النقطة الفاصلة عندما يكون اسم الطعام ? كيف يمكننا القيام بذلك؟
الأطعمة الثابتة = [
{
اسم: '؟'،
السعر: 10
},
{
اسم: '؟'،
السعر: 15
},
{
اسم: '؟'،
السعر: 20
},
]
الأطعمة.forEach((v) => {
console.log(v.name, v.price)
}) يعد هذا مناسبًا جدًا عند استخدام كمية كبيرة من البيانات ولا يريد كسر الشرط إلا عند استيفاء الشرط. فقط تخيل أنه إذا لم تكن هناك نقاط توقف مشروطة، فهل نحتاج إلى النقر فوق مصحح الأخطاء مرات؟
(تعلم مشاركة الفيديو: تطوير الواجهة الأمامية للويب، فيديو أساسيات البرمجة)
ما ورد أعلاه هو تفاصيل 11 مهارة لتصحيح أخطاء الكروم يمكنها تحسين الكفاءة. لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!